kwk/docker-registry-frontend

<ol class="breadcrumb">
    <li><a href="home">Home</a></li>
    <li><a href="repositories/">Repositories</a></li>
</ol>

<h1>Repositories</h1>

<div class="input-group repository-list-search">
    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
    <input type="search" placeholder="Filter repositories on this page" ng-model="searchTerm" class="form-control">
    <span class="input-group-addon">Repositories <span ng-bind-template="({{filteredRepositories.length}}/{{repositories.repos.length}})"></span></span>
</div>

<div ng-hide="appMode.browseOnly">
  <!-- Maybe put this into its own directive? -->
  <button type="button" ng-disabled="!selectedRepositories.length" ng-click="openConfirmRepoDeletionDialog()" class="btn btn-danger">
    <span class="glyphicon glyphicon-trash"></span>
    <ng-pluralize count="selectedRepositories.length"
                 when="{'0': 'Select repositores to delete', 'one': 'Delete one repository', 'other': 'Delete {} repositories'}">
    </ng-pluralize>
  </button>
</div>

<span ng-repeat-start="(username, repos) in (filteredRepositories=(repositories.repos | filter:searchTerm) | groupBy: 'username')"></span>

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
        <th colspan="2">
          <!--<span class="glyphicon glyphicon-user"></span>--> {{username}}
          <span class="badge pull-right">{{repos.length}}</span>
        </th>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos" ng-class="{warning: repo.selected}">
        <td>
          <checkbox name="selectedRepositories[]" value="{{repo.name}}" ng-model="repo.selected" ng-hide="appMode.browseOnly"></checkbox>
          <!--<input type="checkbox" name="selectedRepos[]" value="{{repo.name}}" ng-model="repo.selected" ng-hide="appMode.browseOnly">-->
        </td>
        <td class="grow">
          <a href="repository/{{repo.name}}"><!--<span class="glyphicon glyphicon-book"></span>--> {{repo.name|trim:username+'/'}}</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<span ng-repeat-end></span>

<nav>
  <ul class="pager">
    <li class="previous" ng-class="{disabled: !lastNamespace || !lastRepository}">
      <a href="repositories/{{reposPerPage}}">
        <span aria-hidden="true">&larr;</span>
        First page
      </a>
    </li>
    <li>
      <div class="btn-group" role="group">
        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          <span class="glyphicon glyphicon-book" aria-hidden="true"> </span> / page:
          <span ng-show="reposPerPage">{{reposPerPage}}</span>
          <span ng-show="!reposPerPage">all</span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="repositories">Show all</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="repositories/10">10</a></li>
          <li><a href="repositories/20">20</a></li>
          <li><a href="repositories/40">40</a></li>
          <li><a href="repositories/60">60</a></li>
          <li><a href="repositories/80">80</a></li>
          <li><a href="repositories/100">100</a></li>
        </ul>
      </div>
    </li>
    <li class="next" ng-class="{disabled: !repositories.lastNamespace || !repositories.lastRepository}">
      <!-- TODO: Make sure the button is not clickable -->
      <a href="/repositories/{{reposPerPage}}/{{repositories.lastNamespace}}/{{repositories.lastRepository}}"
        ng-disabled="!repositories.lastNamespace || !repositories.lastRepository">
        Next <span aria-hidden="true">&rarr;</span>
      </a>
    </li>
  </ul>
</nav>