kahuna/public/js/preview/image.html

<div class="preview image-actions-container">

    <div class="result__select__overlay"
         ng-class="{ 'alert': ctrl.showAlertOverlay(),
                     'warning': ctrl.showWarningOverlay(),
                     'lease_attached': ctrl.showActiveAllowLeaseOverlay() }"
         ng-if="ctrl.showOverlay()">
    </div>

    <ul class="image-actions">
        <li>
            <a class="image-action image-action--first"
               rel="noopener"
               target="_blank"
               title="Pop out"
               ng-href="/images/{{::ctrl.image.data.id}}"
               gr-stop-propagation="click"
               gr-track-click="Popout button">
                <gr-icon>open_in_new</gr-icon>
            </a>
        </li>

        <li ng-if="! ctrl.selectionMode">
            <a class="image-action"
               title="crop"
               ng-if="ctrl.states.isValid"
               ui-sref="crop({ imageId: ctrl.image.data.id })">
                <gr-icon>crop</gr-icon>
            </a>
        </li>
        <li ng-if="! ctrl.selectionMode">
            <ng-transclude></ng-transclude>
        </li>
    </ul>

    <a ng-if="! ctrl.selectionMode" class="preview__link"
       ui-sref="image({imageId: ctrl.image.data.id})"
       data-cy="image-preview-link"
       ui-drag-data="ctrl.image | asImageDragData"
       title="{{::ctrl.imageDescription}}"
       ng-class="{'is-potentially-graphic': ctrl.image.isPotentiallyGraphic}"
    >
       <div class="preview__fade"></div>
       <img class="preview__image"
            ng-class="{'preview__image--staff': ctrl.states.isStaffPhotographer}"
            alt="{{::ctrl.imageDescription}}"
            ng-src="{{::ctrl.image.data.thumbnail | assetFile}}"/>
    </a>

    <span ng-if="ctrl.selectionMode"
          class="preview__no-link"
          ng-class="{'is-potentially-graphic': ctrl.image.isPotentiallyGraphic}"
    >
        <div class="preview__fade"></div>
        <img class="preview__image"
             ng-class="{'preview__image--staff': ctrl.states.isStaffPhotographer}"
             alt="{{::ctrl.image.data.metadata.description}}"
             ng-src="{{::ctrl.image.data.thumbnail | assetFile}}"
             ui-drag-data="ctrl.image | asImageDragData"/>
    </span>

    <div class="result__select__overlay__text"
         ng-class="{ 'alert': ctrl.showAlertOverlay(),
                     'warning': ctrl.showWarningOverlay(),
                     'lease_attached': ctrl.showActiveAllowLeaseOverlay() }"
         ng-if="ctrl.showOverlay()"
         title="{{ctrl.image.data.metadata.description || ctrl.image.data.metadata.title}}
      By: {{ctrl.image.data.metadata.byline || '[none]'}}
Credit: {{ctrl.image.data.metadata.credit  || '[none]'}}">
        {{ctrl.getWarningMessage()}}
    </div>

    <div class="preview__info" ng-if="! ctrl.hideInfo && ! ctrl.showOverlay()">
        <div class="flex-container">
            <ul class="bottom-bar__meta-item preview__collections">
                <li class="preview__collections__collection"
                    ng-repeat="collection in ctrl.image.data.collections"
                    gr-tooltip="Click to open collection: {{::collection.data.path.join(' ▸ ')}}"
                    gr-tooltip-position="top">
                    <a ui-sref="search.results({query: (collection.data.pathId | queryCollectionFilter), nonFree: ctrl.srefNonfree()})"
                       ng-attr-style="{{::ctrl.getCollectionStyle(collection)}}"
                       ng-click="ctrl.searchWithModifiers($event, 'collection', collection.data.pathId)"
                       class="preview__collections__collection__value">
                        {{::collection.data.description}}
                    </a>
                </li>
            </ul>

            <ui-list-editor-compact class="preview__labeller"
                                 images="ctrl.imageAsArray"
                                 disabled="ctrl.selectionMode"
                                 ng-if="!ctrl.inputtingLabel"
                                 add-to-images="ctrl.addLabelToImages"
                                 remove-from-images="ctrl.removeLabelFromImages"
                                 accessor="ctrl.labelAccessor"
                                 query-filter="queryLabelFilter">
            </ui-list-editor-compact>
            <span class="flex-spacer"></span>
            <gr-add-label class="gr-add-label"
                          ng-if="!ctrl.selectionMode"
                          images="ctrl.imageAsArray"
                          gr-small="true"
                          active="ctrl.inputtingLabel"
                          ng-class="{'gr-add-label--inactive': !ctrl.inputtingLabel}">
            </gr-add-label>
        </div>

        <p class="preview__description"
           title="{{ctrl.image.data.metadata.description || ctrl.image.data.metadata.title}}
      By: {{ctrl.image.data.metadata.byline || '[none]'}}
