<div class="resource-view" resource="repository_build" error-message="'No matching repository build 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 repo-build-pack" ng-show="repobuild">
  <div class="header row">
    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/build' }}" 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="repobuild.display_name"></span>
    </h3>
  </div>

  <div class="row" ng-show="downloading">
    Downloading build pack:
    <div class="progress" class="active progress-striped">
      <div class="progress-bar" role="progressbar" aria-valuenow="{{ downloadProgress }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + downloadProgress + '%' }}">
      </div>
    </div>
  </div>

  <div class="row" ng-show="downloadError">
    Error: Could not download the build pack
  </div>


  <div class="row" ng-show="!downloading && !downloadError && !loaded">
    Reading... <span class="quay-spinner"></span>
  </div>

  <div class="row" ng-show="loaded">
    <ul class="nav nav-tabs">
      <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#dockerfile">Dockerfile</a></li>
      <li><a href="javascript:void(0)" data-toggle="tab" data-target="#tree" ng-click="initializeTree()" ng-show="tree">All Files</a></li>
    </ul>

    <div class="tab-content">
      <!-- Dockerfile view -->
      <div class="tab-pane active" id="dockerfile">
        <div class="dockerfile-path" ng-if="dockerFileContents">{{ dockerFilePath }}</div>
        <div class="dockerfile-view" contents="dockerFileContents" ng-if="dockerFileContents"></div>
        <div ng-if="!dockerFileContents" style="padding: 10px; margin-top: 20px;">
          No Dockerfile found in the build pack
        </div>
      </div>

      <!-- File tree -->
      <div class="tab-pane" id="tree">
        <div id="file-tree-container" class="tree-container" onresize="tree && drawn && tree.notifyResized()"></div>
      </div>
    </div>
  </div>
</div>
