<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="add-to-project middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <div class="row">
              <div class="col-md-12">
                <p ng-if="emptyCatalog && !loaded">Loading...</p>

                <div ng-if="emptyCatalog && loaded && !nonBuilderImages.length" class="empty-state-message empty-state-full-page">
                  <h2 class="text-center">No images or templates.</h2>

                  <p class="gutter-top">
                    No images or templates are loaded for this project or the shared
                    <code>openshift</code> namespace. An image or template is
                    required to add content.
                  </p>

                  <p>
                    To load an image stream or template from a file, run the command
                    <div><code>oc create -f &lt;filename&gt; -n {{projectName}}</code></div>
                  </p>

                  <p><a href="{{projectName | projectOverviewURL}}">Back to overview</a></p>
                </div>

                <!-- Show an abbreviated message if only non-builders exist in the project.
                     We show a link to view the non-builder images below. -->
                <p ng-if="emptyCatalog && loaded && nonBuilderImages.length">No builder images or templates.</p>

                <div ng-show="!emptyCatalog">
                  <h1>Select Image or Template</h1>

                  <div class="row">
                    <!-- Right padding to line up cleanly with the left column tiles. -->
                    <div class="col-sm-6 catalog-header-left">
                      Choose from web frameworks, databases, and other components to
                      add content to your project.

                      <div class="filter-group">
                        <!-- Add a hidden label for screen readers. -->
                        <label for="search" class="sr-only">Filter by keyword</label>
                        <!-- Pull the filter right so the input and dropdown button
                             can use 100% width on the same line. -->
                        <div uib-dropdown uib-keyboard-nav class="btn-group pull-right">
                          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="menu">
                            Browse
                            <span class="caret" aria-hidden="true"></span>
                          </button>
                          <ul class="uib-dropdown-menu">
                            <li ng-repeat="tag in browseGeneral" role="menuitem">
                              <a href="" ng-click="filter.tag = tag">{{tag}}</a>
                            </li>
                            <li class="divider"></li>
                            <li ng-repeat="tag in browseTechnologies" ng-if="tag" role="menuitem">
                              <a href="" ng-click="filter.tag = tag">{{tag}}</a>
                            </li>
                          </ul>
                        </div>

                        <!-- Use the remaining space for the input. -->
                        <div style="overflow: hidden; padding-right: 10px;">
                          <input
                             ng-model="filter.keyword"
                             type="search"
                             id="search"
                             placeholder="Filter by keyword"
                             class="search-input form-control"
                             autocorrect="off"
                             autocapitalize="off"
                             spellcheck="false"
                             style="width: 100%;">
                         </div>

                        <div ng-if="filter.tag">
                          Tagged with {{filter.tag}}.
                          <a href="" ng-click="filter.tag = ''">See all tags</a>
                        </div>
                      </div>
                    </div>

                    <!-- Legend -->
                    <div class="col-sm-6 catalog-legend">
                      <dl aria-hidden="true" class="text-muted">
                        <dt>
                          <i class="pficon pficon-image fa-fw"></i> Builder Image
                        </dt>
                        <dd>Builds images from source code in a Git repository.</dd>
                        <dt>
                          <i class="fa fa-clone fa-fw"></i> Template
                        </dt>
                        <dd>Creates a predefined set of resources.</dd>
                        <dt>
                          <i class="fa fa-bolt fa-fw"></i> Quickstart
                        </dt>
                        <dd>Provides a skeleton for developing an application.</dd>
                      </dl>
                    </div>
                  </div>

                  <div ng-if="filteredCategoryTags.length === 0 && !emptyCatalog && loaded" style="margin-top: 5px;">
                    All builder images and templates are hidden by the current filter.
                    <a href="" ng-click="filter.keyword = ''; filter.tag = ''">Clear filter</a>
                  </div>

                  <div row md="column" class="gutter-top">
                    <!-- left column -->
                    <div column flex class="catalog-col catalog-col-1">
                      <div ng-repeat="category in leftCategories">
                        <catalog-category
                          category-label="{{categoryLabels[category] || tag}}"
                          builders="filteredBuildersByCategory[category]"
                          templates="filteredTemplatesByCategory[category]"
                          project="{{projectName}}"
                          item-limit="{{itemLimit}}"
                          filter-tag="filterTag">
                        </catalog-category>
                      </div>
                    </div>
                    <!-- right column -->
                    <div column flex class="catalog-col catalog-col-2">
                      <div ng-repeat="category in rightCategories">
                        <catalog-category
                          category-label="{{categoryLabels[category] || tag}}"
                          builders="filteredBuildersByCategory[category]"
                          templates="filteredTemplatesByCategory[category]"
                          project="{{projectName}}"
                          item-limit="{{itemLimit}}"
                          filter-tag="filterTag">
                        </catalog-category>
                      </div>
                    </div>
                  </div>

                  <!-- Don't show images without the builder tag by default, by allow the user to pick one. -->
                  <div ng-if="filteredNonBuilders.length" click-to-reveal link-text="Don't see the image you are looking for?" class="gutter-bottom">
                    <h2>Additional Images</h2>
                    <div class="gutter-bottom">
                      <span class="pficon pficon-warning-triangle-o"></span>
                      Some images in this list may not be able to build source. Use with caution.
                    </div>
                    <div class="catalog catalog-fluid">
                      <catalog-image
                          image-stream="image.imageStream"
                          image-tag="image.imageStreamTag"
                          project="{{projectName}}"
                          version="image.version"
                          ng-repeat="image in filteredNonBuilders | orderBy : ['name', 'imageStream.metadata.namespace']">
                      </catalog-image>

                      <!-- Add an empty item to keep the last tile from stretching to 100% width. -->
                      <div style="height: 0;" class="tile-image"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
