<div class="resource-view" resource="repository" error-message="'No repository found'"></div>
<div class="container repo repo-build" ng-show="accessDenied">
  You do not have permission to view this page
</div>
<div class="container repo repo-build" ng-show="repo">
  <div class="header row">
    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
    <h3>
      <span class="repo-circle no-background" repo="repo"></span>
      <span class="repo-breadcrumb" repo="repo" subsection-icon="'fa-tasks'" subsection="'Build History'"></span>
    </h3>

    <div class="repo-controls">
      <button class="btn btn-success" ng-click="showNewBuildDialog()">
        <i class="fa fa-plus"></i>
        New Dockerfile Build
      </button>
    </div>
  </div>

  <div class="row" ng-show="!builds">
    <div class="quay-spinner"></div>
  </div>

  <div class="row" ng-show="builds && !builds.length">
    There are no builds for this repository
  </div>
  
  <div class="row" ng-show="builds.length">
    <!-- Side tabs -->
    <div class="col-sm-2">
      <ul class="nav nav-pills nav-stacked">
        <li ng-class="currentBuild == build ? 'active' : ''" ng-repeat="build in builds">
          <a class="build-tab-link" href="javascript:void(0)" ng-click="setCurrentBuild(build.id, true)">
            <span class="phase-icon" ng-class="build.phase"></span>
            <span>{{ build.display_name }}</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Content -->
    <div class="col-sm-10">      
      <div class="tab-content" onresize="adjustLogHeight()">
        <div ng-repeat="build in builds" class="tab-pane build-pane" ng-class="currentBuild == build ? 'active' : ''">
          <div class="alert alert-info" ng-show="build.trigger">
            Triggered by: <span class="trigger-description" trigger="build.trigger" short="true" style="margin-left: 10px"></span>
          </div>

          <div class="build-header">
            <div class="timing">
              <i class="fa fa-clock-o"></i>
              Started: <span am-time-ago="build.started || 0"></span>
              <span style="display: inline-block; margin-left: 20px" ng-show="currentBuild.resource_key">
                <i class="fa fa-archive"></i>
                <a href="/repository/{{ repo.namespace }}/{{ repo.name }}/build/{{ currentBuild.id }}/buildpack"
                   style="display: inline-block; margin-left: 6px" bs-tooltip="tooltip.title"
                   data-title="View the uploaded build package for this build">Build Package</a>
              </span>
            </div>
            <span class="phase-icon" ng-class="build.phase"></span>
            <span class="build-message" phase="build.phase"></span>
            <div class="build-progress" build="build"></div>
          </div>

          <div class="build-logs">
            <div ng-show="!logEntries">
              <span class="quay-spinner"></span>
            </div>

            <div class="log-container" ng-class="container.type" ng-repeat="container in logEntries">
              <div class="container-header" ng-class="container.type == 'phase' ? container.message : ''"
                   ng-switch on="container.type" ng-click="container.logs.toggle()">
                <i class="fa chevron"
                   ng-class="container.logs.isVisible ? 'fa-chevron-down' : 'fa-chevron-right'" ng-show="hasLogs(container)"></i>
                <div ng-switch-when="phase">
                  <span class="container-content build-log-phase" phase="container"></span>
                </div>
                <div ng-switch-when="error">
                  <span class="container-content build-log-error" error="container" entries="logEntries"></span>
                </div>
                <div ng-switch-when="command">
                  <span class="container-content build-log-command" command="container"></span>
                </div>
              </div>
              
              <!-- Display the entries for the container -->
              <div class="container-logs" ng-show="container.logs.isVisible">
                <div class="log-entry" bindonce ng-repeat="entry in container.logs.visibleEntries">
                  <span class="id" bo-text="$index + container.index + 1"></span>
                  <span class="message" bo-html="processANSI(entry.message, container)"></span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 10px">
            <span class="quay-spinner" ng-show="pollChannel.working"></span>
            <button class="btn" ng-show="(build.phase == 'error' || build.phase == 'complete') && build.resource_key"
                    ng-class="build.phase == 'error' ? 'btn-success' : 'btn-default'"
                    ng-click="askRestartBuild(build)">
              <i class="fa fa-refresh"></i>
              Run Build Again
            </button>
            <span class="build-id">{{ build.id }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="dockerfile-build-dialog" show-now="buildDialogShowCounter" repository="repo"
       build-started="handleBuildStarted(build)">
  </div>

  <!-- Modal message dialog -->
  <div class="modal fade" id="confirmRestartBuildModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Run Dockerfile Build?</h4>
        </div>
        <div class="modal-body">
          Are you sure you want to run this Dockerfile build again? The results will be immediately pushed to the repository.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" ng-click="restartBuild(currentBuild)">Run Build</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>
