<div class="github-repository-item">

  <che-list-item flex>

    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">

      <div layout="row"
           layout-align="center center"
           class="che-checkbox-area github-repository-item-checkbox">
        <che-list-item-checked ng-model="checkedRepositories[gitHubRepository.clone_url]"
                               che-aria-label-checkbox="GitHub repository {{gitHubRepository.name}}"
                               ng-click="onRepositoryClick()"></che-list-item-checked>
      </div>

      <div flex="40" layout="row" layout-align="start center">
        <!-- Name -->
        <div class="che-list-item-name github-repository-item-name">{{gitHubRepository.name}}</div>

        <!-- Icons -->
        <div layout="row" layout-align="center center" class="github-repository-item-icons">
          <span ng-if="!gitHubRepository.fork" class="github-repository-item-icon fa fa-folder"></span>
          <span ng-if="gitHubRepository.fork" class="github-repository-item-icon fa fa-code-fork" uib-tooltip="forked"></span>
          <span ng-if="gitHubRepository.private" class="github-repository-item-icon fa fa-lock" uib-tooltip="private"></span>
        </div>

      </div>

      <!-- Url -->
      <div flex="60" layout="column" layout-align="center start">
        <div class="che-list-item-secondary github-repository-item-details">{{gitHubRepository.clone_url}}</div>
      </div>

    </div>

  </che-list-item>

</div>
