<div class="blank-slate-pf" ng-show="!filter.namespaces().length">
    <div class="blank-slate-pf-icon">
        <i class="pficon pficon-add-circle-o"></i>
    </div>
    <h1 translate>Welcome to the Image Registry</h1>
    <p translate>In order to begin pushing images to the registry, you need to create a project.</p>
    <div class="blank-slate-pf-main-action">
        <a ng-click="createProject(settings.currentUser)" class="card-pf-link-with-icon">
            <i class="pficon pficon-add-circle-o"></i><span translate>New project</span>
        </a>
    </div>
</div>

<div class="container-cards-pf dashboard-cards" ng-show="filter.namespaces().length">
    <div class="card-pf dashboard-images">
        <div class="card-pf-heading">
            <h2 class="pull-left card-pf-title hidden-sm hidden-xs"
                translate>Images by project</h2>
            <h2 class="pull-left card-pf-title hidden-md hidden-lg"
                translate>Images</h2>
            <h2 class="pull-right card-pf-link-with-icon new-project-link">
              <a ng-click="createProject(settings.currentUser)">
                <i class="pficon pficon-add-circle-o"></i>
              </a>
            </h2>
        </div>
        <div class="card-pf-body">
            <table class="table table-striped table-hover">
                <tr ng-repeat="(key, project) in projects() track by key" data-name="{{ project.metadata.name }}">
                    <td>
                        <i ng-if="sharedImages(project) == 'anonymous'" title="Images accessible to anonymous users"
                          class="fa fa-unlock registry-imagestream-lock dashboard-access"></i>
                        <i ng-if="sharedImages(project) == 'shared'" title="Images accessible to authenticated users"
                            class="fa fa-unlock-alt registry-imagestream-lock dashboard-access"></i>
                        <i ng-if="sharedImages(project) == 'private'" title="Images only accessible to members"
                            class="fa fa-lock registry-imagestream-lock dashboard-access"></i>
                        <i ng-if="sharedImages(project) == null" title="Accessibility data not yet loaded"
                            class="fa fa-ellipsis-h registry-imagestream-lock dashboard-access"></i>
                        <a ng-href="#/images/{{ project.metadata.name }}">
                            {{ project.metadata.name }}
                        </a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="card-pf-footer">
            <a ng-click="createProject(settings.currentUser)" class="card-pf-link-with-icon new-project-link">
                <i class="pficon pficon-add-circle-o"></i><span translate>New project</span>
            </a>
        </div>
    </div>
    <div class="card-pf card-pf-wide dashboard-images">
        <div class="card-pf-heading">
            <h2 class="card-pf-title pull-left" translate>Images pushed recently</h2>
            <filter-project class="pull-right">
            </filter-project>
        </div>
        <div class="card-pf-body" ng-if="recentlyUpdated().length">
            <div ng-repeat="data in recentlyUpdated()">
                <dd title="{{ data.tags[0].items[0].created }}">
                    {{ data.tags[0].items[0].created | dateRelative }}</dd>
                <dt><a ng-href="#/images/{{data.stream.metadata.namespace}}/{{data.stream.metadata.name}}">
                    {{ data.stream.metadata.namespace}}/{{data.stream.metadata.name }}</a></dt>
                <!-- TODO: Display ... when too many tags listed -->
                <ul class="image-tag-list">
                    <li ng-repeat="tag in data.tags track by tag.tag">
                        <a ng-href="#/images/{{data.stream.metadata.namespace}}/{{data.stream.metadata.name}}:{{tag.tag}}"
                            class="image-tag" >:{{ tag.tag }}</a>
                    </li>
                    <li ng-if="data.truncated" class="image-tag-truncated">
                    </li>
                </ul>
            </div>
            <a href="#/images" class="all-images" translate>All images</a>
        </div>
        <div class="card-pf-body blank-slate-pf" ng-if="!recentlyUpdated().length">
            <div class="blank-slate-pf-icon">
                <i class="pficon pficon-add-circle-o"></i>
            </div>
            <h1 translate>No images pushed</h1>
            <p translate>In order to begin pushing images to the registry, use the commands below.</p>
        </div>
        <div class="card-pf-footer">
            <a class="card-pf-link-with-icon" ng-click="createImageStream()">
                <span translate class="pficon pficon-add-circle-o"></span>
                <span translate>New image stream</span>
            </a>
        </div>
    </div>
