<div ng-controller="BrowserCtrl" class="etcd-container etcd-browser {{columns}} {{preview}} {{save}}">

  <div class="etcd-popover etcd-popover-error" id="etcd-save-error">
    <div class="etcd-popover-notch"></div>
    <div class="etcd-popover-content">Error:</div>
  </div>

  <div class="etcd-popover etcd-popover-error" id="etcd-browse-error">
    <div class="etcd-popover-notch"></div>
    <div class="etcd-popover-content">Error:</div>
  </div>

  <div class="etcd-header solid">
    <a class="etcd-back" ng-click="back()" ng-class="{false:'etcd-disabled'}[enableBack]">
      <img src="images/back.svg"/>
    </a>
    <a class="etcd-add" ng-click="add()"><img src="images/add.svg"/></a>
    <div class="etcd-browser-path">
      <input type="text" ng-model="inputPath" ng-enter="onEnter()" tabindex="888" />
    </div>
    <button class="etcd-button etcd-button-small etcd-button-primary etcd-save" ng-click="saveData()">Save</button>
  </div>


  <div class="etcd-body">

    <div class="etcd-list">
      <table cellpadding="0" cellspacing="0">
      <thead>
        <td class="etcd-name-header">Name</td>
        <td class="etcd-ttl-header">TTL</td>
        <td class="etcd-actions-header">&nbsp;</td>
      </thead>
      <tbody>
        <tr ng-repeat="key in list | orderBy:'key'">
          <td>
            <highlight ng-class="{true:'directory'}[key.dir]" ng-click="setActiveKey(key.key)" highlight-base="etcdPath" highlight-current="key.key">{{key.key}}</highlight>
          </td>
          <td ng-switch on="!!key.expiration" class="etcd-ttl">
            <div ng-switch-when="true"><time relative datetime="{{key.expiration.substring(0, key.expiration.lastIndexOf('-'))}}"></time></div>
            <div ng-switch-default class="etcd-ttl-none">&mdash;</div>
          </td>
          <td>
            <div class="etcd-actions">
              <div ng-switch on="!!key.dir">
                <img class="etcd-delete" src="images/delete.svg" ng-switch-when="false" ng-click="deleteKey(key.key)" />
                <div ng-switch-when="true"></div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
      </table>
    </div>

    <div class="etcd-preview">
      <textarea placeholder="Enter a key name above and the value here" ng-model="singleValue" tabindex="888" ng-change="showSave()"></textarea>
      <div class="etcd-empty">
        <div class="etcd-empty-message">{{preview_message}}</div>
      </div>
      <div class="etcd-dialog">
        <div class="etcd-dialog-message">Save and replicate this change?</div>
          <div class="etcd-dialog-buttons">
            <button class="etcd-button etcd-button-primary">Save Changes</button>
            <a href="javascript:void(0);">Cancel</a>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
