<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no">
  <title>Consul by HashiCorp</title>
  <link rel="stylesheet" href="static/bootstrap.min.css">
  <link rel="stylesheet" href="static/base.css">
  <link rel="shortcut icon" href="static/favicon.png">

  <script type="text/javascript">
    // Change this value to your consul host if you are not running
    // the UI on the same host as a consul instance.
    // e.g. "http://myserver.com:8500"
    var consulHost = ''
  </script>

</head>
<body>

  <div class="wrapper">
    <div class="container">
      <div class="col-md-12">
        <div id="app">
        </div>
      </div>
    </div>

    <div class="push"></div>
  </div>

    <div class="footer">
        <div class="container">
          <div class="col-md-12">
          </div>
        </div>
    </div>

  <script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="error">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="text-center vertical-center">
          {{#if controller.model.statusText }}
            <p class="bold">HTTP error code from Consul: <code>{{controller.model.status}} {{controller.model.statusText}}</code></p>
          {{/if}}
          <p>This is an error page for the Consul web UI. You may have visited a URL that is loading an
          unknown resource, so you can try going back to the <a href="#">root</a>.</p>
          <p>Otherwise, please report any unexpected
          issues on the <a href="https://github.com/hashicorp/consul">GitHub page</a>.</p>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="dc/unauthorized">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="text-center vertical-center">
          <p class="bold">Access Denied</p>
          {{#if aclToken}}
          <p>Your ACL token, <code>{{aclToken}}</code>, does not
          have the appropriate permissions to perform the expected action.</p>
          {{else}}
          <p>The default agent token does not
          have the appropriate permissions to perform the expected action.</p>
          {{/if}}
          <p>Learn more in the <a href="https://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="dc/aclsdisabled">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="text-center vertical-center">
          <p class="bold">ACLs Disabled</p>
          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to explicitly enable them.</p>
          </p>Learn more in the <a href="https://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="loading">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="text-center vertical-center">
          <img src="static/loading-cylon-purple.svg" width="384" height="48">
          <p><small>Loading...</small></p>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="actionbar">
    <div class="row">
      <div class="action-bar">
        <div {{ bind-attr class="searchBar:col-md-10:col-md-5" }} >
          <div class="form-group">
            {{ input type="text" value=filter class="form-control form-control-mini" placeholder=filterText}}
          </div>
        </div>
        {{#if newAclButton }}
          <div class="col-md-2">
            <div class="form-group">
              {{#link-to 'acls' class='btn btn-mini btn-default btn-noactive pull-right'}}New ACL{{/link-to}}
            </div>
          </div>
        {{/if}}
        {{#if statuses}}
        <div class="col-md-5">
          <div class="form-group">
            {{view Ember.Select content=statuses value=status class="form-control form-control-mini"}}
          </div>
        </div>
        {{/if}}
        {{#if hasExpanded }}
        <div class="col-md-2 hidden-xs hidden-sm">
          <div class="form-group">
            <button {{ bind-attr class=":btn :btn-mini :pull-right condensed:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
          </div>
        </div>
        {{/if}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="dc">
    <div class="row">
      <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar" }}>

        <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          <a href="#"><div class="top-brand"></div></a>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
        </div>

        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
        </div>

        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
        </div>

        <div class="col-md-2 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
          {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
        </div>

        <div class="col-md-2 col-sm-2 col-xs-6 col-md-offset-0 col-sm-offset-4 col-xs-offset-1">
          <a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>

          {{#if isDropdownVisible}}
            <ul class="dropdown-menu col-xs-8" style="display:block;">
              {{#each dc in dcs}}
                <li {{action "hideDrop"}}>{{#link-to 'services' dc}}{{dc}}{{/link-to}}</li>
              {{/each}}
            </ul>
          {{/if}}

        </div>

        <div class="col-md-1 col-sm-2 col-xs-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
          {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}
          <svg xmlns="http://www.w3.org/2000/svg" data-icon="cog" viewBox="0 0 32 40">
            <path d="M14 0l-1.313 4c-1 .3-1.975.688-2.875 1.188l-3.72-1.875-2.78 2.78 1.875 3.72c-.5.9-.888 1.875-1.188 2.875L0 14v4l4 1.314c.3 1 .687 1.975 1.187 2.875l-1.78 3.718 2.78 2.78 3.72-1.874c.9.5 1.905.887 2.905 1.188l1.28 4h4l1.314-4c1-.3 2.006-.688 2.906-1.188L26 28.594l2.813-2.78-1.906-3.72c.5-.9.887-1.905 1.188-2.905L32 18v-4l-4-1.312c-.3-1-.687-1.975-1.187-2.875l1.78-3.72-2.78-2.78-3.72 1.875c-.9-.5-1.905-.888-2.905-1.188L18 0h-4zm2 9c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/>
          </svg>
          {{/link-to}}
        </div>
      </div>
    </div>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="kv/show">
    <div class="row">
      <div class="col-md-6 col-lg-5 padded-right-middle">
        <h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
        </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-lg-5 padded-right-middle">

          {{#each item in model }}
            {{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
              <div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
              <div class="name">
                {{item.keyWithoutParent}}
              </div>
            {{/link-to}}

          {{/each}}
      </div>

      <div class="border-left hidden-xs hidden-sm">
      </div>

      <div class="visible-xs visible-sm">
        <hr>
      </div>

      <div class="col-md-6 col-lg-7 border-left">
        <div class="padded-border">
          <div class="panel">
            <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
              <div class="panel-heading">
                <h4 class="panel-title">
                  Create Key
                </h4>
              </div>

              <div class="panel-body panel-form">
                <form class="form">

                  <div class="form-group">
                    <p>{{errorMessage}}</p>
                  </div>

                  <div {{ bind-attr class=":form-group newKey.keyValid:valid" }}>
                    <div class="input-group">
                      <span class="input-group-addon">{{parentKey}}</span>
                      {{ input value=newKey.Key class="form-control" required=true }}
                    </div>
                    <span class="help-block">To create a folder, end the key with <code>/</code></span>
                  </div>

                  {{#if newKey.isFolder }}
                  <p>No value needed for nested keys.</p>
                  {{else}}
                  <div class="form-group">
                    {{ textarea value=newKey.Value class="form-control"}}
                    <span class="help-block">Value can be any format and length</span>
                  </div>
                  {{/if}}

                  <button {{ action "createKey"}} {{bind-attr disabled=newKey.isInvalid }} {{ bind-attr class=":btn newKey.isValid:btn-success:btn-default" }}>Create</button>
                  <button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
                </form>
              </div>
            </div>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="kv/edit">
    <div class="row">
      <div class="col-md-6 col-lg-5 padded-right-middle">
        <h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-lg-5 padded-right-middle">
          {{#each item in siblings }}
            {{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
              <div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
              <div class="name">
                {{item.keyWithoutParent}}
              </div>
            {{/link-to}}
          {{/each}}
      </div>

      <div class="border-left hidden-xs hidden-sm">
      </div>

      <div class="visible-xs visible-sm">
        <hr>
      </div>

      <div class="col-md-6 col-lg-7 border-left">
        <div class="padded-border">

          <div class="panel">
            <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green isLocked:bg-light-gray" }}></div>
            <div class="panel-heading">
              <h4 {{bind-attr class=":panel-title isLocked:locked"}}>
                {{model.Key}}
                {{#if model.isLocked}}
                <small class="pull-right">
                KEY LOCKED
                </small>
                {{/if}}
              </h4>
            </div>

            <div class="panel-body panel-form">
              <div class="form-group">
                {{errorMessage}}
              </div>
              <form class="form">
                <div class="form-group">
                  {{ textarea value=model.valueDecoded class="form-control" disabled=model.isLocked}}
                </div>
                <button {{action "updateKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-success"}} {{bind-attr disabled=isLocked}}>Update</button>
                <button {{action "cancelEdit"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-default"}}>Cancel</button>
                <button {{action "deleteKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger"}} {{bind-attr disabled=isLocked}}>Delete key</button>
              </form>
            </div>
          </div>

          {{#if model.isLocked}}
            <h5>Lock Session</h5>

            {{#link-to 'nodes.show' model.session.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
              <div class="bg-light-gray list-bar-horizontal"></div>
              <div class="name">
                {{ sessionName session }}
                <small class="pull-right">
                  {{session.Node}}
                </small>
              </div>
            {{/link-to}}
          {{/if}}

        </div>
      </div>

    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="item/loading">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="text-center vertical-center">
          <img src="static/loading-cylon-purple.svg" width="384" height="48">
          <p><small>Loading...</small></p>
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="services">
    <div class="row">
      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
        {{view App.ActionBarView }}

        {{#if filteredContent}}

              {{#if condensed }}

                {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
                  {{#link-to 'services.show' Name tagName="div" href=false class="list-group-item list-condensed-link" }}
                    <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
                    <div class="name">
                      {{Name}}
                      <small class="pull-right">
                        {{ checkMessage }}
                      </small>
                    </div>
                  {{/link-to}}
                {{/collection}}

              {{else}}

                {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
                  {{#link-to 'services.show' Name tagName="div" href=false class="list-group-item list-link" }}
                    <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
                    <h4 class="list-group-item-heading">
                      {{#link-to 'services.show' Name class='subtle'}}{{Name}}{{/link-to}}
                      <div class="heading-helper">
                        <a class="subtle" href="#">{{checkMessage}}</a>
                      </div>
                    </h4>
                    <ul class="list-inline">
                      {{#each node in nodes }}
                      <li class="bold">{{node}}</li>
                      {{/each}}
                    </ul>
                  {{/link-to}}
                {{/collection}}

              {{/if}}

        {{else}}
        <p class="light">There are no services to show.</p>
        {{/if}}

      </div>

      <div class="border-left hidden-xs hidden-sm">
      </div>

      <div class="visible-xs visible-sm">
        <hr>
      </div>

      <div class="col-md-6 col-lg-7 border-left scrollable">
        <div class="row padded-border">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="service">
      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
        {{#link-to "services" class="btn btn-default btn-block" }}Back to all services{{/link-to}}
        <hr>
      </div>

      <h3 class="no-margin">{{ model.0.Service.Service }}</h3>
      <hr>

      <h5>Tags</h5>
      {{#if tags}}
        <p>{{tags}}</p>
      {{else}}
        <p>No tags</p>
      {{/if}}

      <h5>Nodes</h5>

      {{#each node in model }}

        {{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link panel-list" }}
          <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :panel-bar-horizontal"}}></div>

          <div class="panel-heading">
            <h3 class="panel-title">
              {{node.Node.Node}}
              <small>{{node.Node.Address}}</small>
              <span class="panel-note">{{node.checkMessage}}</span>
            </h3>
          </div>

          <ul class="list-unstyled">
            {{#each check in node.Checks }}
              <li class="list-group-item list-condensed-link">
                {{listBar check.Status}}
                <div class="name">
                  {{check.Name}}
                  <small>{{ check.CheckID }}</small>
                  <small class="pull-right">
                  {{check.Status}}
                  </small>
                </div>
              </li>
            {{/each}}
          </ul>

        {{/link-to}}

      {{/each}}
  </script>

  <script type="text/x-handlebars" id="nodes">
    <div class="row">
      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
        {{view App.ActionBarView }}

          {{#if filteredContent}}

                {{#if condensed }}
                    {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
                      {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-condensed-link" }}
                        <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
                        <div class="name">
                          {{Node}}
                          <small class="pull-right">
                            {{ numServices }} services
                          </small>
                        </div>
                      {{/link-to}}
                    {{/collection}}

                {{else}}

                  {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
                    {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-link" }}
                      <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
                      <h4 class="list-group-item-heading">
                        {{Node}}
                        <small>{{Address}}</small>
                        <div class="heading-helper">
                          <a class="subtle" href="#">{{checkMessage}}</a>
                        </div>
                      </h4>
                      <ul class="list-inline">
                        {{#each service in services}}
                          <li class="bold">{{service.Service}}</li>
                        {{/each}}
                      </ul>
                    {{/link-to}}
                  {{/collection}}

                {{/if}}

          {{else}}
          <p class="light">There are no nodes to show.</p>
          {{/if}}
      </div>

      <div class="border-left hidden-xs hidden-sm">
      </div>

      <div class="col-md-6 col-lg-7 border-left scrollable">
        <div class="row padded-border">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="node">
      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
        {{#link-to "nodes" class="btn btn-default btn-block" }}Back to all nodes{{/link-to}}
        <hr>
      </div>

      <h3 class="no-margin">
        {{ model.Node }} <small> {{ model.Address }}</small>
        <button {{ action "deregisterNode" }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-mini isLoading:btn-warning" }}>Deregister</button>
      </h3>
      <hr>

      <h5>Services</h5>

      {{#each service in model.Services }}
        {{#link-to 'services.show' service.Service tagName="div" href=false class="list-group-item list-condensed-link double-line" }}
          <div class="list-bar-horizontal bg-light-gray"></div>
            <div class="name">
              {{service.Service}}
              <small class="pull-right">
                {{service.Address}}:{{service.Port}}
              </small>
            </div>
            <ul class="list-inline sub">
              {{#each tag in service.Tags}}
                <li>{{tag}}</li>
              {{/each}}
              {{serviceTagMessage service.Tags}}
            </ul>
        {{/link-to}}

      {{/each}}

      <h5>Checks</h5>

      {{#each check in model.Checks }}

        <div class="panel">
          {{ panelBar check.Status }}
          <div class="panel-heading">
            <h3 class="panel-title">
              {{check.Name}}
              <small>{{check.CheckID}}</small>
              <span class="panel-note">{{check.Status}}</span>
            </h3>
          </div>

          <div class="panel-body">
            <h5>Notes</h5>
            <p>{{ check.Notes }}</p>
            <h5>Output</h5>
            <pre>{{check.Output}}</pre>
          </div>
        </div>

      {{/each}}

      <h5>Lock Sessions</h5>

      {{#if sessions }}
        {{errorMessage}}

        {{#each session in sessions }}
          <div class="list-group-item list-condensed double-line">
            <div class="bg-light-gray list-bar-horizontal"></div>
            <div class="name">
              {{ sessionName session }}
              <button {{ action "invalidateSession" session.ID }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-list isLoading:btn-warning" }}>Invalidate</button>
            </div>

              <ul class="list-inline sub">
                {{#each check in session.Checks}}
                  <li class="bold">{{check}}</li>
                {{/each}}
              </ul>
          {{ sessionMeta session }}
          </div>
        {{/each}}

      {{else}}
        <p class="light small">No sessions</p>
      {{/if}}

      <h5>Network Tomography</h5>

      {{ tomographyGraph tomography 336 }}

      <p class="light small">Node: <span id="tomography-node-info"></span></p>
      <p class="light small">Minimum: {{ tomography.min }}ms</p>
      <p class="light small">Median: {{ tomography.median }}ms</p>
      <p class="light small">Maximum: {{ tomography.max }}ms</p>
  </script>

  <script type="text/x-handlebars" id="acls">
    <div class="row">
      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
        {{view App.ActionBarView }}

          {{#if filteredContent}}
              {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
                {{#link-to 'acls.show' ID tagName="div" href=false class="list-group-item list-condensed-link" }}
                  <div class="bg-light-gray list-bar-horizontal"></div>
                  <div class="name">
                    {{ aclName Name ID }}
                  </div>
                {{/link-to}}
              {{/collection}}
          {{else}}
            <p class="light">There are no ACLs to show.</p>
          {{/if}}
      </div>

      <div class="border-left hidden-xs hidden-sm">
      </div>

      {{#if isShowingItem}}
      <div class="col-md-6 col-lg-7 border-left scrollable">
        <div class="row padded-border">
          {{outlet}}
        </div>
      </div>
      {{else}}
        <div class="col-md-6 col-lg-7 border-left">
          <div class="row padded-border">
            <div class="panel">
              <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
                <div class="panel-heading">
                  <h4 class="panel-title">
                    New ACL
                  </h4>
                </div>

                <div class="panel-body panel-form">
                  <div class="form-group"></div>

                  <form class="form">
                    <div class="form-group">
                      {{ input value=newAcl.Name class="form-control" }}
                      <span class="help-block">Set the optional name for the ACL.</span>
                    </div>

                    <div class="form-group">
                      {{view Ember.Select content=types value=newAcl.Type class="form-control form-control-mini"}}
                      <span class="help-block">The type of ACL this is.</span>
                    </div>

                    <div class="form-group">
                      <label>Rules</label>
                      {{ textarea value=newAcl.Rules class="form-control" }}
                      <span class="help-block">For more information on rules, visit the <a href="https://www.consul.io/docs/internals/acl.html">ACL documentation.</a></span>
                    </div>

                    <button {{ action "createAcl"}} {{ bind-attr class=":btn :btn-success" }}>Create</button>
                  </form>
                </div>
              </div>
          </div>
        </div>
      {{/if}}
    </div>
  </script>

  <script type="text/x-handlebars" id="acl">
    <div class="row">
      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
        {{#link-to "acls" class="btn btn-default btn-block" }}Back to all ACLs{{/link-to}}
        <hr>
      </div>
    </div>

        <div class="panel">
          <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
            <div class="panel-heading">
              <h4 class="panel-title">
                {{ aclName "Update ACL" model.ID }}
              </h4>
            </div>

            <div class="panel-body panel-form">
              <div class="form-group"></div>

              <form class="form">
                <div class="form-group">
                  {{ input value=model.Name class="form-control" }}
                  <span class="help-block">Set the optional name for the ACL.</span>
                </div>

                <div class="form-group">
                  {{view Ember.Select content=types value=model.Type class="form-control form-control-mini"}}
                  <span class="help-block">The type of ACL this is.</span>
                </div>

                <div class="form-group">
                  <label>Rules</label>
                  {{ textarea value=model.Rules class="form-control" }}
                  <span class="help-block">For more information on rules, visit the <a href="https://www.consul.io/docs/internals/acl.html">ACL documentation.</a></span>
                </div>

                <button {{ action "updateAcl"}} {{ bind-attr class=":btn :btn-success" }}>Update</button>
                <button {{ action "clone" }} {{ bind-attr class=":btn :btn-default" }}>Clone</button>
                <button {{ action "set" }} {{ bind-attr class=":btn :btn-default" }}>Use Token</button>
                {{# if model.isNotAnon }}
                <button {{ action "delete"}} {{ bind-attr class=":btn isLoading:btn-warning:btn-danger :pull-right" }}>Delete</button>
                {{/if}}

              </form>
            </div>
          </div>
      <hr>
  </script>

  <script type="text/x-handlebars" id="index">
    <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12 vertical-center">
      <h5>Select a datacenter</h5>
      {{#each item in model}}
        {{#link-to 'services' item }}
            <div class="panel panel-link panel-short">
              <div class="panel-bar bg-light-gray"></div>
              <div class="panel-heading">
                <h3 class="panel-title">
                  {{item}}
                  <span class="panel-note"></span>
                </h3>
              </div>
            </div>
        {{/link-to}}
      {{/each}}
    </div>
  </script>

  <script type="text/x-handlebars" id="settings">
    <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12">
      <h3>Settings</h3>
      <p>These settings allow you to configure your browser for the Consul Web UI. Everything is saved to localstorage,
      and should persist through visits and browser usage.</p>
      <p>Settings are automatically persisted upon modification, so no manual save is required.</p>
      <h5>Access Token</h5>
      <div class="form-group">
        {{ input type="text" value=model.token class="form-control form-mono" placeholder="token"}}
        <span class="help-block">The token is sent with requests as the <code>?token</code> parameter. This is used to control the ACL for the
        web UI.</span>
      </div>
      <div class="form-group">
        <button {{ action "reset" }} {{ bind-attr class=":btn :btn-danger" }}>Reset Defaults</button>
      </div>
    </div>
  </script>


  <script>
  // Enable query params, must be loaded before ember is
  EmberENV = {FEATURES: {'query-params-new': true}};
  </script>

  <!-- ASSETS -->
  <script src="javascripts/libs/jquery-1.10.2.min.js"></script>
  <script src="javascripts/libs/handlebars-1.3.0.min.js"></script>
  <script src="javascripts/libs/base64.min.js"></script>
  <script src="javascripts/libs/ember-debug.min.js"></script>
  <script src="javascripts/libs/ember-validations.min.js"></script>
  <script src="javascripts/libs/list-view.min.js"></script>
  <script src="javascripts/libs/classie.js"></script>
  <script src="javascripts/libs/notificationFx.js"></script>
  <script src="javascripts/fixtures.js"></script>
  <script src="javascripts/app/router.js"></script>
  <script src="javascripts/app/routes.js"></script>
  <script src="javascripts/app/models.js"></script>
  <script src="javascripts/app/views.js"></script>
  <script src="javascripts/app/controllers.js"></script>
  <script src="javascripts/app/helpers.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
  <!-- <script src="static/application.min.js"></script> -->
  <!-- /ASSETS -->

</body>
</html>