</div>
<div class="container-cards-pf dashboard-cards">
    <div class="card-pf dashboard-commands">
        <div class="card-pf-heading">
            <h2 class="card-pf-title">
                <i class="fa fa-keyboard-o"></i>
                <span translate>Login commands</span>
            </h2>
        </div>
        <div class="card-pf-body">
            <p>
                <span translate>Log into the registry:</span>
                <a ng-if="settings.registry.password"
                    tabindex="0" role="button" popover-trigger="focus"
                    popover="The docker login password token
                    shown here is usually time limited. Come back
                    to get another one when necessary.">
                    <span class="fa fa-lg fa-info-circle"></span>
                </a>
            </p>
            <div class="alert alert-warning" ng-if="!settings.registry.password">
                <span class="pficon pficon-warning-triangle-o"></span>
                <span translate>Your login credentials do not give you access to use the docker registry from the command line.</span>
            </div>
<code ng-if="settings.registry.password">$ sudo docker login -p {{settings.registry.password}} -e unused -u unused <span ng-class="{ placeholder: !settings.registry.host_explicit }">{{settings.registry.host}}</span></code>
            <p ng-if="settings.registry.openshifthost_explicit">
                <span translate>Log into OpenShift command line tools:</span>
                <a ng-if="settings.registry.password"
                    tabindex="0" role="button" popover-trigger="focus"
                    popover="The registry backend is managed
                    by an OpenShift server. The oc command line
                    tool provides advanced administrative control
                    of the registry.">
                    <span class="fa fa-lg fa-info-circle"></span>
                </a>
            </p>
<code ng-if="settings.registry.openshifthost_explicit">$ oc login --token {{settings.registry.password}} {{settings.registry.openshifthost}}</code>
        </div>
    </div>
</div>
<div class="container-cards-pf dashboard-cards">
    <div class="card-pf dashboard-commands">
        <div class="card-pf-heading">
            <h2 class="card-pf-title">
                <i class="fa fa-keyboard-o"></i>
                <span translate>Image commands</span>
            </h2>
        </div>
        <div class="card-pf-body">
            <div id="docker-push-commands" ng-show="showDockerPushCommands">
                <p>
                    <span translate>Push an image:</span>
                    <a tabindex="0" role="button" popover-trigger="focus"
                        popover="You must login with docker
                        to push an image.">
                        <span class="fa fa-lg fa-info-circle"></span>
                    </a>
                </p>
<code>$ sudo docker tag <em>myimage</em> <span ng-class="{ placeholder: !settings.registry.host_explicit }">{{settings.registry.host}}</span>/<em>project</em>/<em>name:tag</em>
$ sudo docker push <span ng-class="{ placeholder: !settings.registry.host_explicit }">{{settings.registry.host}}</span>/<em>project</em>/<em>name</em></code>
            </div>
            <p id="docker-pull-commands">
                <span translate>Pull an image:</span>
                <a tabindex="0" role="button" popover-trigger="focus"
                    popover="Depending on project access settings
                    you may need to login with docker to pull an image.">
                    <span class="fa fa-lg fa-info-circle"></span>
                </a>
            </p>
<code ng-if="settings.registry.host">$ sudo docker pull <span ng-class="{ placeholder: !settings.registry.host_explicit }">{{settings.registry.host}}</span>/<em>project</em>/<em>name:tag</em></code>
        </div>
    </div>
</div>
