<div class="repo-list-grid-element">
  <div class="new-repo-listing">

    <!-- Titles -->
    <div ng-if="!hideTitle">
      <div ng-if="starred" class="repo-list-title">
        <i class="fa fa-star starred"></i>
        Starred
      </div>
      <div ng-if="!starred" class="repo-list-title">
        <span class="avatar" size="24" data="namespace.avatar"></span>
        <a ng-if="!isOrganization(namespace.name)"
           href="/user/{{ namespace.name }}">{{ namespace.name }}</a>
        <a ng-if="isOrganization(namespace.name)"
           href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
      </div>
    </div>

    <!-- Repositories -->
    <div class="resource-view" resource="repositoriesResource">
      <div ng-if="repositoriesResource.value.length > 0">
        <div class="row">
          <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"
               ng-repeat="repository in repositoriesResource.value">
            <div class="panel panel-default">
              <div class="panel-body" ng-class="repository.is_starred ? 'starred' : ''">
                <div class="row">
                  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 repo-panel-title-row">
                    <span class="repo-icon repo-circle no-background" repo="repository"></span>
                    <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
                       data-repo="{{repository.namespace}}/{{ repository.name }}">
                       {{ repository.namespace }}/{{ repository.name }}
                    </a>
                  </div>
                  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <span class="repo-star" repository="repository"
                          star-toggled="starToggled({'repository': repository})"></span>
                  </div>
                </div>
                <div class="description markdown-view" content="repository.description" first-line-only="true" placeholder-needed="true"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Empty Messages -->
      <div ng-if="starred && repositoriesResource.value.length == 0">
        <div class="empty-primary-msg">You haven't starred any repositories yet.</div>
        <div class="empty-secondary-msg">Stars allow you to easily access your favorite repositories.</div>
      </div>
      <div ng-if="!starred && repositoriesResource.value.length == 0">
        <div class="empty-primary-msg">This namespace doesn't 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?namespace={{ namespace.name }}">creating a new repository</a>.</div>
      </div>
    </div>

  </div>
</div>
