<div>
  <div class="add-to-project">
    <div class="container">
      <ol class="breadcrumb">
        <li><a href="{{projectName | projectOverviewURL}}">{{(project | displayName) || projectName}}</a></li>
        <li class="active"><strong>Add to Project</strong></li>
      </ol>
      <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="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 categoryTags" 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"
                       autofocus
                       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"></i> Builder Image
                  </dt>
                  <dd>Builds images from source code in a Git repository.</dd>
                  <dt>
                    <i class="fa fa-bolt"></i> Template
                  </dt>
                  <dd>Creates a predefined set of resources.</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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
