<md-content ag-account-ip class="section ip auth" layout="column">

  <div class="header md-padding" layout-align="left center" layout="row">
    <h3 class="title">IP Whitelist</h3>
    <span flex></span>
    <md-button ng-click="ip.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:'ip.loading'})%>

    <div ng-if="!ip.list.length" class="no-keys" layout="column" layout-align="center center">
      <md-icon md-svg-src="<%-get_icon('material/public')%>"></md-icon>
      <p class="title">No IP Addresses whitelisted</p>
      <p class="message">You can allow access to this user on specific IP addresses.</p>
    </div>

    <div class="list" ng-if="ip.list.length">
      <div ng-repeat="item in ip.list" ng-click="ip.open(item)" class="role ag-margin md-button" layout="row">
          <span>
            {{item.title}}
          </span>
          <span>
            {{item.address}}
          </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>