Credit: {{ctrl.image.data.metadata.credit  || '[none]'}}">
            <!-- Ensure contents in P to maintain height -->
            {{ctrl.image.data.metadata.description || ctrl.image.data.metadata.title || '&nbsp;'}}
        </p>
    </div>

    <div class="preview__bottom-bar bottom-bar">
        <div class="bottom-bar__meta">
            <span class="preview__upload-time" title="Uploaded: {{::ctrl.image.data.uploadTime | date:'d MMM yyyy, HH:mm'}}
      Taken: {{::(ctrl.image.data.metadata.dateTaken | date:'d MMM yyyy, HH:mm') || '[none]'}}">
                Uploaded: {{::ctrl.image.data.uploadTime | date:'dd/MM/yy'}}
                {{::ctrl.image.data.uploadTime | date:'HH:mm'}}
            </span>
        </div>
    </div>
    <div class="preview__bottom-icons">
        <span class="bottom-bar__meta-item preview__has-crops"
              title="this image has crops"
              ng-if="ctrl.states.hasCrops">
                <gr-icon class="gr-icon--large">crop</gr-icon>
        </span>

        <span class="bottom-bar__meta-item preview__has-print-usages"
              title="This image has been used {{ctrl.recentUsages.count() > 0 ? 'RECENTLY': '' }} in Print Content"
              ng-if="ctrl.hasPrintUsages">
                <gr-icon class="gr-icon--large" ng-class="{'icon-warning': ctrl.recentUsages.count() > 0}">local_library</gr-icon>
        </span>

        <span class="bottom-bar__meta-item preview__has-web-usages"
              title="This image has been used {{ctrl.recentUsages.count() > 0 ? 'RECENTLY': '' }} in Digital Content"
              ng-if="ctrl.hasDigitalUsages">
                <gr-icon class="gr-icon--large" ng-class="{'icon-warning': ctrl.recentUsages.count() > 0}">phonelink</gr-icon>
        </span>



        <span ng-switch="ctrl.flagState">
            <div ng-switch-when="no_rights"
                 class="cost cost--no_rights bottom-bar__action bottom-bar__action--cost preview__cost preview__bottom-icons-align-right"
                 title="No current rights to use this image!">

                <!-- material icons doesn't have a £ icon -->
                <gr-icon>warning</gr-icon>
            </div>

            <div ng-switch-when="overquota"
                 class="cost bottom-bar__action bottom-bar__action--cost preview__cost preview__bottom-icons-align-right"
                 ng-class="{'cost--overquota': !ctrl.hasActiveAllowLease, 'cost--leased': ctrl.hasActiveAllowLease}"
                 title="{{ctrl.hasActiveAllowLease ? 'Leased, but: ' : ''}}Quota for images from this supplier has been exceeded!">

                <!-- material icons doesn't have a £ icon -->
                <gr-icon>trending_up</gr-icon>
            </div>

            <div ng-switch-when="pay"
                 class="cost bottom-bar__action bottom-bar__action--cost preview__cost preview__bottom-icons-align-right"
                 ng-class="{'cost--pay': !ctrl.hasActiveAllowLease, 'cost--leased': ctrl.hasActiveAllowLease}"
                 title="{{ctrl.hasActiveAllowLease ? 'Leased, but: ' : ''}}Pay to use">

                <!-- material icons doesn't have a £ icon -->
                <span>£</span>
            </div>

            <div ng-switch-when="conditional"
                 class="cost bottom-bar__action bottom-bar__action--cost preview__cost preview__bottom-icons-align-right"
                 ng-class="{'cost--conditional': !ctrl.hasActiveAllowLease, 'cost--leased': ctrl.hasActiveAllowLease}"
                 title="{{ctrl.hasActiveAllowLease ? 'Leased, but: ' : ''}}Restrictions: {{ctrl.restrictionsText()}}">
                 <!-- As `conditional` can only be set with usageRights, let's
                 just assume it's here. We might need to revisit this. -->
                <gr-icon>flag</gr-icon>
            </div>
        </span>

        <div class="bottom-bar__action preview__bottom-icons-align-right" ng-if="ctrl.states.syndicationStatus !== 'unsuitable'">
            <gr-syndication-icon image="ctrl.image"></gr-syndication-icon>
        </div>

        <gr-archiver-status class="bottom-bar__action preview__bottom-icons-align-right"
                            image="ctrl.image"
                            readonly="ctrl.selectionMode">
        </gr-archiver-status>

        <span class="bottom-bar__meta-item preview__has-syndication-usages preview__bottom-icons-align-right"
              title="This image exists in BBC Photo Sales"
              ng-if="(ctrl.hasSyndicationUsages || ctrl.uploadedByCapture) && ctrl.showSendToPhotoSales() && ctrl.showPaid">
              <gr-sent-to-photosales-icon class="gr-sent-to-photosales-icon"></gr-sent-to-photosales-icon>
        </span>
    </div>
</div>