<md-content class="auth section ssh" layout="column">

  <div class="header md-padding" layout-align="left center" layout="row">
    <h3 class="title">SSH Keys</h3>
    <span flex></span>
    <md-button ng-click="ssh.add()" class="md-icon-button" aria-label="Add">
      <md-icon md-svg-icon="<%-get_icon('material/add')%>"></md-icon>
    </md-button>
  </div>

  <md-divider></md-divider>

  <div class="content">

    <%-template('ui/loader',{prop:'ssh.loading'})%>

    <div ng-if="!ssh.keys.length" class="no-keys" layout="column" layout-align="center center">
      <md-icon md-svg-src="<%-get_icon('material/vpn-key')%>"></md-icon>
      <p class="title">No SSH keys</p>
      <p class="message">With the SSH protocol, you can authenticate to your API without supplying your password at each visit.</p>
    </div>

    <div class="list" ng-if="ssh.keys.length">
      <div ng-repeat="item in ssh.keys" ng-click="ssh.open(item)" class="role md-button ag-margin" layout="row">
          <span>
            {{item.title}}
          </span>
          <span flex></span>
          <span><b>Created:</b> {{item.createdAt | amUtc | amLocal | amDateFormat:'DD MMMM YYYY HH:mm:ss'}}</span>
      </div>
    </div>

  </div>

</md-content>
