<div class="repo-list-table-element">
  <div class="cor-loader" ng-if="isLoading"></div>
  <div ng-if="orderedRepositories.length == 0 && !isLoading">
    <div class="empty-primary-msg">You do not have any viewable repositories.</div>
    <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
  </div>

  <table class="co-table" ng-if="orderedRepositories.length && !isLoading">
   <thead>
    <td class="hidden-xs"
        ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">
      <a href="javascript:void(0)" ng-click="orderBy('full_name')">Repository Name</a>
    </td>
    <td class="hidden-xs"
        ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
        style="min-width: 120px;">
      <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
    </td>
    <td class="hidden-xs"
        ng-class="tablePredicateClass('popularity', options.predicate, options.reverse)"
        style="min-width: 20px;">
      <a href="javascript:void(0)" ng-click="orderBy('popularity')">Activity</a>
    </td>
    <td class="hidden-xs"
        ng-class="tablePredicateClass('is_starred', options.predicate, options.reverse)"
        style="width: 70px">
      <a href="javascript:void(0)" ng-click="orderBy('is_starred')">Star</a>
    </td>
   </thead>

   <tbody>
     <tr ng-repeat="repository in orderedRepositories">
       <td class="repo-name-icon">
          <span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span>
          <a href="/repository/{{ repository.namespace }}/{{ repository.name }}">
            <span class="namespace">{{ repository.namespace }}</span>
            <span class="name">{{ repository.name }}</span>
          </a>
        </td>
       <td class="last-modified">
         <span ng-if="repository.last_modified">
           {{ repository.last_modified * 1000 | amCalendar }}
         </span>
         <span class="empty" ng-if="!repository.last_modified">(Empty Repository)</span>
       </td>
       <td class="popularity hidden-xs">
         <span class="strength-indicator" value="repository.popularity" maximum="maxPopularity"
               log-base="10"></span>
       </td>
       <td>
        <span class="repo-star" repository="repository"
              star-toggled="starToggled({'repository': repository})"></span></td>
     </tr>
   </tbody>
  </table>
</div>