<div class="trigger-setup-github-element">
  <div ng-show="loading">
    <span class="quay-spinner" style="vertical-align: middle; margin-right: 10px"></span>
    Loading Repository List
  </div>
  <div ng-show="!loading">
    <div style="margin-bottom: 18px">Please choose the GitHub repository that will trigger the build:</div>
    
    <div class="dropdown-select">
      <div class="current-item">
        <i ng-show="!currentRepo" class="fa fa-github fa-lg dropdown-icon none-icon"></i>
        <img ng-show="currentRepo" class="dropdown-icon github-org-icon" ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
        <input type="text" class="lookahead-input form-control" placeholder="Select a Repository"></input>
      </div>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li ng-repeat-start="org in orgs" role="presentation" class="dropdown-header github-org-header">
            <img ng-src="{{ org.info.avatar_url }}" class="github-org-icon">{{ org.info.name }}
          </li>
          <li ng-repeat="repo in org.repos" class="gtihub-repo-listing">
            <a href="javascript:void(0)" ng-click="selectRepo(repo, org)"><i class="fa fa-github fa-lg"></i> {{ repo }}</a>
          </li>
          <li role="presentation" class="divider" ng-repeat-end ng-show="$index < orgs.length - 1"></li>
      </div>
    </div>
  </div>
</div>