<div class="create-entity-dialog-element">
  <div class="modal fade co-dialog wider">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" ng-click="hide()" aria-hidden="true">&times;</button>
          <h4 class="modal-title" ng-show="view == 'enterName' || view == 'creating'">
            <i class="fa {{ entityIcon }}"></i>
            Create {{ entityTitle }}
          </h4>
          <h4 class="modal-title" ng-show="view == 'addperms' || view == 'addingperms'">
            Add permissions for <i class="fa {{ entityIcon }}"></i> {{ entity.name }}
          </h4>
        </div> <!-- /.model-header -->
        <div class="modal-body" ng-show="view == 'creating' || view == 'addingperms'">
          <div class="cor-loader"></div>
        </div>
        <div class="modal-body co-modal-body-scrollable" ng-show="view == 'addperms'">
          <span class="co-filter-box">
            <span class="filter-message" ng-if="options.filter">
              Showing {{ orderedRepositories.entries.length }} of {{ repositories.length }} repositories
            </span>
            <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Repositories...">
          </span>

          <label>
            Select repositories in
            <span class="avatar" size="16" data="namespace.avatar"></span>
            {{ info.namespace }}:
          </label>

          <table class="co-table" style="margin-bottom: 210px;">
            <thead>
              <td class="checkbox-col checkbox-menu-col">
                <span class="cor-checkable-menu" controller="checkedRepos">
                  <div class="cor-checkable-menu-item" item-filter="allRepositoriesFilter(item)">
                    <i class="fa fa-check-square-o"></i>All Repositories
                  </div>
                  <div class="cor-checkable-menu-item" item-filter="noRepositoriesFilter(item)">
                    <i class="fa fa-square-o"></i>No Repositories
                  </div>
                  <div class="cor-checkable-menu-item" item-filter="missingPermsRepositoriesFilter(item)">
                    <i class="fa fa-circle-o"></i>Missing Permissions
                  </div>
                </span>
              </td>
              <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
                <a ng-click="TableService.orderBy('name', options)">Repository Name</a>
              </td>
              <td>Permission</td>
              <td ng-class="TableService.tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)">
                <a ng-click="TableService.orderBy('last_modified_datetime', options)">Last Updated</a>
              </td>
             </thead>

             <tr class="co-checkable-row"
                 ng-repeat="repo in orderedRepositories.visibleEntries"
                 ng-class="checkedRepos.isChecked(repo, checkedRepos.checked) ? 'checked' : ''"
                 bindonce>
              <td class="offset-check-col">
                <span class="cor-checkable-item" controller="checkedRepos" item="repo"></span>
              </td>
              <td>
                <i class="fa fa-hdd-o"></i>
                <span bo-text="repo.name"></span>
              </td>
              <td>
                <span class="role-group small" current-role="repo.permission"
                      roles="repoRolesOrNone"
                      role-changed="setRole(role, repo)"></span>
              </td>
              <td>
                 <span ng-if="repo.last_modified">
                   {{ repo.last_modified * 1000 | amCalendar }}
                 </span>
                 <span class="empty" ng-if="!repo.last_modified">(Empty Repository)</span>
              </td>
            </tr>
          </table>

          <div class="empty" ng-if="!orderedRepositories.entries.length"
               style="margin-top: 20px;">
            <div class="empty-primary-msg">No matching repositories found.</div>
            <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
          </div>
        </div>
        <div class="modal-body" ng-show="view == 'enterName'">
          <form name="enterNameForm" ng-submit="createEntity()">
            <label>Provide a name for your new {{ entityTitle }}:</label>
            <input type="text" class="form-control" ng-model="entityName" ng-pattern="entityNameRegexObj" required>
            <div class="help-text">
              Choose a name to inform your teammates
              about this {{ entityTitle }}. Must match {{ entityNameRegex }}.
            </div>
          </form>
        </div> <!-- /.modal-body -->
        <div class="modal-footer" ng-show="view == 'addperms'">
          <button type="button" class="btn btn-primary" ng-click="addPermissions()"
                  ng-show="checkedRepos.checked.length">Add permissions</button>
          <button type="button" class="btn btn-default" ng-click="hide()">Close</button>
        </div> <!-- /.footer-body -->
        <div class="modal-footer" ng-show="view == 'enterName'">
          <button type="button" class="btn btn-primary" ng-click="createEntity()"
                  ng-disabled="enterNameForm.$invalid">Create {{ entityTitle }}</button>
          <button type="button" class="btn btn-default" ng-click="hide()">Cancel</button>
        </div> <!-- /.footer-body -->
      </div>
    </div>
  </div>
</div>