<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>

    <!-- Repository select -->
    <div class="dropdown-select" placeholder="'Select a repository'" selected-item="currentRepo"
         lookahead-items="repoLookahead">
      <!-- Icons -->
      <i class="dropdown-select-icon none-icon fa fa-github fa-lg"></i>
      <img class="dropdown-select-icon github-org-icon" ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">

      <!-- Dropdown menu -->
      <ul class="dropdown-select-menu" 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="github-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>
      </ul>      
    </div>
    
    <!-- Dockerfile folder select -->
    <div class="slideinout" ng-show="currentRepo">
      <div style="margin-top: 10px">Dockerfile Location:</div>
      <div class="dropdown-select" placeholder="'(Repository Root)'" selected-item="currentLocation"
           lookahead-items="locations" handle-input="handleLocationInput(input)" handle-item-selected="handleLocationSelected(datum)">
        <!-- Icons -->
        <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg" ng-show="isInvalidLocation"></i>
        <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;" ng-show="!isInvalidLocation"></i>
        <i class="dropdown-select-icon fa fa-folder fa-lg"></i>
        
        <!-- Dropdown menu -->
        <ul class="dropdown-select-menu" role="menu">
          <li ng-repeat="location in locations">
            <a href="javascript:void(0)" ng-click="setLocation(location)" ng-if="!location"><i class="fa fa-github fa-lg"></i> Repository Root</a>
            <a href="javascript:void(0)" ng-click="setLocation(location)" ng-if="location"><i class="fa fa-folder fa-lg"></i> {{ location }}</a>
          </li>
          <li class="dropdown-header" role="presentation" ng-show="!locations.length">No Dockerfiles found in repository</li>          
        </ul>
      </div>

      <div class="quay-spinner" ng-show="!locations && !locationError"></div>
      <div class="alert alert-warning" ng-show="locations && !locations.length">
        Warning: No Dockerfiles were found in {{ currentRepo.repo }}
      </div>
      <div class="alert alert-warning" ng-show="locationError">
        {{ locationError }}
      </div>
      <div class="alert alert-info" ng-show="locations.length && isInvalidLocation">
        Note: The folder does not currently exist or contain a Dockerfile
      </div>
    </div>

  </div>
</div>