kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html

<div class="image-info">
    <div class="image-info__group" role="region" aria-label="Metadata templates" ng-if="ctrl.displayMetadataTemplates && ctrl.userCanEdit && ctrl.singleImage">
        <div class="image-info__heading image-info__heading--lease">
            <span>Fill in from template:</span>
        </div>
        <gr-metadata-templates
            image="ctrl.singleImage"
            metadata="ctrl.singleImage.data.metadata"
            usage-rights="ctrl.singleImage.data.usageRights"
            gr-on-metadata-template-selected="ctrl.onMetadataTemplateSelected(metadata, usageRights, collection, leasesWithConfig)"
            gr-on-metadata-template-applying="ctrl.onMetadataTemplateApplying(leases)"
            gr-on-metadata-template-applied="ctrl.onMetadataTemplateApplied()"
            gr-on-metadata-template-cancelled="ctrl.onMetadataTemplateCancelled(metadata, usageRights)"
            class="metadata-templates-flex">
        </gr-metadata-templates>
    </div>
    <div class="image-info__group" role="region" aria-label="Rights and restrictions">
        <dl class="image-info__wrap metadata-line image-info__usage-rights">
        <dt class="metadata-line__key">Rights & restrictions</dt>

            <gr-usage-rights-editor
                ng-if="ctrl.showUsageRights"
                gr-usage-rights="ctrl.usageRights"
                gr-on-save="ctrl.showUsageRights = false"
                gr-on-cancel="ctrl.showUsageRights = false"
                gr-usage-rights-updated-by-template="ctrl.usageRightsUpdatedByTemplate">
            </gr-usage-rights-editor>

            <div class="image-info__title" ng-if="!ctrl.showUsageRights">
                <dd ng-if="!ctrl.usageRightsSummary">
                    {{ctrl.usageCategory || 'None'}}
                </dd>
                <dd ng-if="ctrl.usageRightsSummary">
                    <usage-rights-summary
                        class="usage-rights-summary"
                        props="{'images':ctrl.selectedImages, 'categoryCallback':ctrl.callbackUsageCategory}">
                    </usage-rights-summary>
                </dd>
            </div>

            <button
                data-cy="it-edit-usage-rights-button"
                ng-click="ctrl.showUsageRights = true"
                ng-hide="!ctrl.userCanEdit || ctrl.showUsageRights"
                class="image-info__edit">✎</button>
        </dl>
    </div>

    <div class="image-info__group" role="region" aria-label="Image type"
         ng-if="ctrl.validImageTypes.length > 0"
    >
        <dl class="image-info__wrap metadata-line image-info__image-type">
            <dt class="metadata-line__key">Image type</dt>

            <span ng-if="ctrl.metadataUpdatedByTemplate.includes('imageType')">
                <div class="metadata-line__info">
                    <dd class="image-info__image-type-preview">{{ctrl.metadata.imageType}}</dd>
                </div>
            </span>

            <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('imageType')">
                <button
                    data-cy="it-edit-image-type-button"
                    class="image-info__edit"
                    ng-click="imageTypeEditForm.$show()"
                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                    ng-hide="imageTypeEditForm.$visible">✎</button>

                <span class="image-info__image-type"
                    editable-select="ctrl.metadata.imageType"
                    e-placeholder="-- choose type --"
                    e-ng-options="option for option in ctrl.validImageTypes"
                    ng-hide="imageTypeEditForm.$visible"
                    onbeforesave="ctrl.updateMetadataField('imageType', $data)"
                    e:ng-class="{'image-info__editor--error': $error,
                                   'image-info__editor--saving': imageTypeEditForm.$waiting,
                                   'text-input': true}"
                    e:form="imageTypeEditForm">

                    <span ng-if="ctrl.userCanEdit">
                        <dd ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.imageType)"
                            class="image-info__image-type image-info--multiple"
                        >
                            Multiple image types (click ✎ to edit <strong>all</strong>)
                        </dd>
                        <dd ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.imageType)"
                            class="image-info__image-type"
                            ng-class="{'editable-empty': !ctrl.metadata.imageType}"
                        >
                            {{ctrl.metadata.imageType || "Unknown (click ✎ to add)"}}
                        </dd>
                    </span>

                    <span ng-if="!ctrl.userCanEdit">
                        <dd ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.imageType)"
                            class="image-info__image-type image-info--multiple"
                        >
                            Multiple image types
                        </dd>
                        <dd ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.imageType)"
                            class="image-info__image-type"
                            ng-class="{'editable-empty': !ctrl.metadata.imageType}"
                        >
                            {{ctrl.metadata.imageType || "Unknown"}}
                        </dd>
                    </span>
                </span>
            </span>

        </dl>
    </div>

    <div class="image-info__group" ng-if="ctrl.displayLeases()" role="region" aria-label="Leases">
        <dl class="image-info__wrap image-info__leases">
            <div class="image-info__heading image-info__heading--lease"
                 ng-class="{'image-info__heading--lease-preview': ctrl.leasesUpdatedByTemplate}">
                <span>Leases</span>
            </div>
            <gr-leases
                gr-images="ctrl.selectedImages"
                gr-leases-updated-by-template="ctrl.leasesUpdatedByTemplate"
                gr-leases-updating-by-template="ctrl.leasesUpdatingByTemplate"
                gr-updated-leases="ctrl.updatedLeases"
                gr-on-save="ctrl.showLeases = false"
                gr-user-can-edit="ctrl.userCanEdit"
                gr-on-cancel="ctrl.showLeases = false">
            </gr-leases>
        </dl>
    </div>

    <div class="image-info__group" role="region" aria-label="Title">
        <dl>
            <div class="image-info__wrap">

                <dt class="metadata-line metadata-line__key">Title</dt>
                <span ng-if="ctrl.metadataUpdatedByTemplate.includes('title')">
                    <div class="metadata-line__info">
                        <dd class="image-info__title-preview">{{ctrl.metadata.title}}</dd>
                    </div>
                </span>
                <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('title')">
                    <button class="image-info__edit"
                            ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                            ng-click="titleEditForm.$show()"
                            ng-hide="titleEditForm.$visible">✎</button>
                    <div class="metadata-line__info" ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.title)}"
                         editable-text="ctrl.metadata.title"
                         ng-hide="titleEditForm.$visible"
                         onbeforesave="ctrl.updateMetadataField('title', $data)"
                         e:form="titleEditForm"
                         e:ng-class="{'image-info__editor--error': $error,
                                  'image-info__editor--saving': titleEditForm.$waiting,
                                  'text-input': true}">

                        <div ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.title) && ctrl.userCanEdit">
                            <dd class="image-info__title">
                                Multiple titles (click ✎ to edit <strong>all</strong>)
                            </dd>
                        </div>

                        <div ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.title) && !ctrl.userCanEdit">
                            <dd class="image-info__title">
                                Multiple titles
                            </dd>
                        </div>

                        <div ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.title) && !ctrl.metadata.title" class="editable-empty">
                            <dd ng-if="ctrl.userCanEdit">
                                Unknown (click ✎ to add)
                            </dd>
                            <dd ng-if="!ctrl.userCanEdit">
                            Unknown
                            </dd>
                        </div>

                        <div ng-if="ctrl.userCanEdit">
                            <dd class="image-info__title"
                                ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.title)">
                                <a ui-sref="search.results({query: (ctrl.metadata.title | queryFilter:'title'), nonFree: ctrl.srefNonfree()})"
                                   ng-click="ctrl.searchWithModifiers($event, 'title', ctrl.metadata.title)"
                                   aria-label="Search images by {{ctrl.metadata.title}} title">{{ctrl.metadata.title}}</a>
                            </dd>
                        </div>

                        <div ng-if="!ctrl.userCanEdit">
                            <dd class="image-info__title"
                                ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.title)">
                                <a ui-sref="search.results({query: (ctrl.metadata.title | queryFilter:'title'), nonFree: ctrl.srefNonfree()})"
                                   ng-click="ctrl.searchWithModifiers($event, 'title', ctrl.metadata.title)"
                                   aria-label="Search images by {{ctrl.metadata.title}} title">{{ctrl.metadata.title}}</a>
                            </dd>
                        </div>
                    </div>
                </span>
            </div>
            <div data-cy="metadata-description" class="image-info__wrap">

                <dt class="metadata-line metadata-line__key">Description</dt>
                <span ng-if="ctrl.metadataUpdatedByTemplate.includes('description')">
                    <div class="metadata-line__info">
                        <dd class="image-info__description-preview">{{ctrl.metadata.description}}</dd>
                    </div>
                </span>
                <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('description')">
                    <button data-cy="it-edit-description-button"
                            class="image-info__edit"
                            ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                            ng-click="descriptionEditForm.$show(); ctrl.checkDescriptionLength();"
                            ng-hide="descriptionEditForm.$visible">✎</button>
                    <form editable-form name="descriptionEditForm" onaftersave="ctrl.updateDescriptionField('description', $data)">
                        <div ng-hide="descriptionEditForm.$visible" ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.description)}">
                            <div ng-if="ctrl.userCanEdit">
                                <dd class="image-info__description"
                                    ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.description)"
                                    >Multiple descriptions (click ✎ to edit <strong>all</strong>)
                                </dd>

                                <dd class="image-info__description"
                                    ng-class="{'editable-empty': !ctrl.metadata.description}"
                                    ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.description)"
                                    >{{ctrl.metadata.description || "Unknown (click ✎ to add)"}}
                                </dd>
                            </div>

                            <div ng-if="!ctrl.userCanEdit">
                                <dd class="image-info__description"
                                    ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.description)"
                                >Multiple descriptions
                                </dd>

                                <dd class="image-info__description"
                                    ng-class="{'editable-empty': !ctrl.metadata.description}"
                                    ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.description)"
                                >{{ctrl.metadata.description || "Unknown"}}
                                </dd>
                            </div>
                        </div>
                        <div
                            class="metadata-line__info"
                             editable-textarea="ctrl.metadata.description"
                             ng-hide="descriptionEditForm.$visible"
                             e:msd-elastic
                             e:ng-class="{'image-info__editor--error': $error,
                                          'image-info__editor--saving': descriptionEditForm.$waiting,
                                          'text-input': true}"
                          >
                          </div>
                          <div
                            ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.description) && ctrl.userCanEdit && descriptionEditForm.$visible"
                            class="image-info__description--options"
                          >
                            <gr-radio-list gr-for="description" gr-options="ctrl.descriptionOptions" gr-selected-option="ctrl.descriptionOption"></gr-radio-list>
                        </div>
                        <!--
                          These buttons are a copy of the buttons we use in the inline
                          input elements but with a different form name which is why they
                          are duplicated here
                        -->
                        <div ng-if="ctrl.userCanEdit && descriptionEditForm.$visible" class="editable-buttons">
                            <button class="button-cancel" type="button" ng-click="descriptionEditForm.$cancel()">
                                <gr-icon-label gr-icon="close">Cancel</gr-icon-label>
                            </button>

                            <button class="button-save" type="submit">
                                <gr-icon-label gr-icon="check">Save</gr-icon-label>
                            </button>
                        </div>
                    </form>
                </span>
          </div>
    </dl>
    </div>

    <div data-cy="metadata-specialInstructions" role="region" class="image-info__group" aria-label="Special instructions">
        <dl class="image-info__wrap">
            <dt class="metadata-line metadata-line__key">Special instructions</dt>
            <span ng-if="ctrl.metadata.usageInstructions">
                <span class="metadata-line__info">{{ctrl.metadata.usageInstructions}}</span>
            </span>
            <span ng-if="ctrl.metadataUpdatedByTemplate.includes('specialInstructions')">
                <div class="metadata-line__info">
                    <dd class="image-info__description-preview">{{ctrl.metadata.specialInstructions}}</dd>
                </div>
            </span>
            <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('specialInstructions')">
                <button class="image-info__edit"
                        ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                        ng-click="specialInstructionsEditForm.$show(); ctrl.checkSpecialInstructionsLength();"
                        ng-hide="specialInstructionsEditForm.$visible">✎</button>
                <form editable-form name="specialInstructionsEditForm" onaftersave="ctrl.updateSpecialInstructionsField()">
                    <div ng-hide="specialInstructionsEditForm.$visible"
                         ng-class="{'image-info--multiple': ctrl.hasMultipleSpecialInstructions()}">

                        <div ng-if="ctrl.userCanEdit">
                            <dd class="image-info__special-instructions"
                                ng-if="ctrl.hasMultipleSpecialInstructions()"
                            >Multiple special instructions (click ✎ to edit <strong>all</strong>)
                            </dd>

                            <dd class="image-info__special-instructions"
                                ng-class="{'editable-empty': !ctrl.metadata.specialInstructions}"
                                ng-if="!ctrl.hasMultipleSpecialInstructions() && !ctrl.metadata.usageInstructions"
                            >{{ctrl.metadata.specialInstructions || "Unknown (click ✎ to add)"}}
                            </dd>

                            <dd class="image-info__special-instructions"
                                ng-class="{'editable-empty': !ctrl.metadata.specialInstructions}"
                                ng-if="!ctrl.hasMultipleSpecialInstructions() && ctrl.metadata.usageInstructions"
                            >{{ctrl.metadata.specialInstructions || "Click ✎ to add further instructions"}}
                            </dd>
                        </div>

                        <div ng-if="!ctrl.userCanEdit">
                            <dd class="image-info__special-instructions"
                                ng-if="ctrl.hasMultipleSpecialInstructions()"
                            >Multiple special instructions
                            </dd>

                            <dd class="image-info__special-instructions"
                                ng-class="{'editable-empty': !ctrl.metadata.specialInstructions}"
                                ng-if="!ctrl.hasMultipleSpecialInstructions() && ctrl.metadata.usageInstructions"
                            >{{ctrl.metadata.specialInstructions || ""}}
                            </dd>

                            <dd class="image-info__special-instructions"
                                ng-class="{'editable-empty': !ctrl.metadata.specialInstructions}"
                                ng-if="!ctrl.hasMultipleSpecialInstructions() && !ctrl.metadata.usageInstructions"
                            >{{ctrl.metadata.specialInstructions || "Unknown"}}
                            </dd>
                        </div>
                    </div>
                    <div
                        class="metadata-line__info"
                        editable-textarea="ctrl.metadata.specialInstructions"
                        ng-hide="specialInstructionsEditForm.$visible"
                        e:msd-elastic
                        e:ng-class="{'image-info__editor--error': $error,
                                     'image-info__editor--saving': specialInstructionsEditForm.$waiting,
                                     'text-input': true}"
                    >
                    </div>
                    <div ng-if="ctrl.userCanEdit && specialInstructionsEditForm.$visible" class="editable-buttons">
                        <button class="button-cancel" type="button" ng-click="specialInstructionsEditForm.$cancel()">
                            <gr-icon-label gr-icon="close">Cancel</gr-icon-label>
                        </button>
                        <button class="button-save" type="submit">
                            <gr-icon-label gr-icon="check">Save</gr-icon-label>
                        </button>
                    </div>
                </form>
            </span>
        </dl>
    </div>

    <div class="image-info__group" role="region" aria-label="Image metadata">
        <dl class="image-info__group--dl metadata-line">
            <dt class="metadata-line image-info__wrap metadata-line__key image-info__group--dl__key--panel">Taken on</dt>
            <dd class="image-info__wrap metadata-line image-info__dateTaken metadata-line__info image-info__group--dl__value--panel">
                <button data-cy="it-edit-dateTaken-button"
                        class="image-info__edit"
                        ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                        ng-click="takenEditForm.$show()"
                        ng-hide="takenEditForm.$visible"
                >✎</button>

                <span editable-datetime-local="ctrl.metadata.dateTaken"
                      ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.dateTaken)}"
                      ng-hide="takenEditForm.$visible"
                      onbeforesave="ctrl.updateMetadataField('dateTaken', $data)"
                      e:form="takenEditForm"
                      e:ng-class="{'image-info__editor--error': $error,
                                   'image-info__editor--saving': takenEditForm.$waiting,
                                   'text-input': true}">

                    <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.dateTaken) && ctrl.userCanEdit">
                        Multiple dates (click ✎ to edit <strong>all</strong>)
                    </span>

                    <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.dateTaken) && !ctrl.userCanEdit">
                        Multiple dates
                    </span>

                    <span class="metadata-line__info" ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.dateTaken)">
                        <span ng-if="ctrl.metadata.dateTaken">
                            {{ctrl.metadata.dateTaken | date:'d MMM yyyy, HH:mm'}}
                        </span>

                        <span class="editable-empty" ng-if="!ctrl.metadata.dateTaken && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
                        <span class="editable-empty" ng-if="!ctrl.metadata.dateTaken && !ctrl.userCanEdit">Unknown</span>
                    </span>
                </span>
            </dd>

            <dt ng-if="ctrl.rawMetadata.byline || ctrl.userCanEdit" class="image-info__wrap metadata-line image-info__byline metadata-line__key image-info__group--dl__key--panel">By</dt>
            <dd data-cy="metadata-byline" ng-if="ctrl.rawMetadata.byline || ctrl.userCanEdit" class="image-info__wrap metadata-line image-info__byline metadata-line__info image-info__group--dl__value--panel">
                <span ng-if="ctrl.metadataUpdatedByTemplate.includes('byline')">
                    <input
                        type="text"
                        class="text-input job-info--editor__input job-info--editor__input--byline image-info--editor__input-preview"
                        ng-model="ctrl.metadata.byline"
                    />
                </span>
                <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('byline')">
                    <button data-cy="it-edit-byline-button"
                            class="image-info__edit"
                            ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                            ng-click="bylineEditForm.$show()"
                            ng-hide="bylineEditForm.$visible"
                    >✎</button>
                    <span ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.byline)}"
                          editable-text="ctrl.metadata.byline"
                          ng-hide="bylineEditForm.$visible"
                          onbeforesave="ctrl.updateMetadataField('byline', $data)"
                          e:form="bylineEditForm"
                          e:ng-class="{'image-info__editor--error': $error,
                                       'image-info__editor--saving': bylineEditForm.$waiting,
                                       'text-input': true}">

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.byline) && ctrl.userCanEdit">
                            Multiple bylines (click ✎ to edit <strong>all</strong>)
                        </span>

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.byline) && !ctrl.userCanEdit">
                            Multiple bylines
                        </span>

                        <span class="metadata-line__info" ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.byline)">
                            <span ng-if="ctrl.metadata.byline">
                                <a ui-sref="search.results({query: (ctrl.metadata.byline | queryFilter:'by'), nonFree: ctrl.srefNonfree()})"
                                   ng-click="ctrl.searchWithModifiers($event, 'by', ctrl.metadata.byline)"
                                   aria-label="Search images by {{ctrl.metadata.byline}} byline">{{ctrl.metadata.byline}}</a>
                            </span>

                            <span class="editable-empty" ng-if="!ctrl.metadata.byline && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
                        </span>
                    </span>
                </span>

            </dd>

            <dt class="metadata-line image-info__wrap image-info__credit metadata-line__key image-info__group--dl__key--panel">Credit</dt>
            <dd data-cy="metadata-credit" class="image-info__wrap metadata-line image-info__credit metadata-line__info image-info__group--dl__value--panel">
                <span ng-if="ctrl.metadataUpdatedByTemplate.includes('credit')">
                    <input
                        type="text"
                        class="text-input job-info--editor__input job-info--editor__input--byline image-info--editor__input-preview"
                        ng-model="ctrl.metadata.credit"
                    />
                </span>
                <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('credit')">
                    <button data-cy="it-edit-credit-button"
                            class="image-info__edit"
                            ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                            ng-click="creditEditForm.$show()"
                            ng-hide="creditEditForm.$visible"
                    >✎</button>

                    <span ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.credit)}"
                          editable-text="ctrl.metadata.credit"
                          ng-hide="creditEditForm.$visible"
                          e:typeahead="credit for credit in ctrl.credits($viewValue) | limitTo:8"
                          onbeforesave="ctrl.updateMetadataField('credit', $data)"
                          e:form="creditEditForm"
                          e:ng-class="{'image-info__editor--error': $error,
                                       'image-info__editor--saving': creditEditForm.$waiting,
                                       'text-input': true}">

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.credit) && ctrl.userCanEdit">
                            Multiple credits (click ✎ to edit <strong>all</strong>)
                        </span>

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.credit) && !ctrl.userCanEdit">
                            Multiple credits
                        </span>

                        <span class="metadata-line__info" ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.credit)">
                            <span ng-if="ctrl.metadata.credit">
                                <a ui-sref="search.results({query: (ctrl.metadata.credit | queryFilter:'credit'), nonFree: ctrl.srefNonfree()})"
                                   ng-click="ctrl.searchWithModifiers($event, 'credit', ctrl.metadata.credit)"
                                   aria-label="Search images by {{ctrl.metadata.credit}} credit">{{ctrl.metadata.credit}}</a>
                            </span>

                            <span class="editable-empty" ng-if="!ctrl.metadata.credit && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
                            <span class="editable-empty" ng-if="!ctrl.metadata.credit && !ctrl.userCanEdit">Unknown</span>
                        </span>
                    </span>
                </span>

            </dd>

            <dt ng-if="(ctrl.hasLocationInformation() || ctrl.hasMultipleValues(ctrl.rawMetadata.subLocation) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.city) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.state) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.country)) || ctrl.userCanEdit" ng-hide="locationEditForm.$visible" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Location</dt>
            <dd ng-if="(ctrl.hasLocationInformation() || ctrl.hasMultipleValues(ctrl.rawMetadata.subLocation) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.city) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.state) ||
                            ctrl.hasMultipleValues(ctrl.rawMetadata.country))  || ctrl.userCanEdit" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <button data-cy="it-edit-loc-button"
                        class="image-info__edit"
                        ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                        ng-click="locationEditForm.$show()"
                        ng-hide="locationEditForm.$visible">✎</button>

                <span ng-hide="locationEditForm.$visible" ng-repeat="prop in ['subLocation', 'city', 'state', 'country']">
                    <span ng-if="ctrl.metadata[prop] || ctrl.hasMultipleValues(ctrl.rawMetadata[prop])">
                        <a
                            ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata[prop])"
                            ui-sref="search.results({query: (ctrl.metadata[prop] | queryFilter:ctrl.locationFieldMap[prop]), nonFree: ctrl.srefNonfree()})"
                            ng-click="ctrl.searchWithModifiers($event, ctrl.locationFieldMap[prop], ctrl.metadata[prop])"
                            aria-label="Search images by {{ctrl.metadata[prop]}} {{prop}}"
                        >{{ctrl.metadata[prop]}}</a><span
                            ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata[prop])"
                            ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata[prop])}"
                        >{{'(Multiple ' + ctrl.locationFieldPluralMap[prop] + ')'}}</span>{{$last ? '' : ', '}}
                    </span>
                </span>

                <span ng-hide="locationEditForm.$visible" class="editable-empty"
                      ng-if="!ctrl.hasLocationInformation() &&
                            ctrl.userCanEdit &&
                            (!ctrl.hasMultipleValues(ctrl.rawMetadata.subLocation) &&
                            !ctrl.hasMultipleValues(ctrl.rawMetadata.city) &&
                            !ctrl.hasMultipleValues(ctrl.rawMetadata.state) &&
                            !ctrl.hasMultipleValues(ctrl.rawMetadata.country))">Unknown (click ✎ to add)</span>
            </dd>

            <div ng-hide="!locationEditForm.$visible" data-cy="metadata-location" class="image-info__wrap">
                <form  class="edit-Location-form" editable-form name="locationEditForm" onbeforesave="ctrl.updateLocationField('Location', $data)">

                    <div class="edit-Location-form-row">
                        <dt  ng-hide="!locationEditForm.$visible" class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Sublocation</dt>
                        <dd class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                            <div
                                class="metadata-line__info"

                                editable-text="ctrl.metadata.subLocation"
                                ng-hide="locationEditForm.$visible"
                                e-name="subLocation"
                                e-placeholder="{{ctrl.hasMultipleValues(ctrl.rawMetadata.subLocation) ? 'Multiple sublocations' : 'sublocation' }}"
                                e:msd-elastic
                                e:ng-class="{'image-info__editor--error': $error,
                                      'image-info__editor--saving': locationEditForm.$waiting,
                                      'text-input': true}">
                            </div>
                        </dd>
                    </div>

                    <div class="edit-Location-form-row">
                        <dt  ng-hide="!locationEditForm.$visible" class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">City</dt>
                        <dd class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                            <div
                                class="metadata-line__info"

                                editable-text="ctrl.metadata.city"
                                ng-hide="locationEditForm.$visible"
                                e-name="city"
                                e-placeholder="{{ctrl.hasMultipleValues(ctrl.rawMetadata.city) ? 'Multiple cities' : 'city' }}"
                                e:msd-elastic
                                e:ng-class="{'image-info__editor--error': $error,
                                      'image-info__editor--saving': locationEditForm.$waiting,
                                      'text-input': true}">
                            </div>
                        </dd>
                    </div>

                    <div class="edit-Location-form-row">
                        <dt  ng-hide="!locationEditForm.$visible" class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">State</dt>
                        <dd class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                            <div
                                class="metadata-line__info"

                                editable-text="ctrl.metadata.state"
                                ng-hide="locationEditForm.$visible"
                                e-name="state"
                                e-placeholder="{{ctrl.hasMultipleValues(ctrl.rawMetadata.state) ? 'Multiple states' : 'state' }}"
                                e:msd-elastic
                                e:ng-class="{'image-info__editor--error': $error,
                                      'image-info__editor--saving': locationEditForm.$waiting,
                                      'text-input': true}">
                            </div>
                        </dd>
                    </div>

                    <div class="edit-Location-form-row">
                        <dt ng-hide="!locationEditForm.$visible" class="edit-Location-form-cell image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Country</dt>
                        <dd class="edit-Location-form-cell">
                            <div
                                class="metadata-line__info"
                                editable-text="ctrl.metadata.country"
                                ng-hide="locationEditForm.$visible"
                                e-name="country"
                                e-placeholder="{{ctrl.hasMultipleValues(ctrl.rawMetadata.country) ? 'Multiple countries' : 'country' }}"
                                e:msd-elastic
                                e:ng-class="{'image-info__editor--error': $error,
                                          'image-info__editor--saving': locationEditForm.$waiting,
                                          'text-input': true}">
                            </div>
                            <div ng-if="ctrl.userCanEdit && locationEditForm.$visible" class="editable-buttons">
                                <button class="button-cancel" type="button" ng-click="locationEditForm.$cancel()">
                                    <gr-icon-label gr-icon="close">Cancel</gr-icon-label>
                                </button>

                                <button class="button-save" type="submit">
                                    <gr-icon-label gr-icon="check">Save</gr-icon-label>
                                </button>
                            </div>
                        <dd/>
                    </div>
                </form>
            </div>

            <dt ng-if="ctrl.rawMetadata.copyright || ctrl.userCanEdit" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Copyright</dt>
            <dd data-cy="metadata-copyright" ng-if="ctrl.rawMetadata.copyright || ctrl.userCanEdit" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <span ng-if="ctrl.metadataUpdatedByTemplate.includes('copyright')">
                    <input
                        type="text"
                        class="text-input job-info--editor__input job-info--editor__input--byline image-info--editor__input-preview"
                        ng-model="ctrl.metadata.copyright"
                    />
                </span>
                <span ng-if="!ctrl.metadataUpdatedByTemplate.includes('copyright')">
                    <button data-cy="it-edit-copyright-button"
                            class="image-info__edit"
                            ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                            ng-click="copyrightEditForm.$show()"
                            ng-hide="copyrightEditForm.$visible"
                    >✎</button>
                    <span ng-class="{'image-info--multiple': ctrl.hasMultipleValues(ctrl.rawMetadata.copyright)}"
                          editable-text="ctrl.metadata.copyright"
                          ng-hide="copyrightEditForm.$visible"
                          onbeforesave="ctrl.updateMetadataField('copyright', $data)"
                          e:form="copyrightEditForm"
                          e:ng-class="{'image-info__editor--error': $error,
                                       'image-info__editor--saving': copyrightEditForm.$waiting,
                                       'text-input': true}">

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.copyright) && ctrl.userCanEdit">
                            Multiple copyrights (click ✎ to edit <strong>all</strong>)
                        </span>

                        <span class="metadata-line__info" ng-if="ctrl.hasMultipleValues(ctrl.rawMetadata.copyright) && !ctrl.userCanEdit">
                            Multiple copyrights
                        </span>

                        <span class="metadata-line__info" ng-if="!ctrl.hasMultipleValues(ctrl.rawMetadata.copyright)">
                            <span ng-if="ctrl.metadata.copyright">
                                <a ui-sref="search.results({query: (ctrl.metadata.copyright | queryFilter:'copyright'), nonFree: ctrl.srefNonfree()})"
                                   ng-click="ctrl.searchWithModifiers($event, 'copyright', ctrl.metadata.copyright)"
                                   aria-label="Search images by {{ctrl.metadata.copyright}} copyright">{{ctrl.metadata.copyright}}</a>
                            </span>

                            <span class="editable-empty" ng-if="!ctrl.metadata.copyright && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
                        </span>
                    </span>
                </span>

            </dd>

            <dt ng-if="ctrl.singleImage" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Uploaded</dt>
            <dd ng-if="ctrl.singleImage" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <span class="metadata-line__info">
                    {{ctrl.singleImage.data.uploadTime | date:'d MMM yyyy, HH:mm'}}
                </span>
            </dd>

            <dt ng-if="!ctrl.hasMultipleValues(ctrl.extraInfo.uploadedBy)" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Uploader</dt>
            <dd ng-if="!ctrl.hasMultipleValues(ctrl.extraInfo.uploadedBy)" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <span class="metadata-line__info">
                    <a ui-sref="search.results({query: (ctrl.extraInfo.uploadedBy | queryFilter:'uploader'), nonFree: ctrl.srefNonfree()})"
                       ng-click="ctrl.searchWithModifiers($event, 'uploader', ctrl.extraInfo.uploadedBy)"
                       aria-label="Search images uploaded by {{ctrl.extraInfo.uploadedBy}}">{{ctrl.extraInfo.uploadedBy | stripEmailDomain}}</a>
                </span>
            </dd>

            <dt ng-if="!ctrl.hasMultipleValues(ctrl.extraInfo.filename) && ctrl.extraInfo.filename" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">Filename</dt>
            <dd ng-if="!ctrl.hasMultipleValues(ctrl.extraInfo.filename) && ctrl.extraInfo.filename" class="metadata-line metadata-line__info image-info__group--dl__value image-info__group--dl__value--panel">
                <span
                    class="metadata-line__info select-all-wrap"
                    title="{{ctrl.extraInfo.filename}}">{{ctrl.extraInfo.filename}}</span>
            </dd>

            <dt ng-if="ctrl.selectedImagesHasAny(ctrl.subjectsAccessor)"
                class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">
                Subjects
            </dt>
            <dd ng-if="ctrl.selectedImagesHasAny(ctrl.subjectsAccessor)"
                class="image-info__pills image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <ui-list-editor-info-panel
                   is-editable="false"
                   images="ctrl.selectedImages"
                   accessor="ctrl.subjectsAccessor"
                   query-filter="queryFilter:'subject'"
                   element-name="subject">
                </ui-list-editor-info-panel>
            </dd>
            <dt ng-if="ctrl.userCanEdit || ctrl.selectedImagesHasAny(ctrl.peopleAccessor)"
                class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">People</dt>
            <dd ng-if="ctrl.userCanEdit || ctrl.selectedImagesHasAny(ctrl.peopleAccessor)"
                class="image-info__pills image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                <button data-cy="it-edit-people-button"
                        class="metadata-plus__button"
                        ng-class="{'small': ctrl.grSmall}"
                        ng-click="peopleInImageEditForm.$show()"
                        ng-hide="peopleInImageEditForm.$visible"
                        ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                        gr-tooltip="Add People"
                        gr-tooltip-position="left"
                        aria-label="Add people to image">

                    <gr-icon ng-class="{'spin': ctrl.adding}">add_box</gr-icon>
                    <span>
                        <span ng-show="ctrl.adding">Adding...</span>
                    </span>
                </button>
                <span ng-class="{'image-info--multiple': ctrl.selectedImages.size > 0}"
                      editable-text="ctrl.newPeopleInImage"
                      ng-hide="peopleInImageEditForm.$visible"
                      onbeforesave="ctrl.updateMetadataField('peopleInImage', $data)"
                      e:form="peopleInImageEditForm"
                      e:ng-class="{'image-info__editor--error': $error,
                                   'image-info__editor--saving': peopleInImageEditForm.$waiting,
                                   'text-input': true}"></span>

                    <ui-list-editor-info-panel
                        is-editable="ctrl.userCanEdit"
                        images="ctrl.selectedImages"
                        add-to-images="ctrl.addPersonToImages"
                        remove-from-images="ctrl.removePersonFromImages"
                        accessor="ctrl.peopleAccessor"
                        query-filter="queryFilter:'person'"
                        element-name="person">
                    </ui-list-editor-info-panel>
            </dd>
    </dl>
    </div>

    <div ng-if="ctrl.singleImage && !ctrl.isAdditionalMetadataEmpty()" class="image-info__group image-info__group--full-metadata" role="region" aria-label="Additional metadata">
        <button class="metadata-reveal"
                ng-click="ctrl.showMetadataSection('additionalMetadata')"
                aria-label="{{ctrl.isMetadataSectionHidden('additionalMetadata') ? 'Show' : 'Hide'}} additional metadata section">
            <span ng-show="ctrl.isMetadataSectionHidden('additionalMetadata')">▸ Show</span>
            <span ng-hide="ctrl.isMetadataSectionHidden('additionalMetadata')">▾ Hide</span>
            additional metadata
        </button>

        <div ng-if="!ctrl.isMetadataSectionHidden('additionalMetadata')" class="metadata metadata-line image-info__group--dl">
            <dl ng-repeat="(key, value) in ctrl.metadata" ng-if="ctrl.isUsefulMetadata(key)" class="metadata__body image-info__group--dl">
                <dt class="metadata-line__key image-info__group--dl__key--full-metadata">{{key | spaceWords}}</dt>
                <dd class="metadata-line__info image-info__group--dl__value--full-metadata">
                <a ui-sref="search.results({query: (value | queryFilter:'{{key}}'), nonFree: ctrl.srefNonfree()})"
                ng-click="ctrl.searchWithModifiers($event, key, value)"
                aria-label="Search images with {{key}} '{{value}}'">{{value}}</a>
                </dd>
            </dl>

            <dl ng-repeat="(key, metadata) in ctrl.additionalMetadata" class="metadata__body image-info__group--dl">
                <dt class="metadata-line__key image-info__group--dl__key--full-metadata">{{key}}</dt>
                <dd class="metadata-line__info image-info__group--dl__value--full-metadata">
                <a ui-sref="search.results({query: (metadata.value | queryFilter:'{{metadata.alias}}'), nonFree: ctrl.srefNonfree()})"
                ng-click="ctrl.searchWithModifiers($event, metadata.alias, metadata.value)"
                aria-label="Search images with {{key}} '{{metadata.value}}'">{{metadata.value}}</a>
                </dd>
            </dl>

            <dl ng-repeat="(key, value) in ctrl.identifiers" class="metadata__body image-info__group--dl">
                <dt class="metadata-line__key image-info__group--dl__key--full-metadata">{{key | spaceWords}}</dt>
                <dd class="metadata-line__info image-info__group--dl__value--full-metadata">{{value}}</dd>
            </dl>
        </div>
    </div>

    <div ng-if="(ctrl.singleImage && ctrl.userCanEdit) || (ctrl.singleImage && !ctrl.userCanEdit && !ctrl.isDomainMetadataEmpty(spec.name))" ng-repeat="spec in ctrl.domainMetadata" class="image-info__group image-info__group--full-domain-metadata"
         role="region" aria-label="Domain metadata">
        <button class="metadata-reveal" ng-click="ctrl.showMetadataSection(spec.name)"
                aria-label="{{ctrl.isMetadataSectionHidden(spec.name) ? 'Show' : 'Hide'}} {{spec.label}} domain metadata section">
            <span ng-show="ctrl.isMetadataSectionHidden(spec.name)">▸ Show</span>
            <span ng-hide="ctrl.isMetadataSectionHidden(spec.name)">▾ Hide</span>
            {{spec.label}} metadata
        </button>

        <div ng-if="!ctrl.isMetadataSectionHidden(spec.name)" class="metadata metadata-line image-info__group--dl">
            <span class="metadata__description" ng-if="spec.description">{{spec.description}}</span>

            <dl ng-repeat="specField in spec.fields" class="metadata__body image-info__group--dl">
                <dt class="image-info__{{specField.name}} image-info__wrap metadata-line image-info__group--dl__key metadata-line__key" ng-if="specField.value || ctrl.userCanEdit">{{specField.label}}</dt>
                <dd data-cy="metadata-{{specField.name}}" class="image-info__wrap image-info__group--dl__value metadata-line__info" ng-if="specField.value || ctrl.userCanEdit">

                    <div ng-switch="specField.fieldType">
                        <span ng-switch-when="string">
                            <button data-cy="it-edit-{{specField.name}}-button"
                                    class="image-info__edit"
                                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                                    ng-click="domainMetadataEditForm.$show()"
                                    ng-hide="domainMetadataEditForm.$visible"
                            >✎</button>
                            <span class="image-info__{{specField.name}}"
                                  editable-text="specField.value"
                                  ng-hide="domainMetadataEditForm.$visible"
                                  onbeforesave="ctrl.updateDomainMetadataField(spec.name, specField.name, $data)"
                                  e:ng-class="{'image-info__editor--error': $error,
                               'image-info__editor--saving': domainMetadataEditForm.$waiting,
                               'text-input': true}"
                                  e:form="domainMetadataEditForm">

                                <span ng-if="specField.value">
                                    {{specField.value}}
                                </span>
                                <span class="editable-empty" ng-if="! specField.value && ctrl.userCanEdit">
                                    Unknown (click ✎ to add)
                                </span>
                            </span>
                        </span>

                        <span ng-switch-when="datetime">
                            <button data-cy="it-edit-{{specField.name}}-button"
                                    class="image-info__edit"
                                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                                    ng-click="domainMetadataEditForm.$show()"
                                    ng-hide="domainMetadataEditForm.$visible"
                            >✎</button>
                            <span class="image-info__{{specField.name}}"
                                  editable-datetime-local="specField.value"
                                  ng-hide="domainMetadataEditForm.$visible"
                                  onbeforesave="ctrl.updateDomainMetadataField(spec.name, specField.name, $data)"
                                  e:ng-class="{'image-info__editor--error': $error,
                               'image-info__editor--saving': domainMetadataEditForm.$waiting,
                               'text-input': true}"
                                  e:form="domainMetadataEditForm">

                                <span ng-if="specField.value">
                                    {{specField.value | date:'d MMM yyyy, HH:mm'}}
                                </span>
                                <span class="editable-empty" ng-if="! specField.value && ctrl.userCanEdit">
                                    Unknown (click ✎ to add)
                                </span>
                            </span>
                        </span>

                        <span ng-switch-when="integer">
                            <button data-cy="it-edit-{{specField.name}}-button"
                                    class="image-info__edit"
                                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                                    ng-click="domainMetadataEditForm.$show()"
                                    ng-hide="domainMetadataEditForm.$visible"
                            >✎</button>
                            <span class="image-info__{{specField.name}}"
                                  editable-number="specField.value"
                                  e-min="0"
                                  ng-hide="domainMetadataEditForm.$visible"
                                  onbeforesave="ctrl.updateDomainMetadataField(spec.name, specField.name, $data)"
                                  e:ng-class="{'image-info__editor--error': $error,
                               'image-info__editor--saving': domainMetadataEditForm.$waiting,
                               'text-input': true}"
                                  e:form="domainMetadataEditForm">

                                <span ng-if="specField.value">
                                    {{specField.value}}
                                </span>
                                <span class="editable-empty" ng-if="! specField.value && ctrl.userCanEdit">
                                    Unknown (click ✎ to add)
                                </span>
                            </span>
                        </span>

                        <span ng-switch-when="select">
                            <button data-cy="it-edit-{{specField.name}}-button"
                                    class="image-info__edit"
                                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                                    ng-click="domainMetadataEditForm.$show()"
                                    ng-hide="domainMetadataEditForm.$visible"
                            >✎</button>
                            <span class="image-info__{{specField.name}}"
                                  editable-select="specField.value"
                                  e-ng-options="option.value as option.text for option in specField.selectOptions"
                                  ng-hide="domainMetadataEditForm.$visible"
                                  onbeforesave="ctrl.updateDomainMetadataField(spec.name, specField.name, $data)"
                                  e:ng-class="{'image-info__editor--error': $error,
                               'image-info__editor--saving': domainMetadataEditForm.$waiting,
                               'text-input': true}"
                                  e:form="domainMetadataEditForm">

                                <span ng-if="specField.value">
                                    {{specField.value}}
                                </span>
                                <span class="editable-empty" ng-if="! specField.value && ctrl.userCanEdit">
                                    Unknown (click ✎ to add)
                                </span>
                            </span>
                        </span>

                        <span ng-switch-default>
                            <button data-cy="it-edit-{{specField.name}}-button"
                                    class="image-info__edit"
                                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                                    ng-click="domainMetadataEditForm.$show()"
                                    ng-hide="domainMetadataEditForm.$visible"
                            >✎</button>
                            <span class="image-info__{{specField.name}}"
                                  editable-text="specField.value"
                                  ng-hide="domainMetadataEditForm.$visible"
                                  onbeforesave="ctrl.updateDomainMetadataField(spec.name, specField.name, $data)"
                                  e:ng-class="{'image-info__editor--error': $error,
                               'image-info__editor--saving': domainMetadataEditForm.$waiting,
                               'text-input': true}"
                                  e:form="domainMetadataEditForm">

                                <span ng-if="specField.value">
                                    {{specField.value}}
                                </span>
                                <span class="editable-empty" ng-if="! specField.value && ctrl.userCanEdit">
                                    Unknown (click ✎ to add)
                                </span>
                            </span>
                        </span>
                    </div>

                </dd>
            </dl>
        </div>
    </div>
</div>

<div ng-if="ctrl.singleImage" class="image-info" role="region" aria-label="Collections">
    <dl class="image-info__group">
        <dt class="flex-container">
            <span class="metadata-line__key  flex-spacer">Collections</span>
            <gr-collection-overlay
                image="ctrl.singleImage"
                gr-collection-updated-by-template="ctrl.collectionUpdatedByTemplate">
            </gr-collection-overlay>
        </dt>
        <dd ng-switch="ctrl.collectionUpdatedByTemplate">
            <span class="metadata-line__info flex-container"
                  ng-repeat="collection in ctrl.updatedCollections"
                  ng-switch-when="true">
                <a class="preview__collections__collection__value"
                   ng-class="{'result-editor__field-container__collections-preview' : collection.fromTemplate}">
                    {{collection.description}}
                </a>
            </span>

            <span class="metadata-line__info flex-container"
                  ng-repeat="collection in ctrl.singleImage.data.collections"
                  ng-switch-default>
                <a ui-sref="search.results({query: (collection.data.pathId | queryCollectionFilter), nonFree: ctrl.srefNonfree()})"
                   ng-click="ctrl.searchWithModifiers($event, 'collection', collection.data.pathId)"
                   aria-label="Search images by {{collection.data.description}} collection">
                    {{collection.data.path.join(' ▸ ')}}
                </a>
                <span class="flex-spacer"></span>
                <span ng-if="ctrl.removingCollection === collection">Removing…</span>
                <button class="clickable" type="button"
                        ng-click="ctrl.removeImageFromCollection(collection)"
                        ng-hide="ctrl.removingCollection === collection"
                        gr-tooltip="Remove image from this collection"
                        gr-tooltip-position="top-left"
                        aria-label="Remove image from this collection">
                    <gr-icon-label gr-icon="clear"></gr-icon-label>
                </button>
            </span>
        </dd>
    </dl>
</div>

<div class="image-info" role="region" aria-label="Labels">
    <dl class="image-info__group">
        <dt class="flex-container">
            <span class="metadata-line__key  flex-spacer">Labels</span>
            <gr-add-label ng-blur="ctrl.cancel"
                        gr-small="true"
                        images="ctrl.selectedImages">
            </gr-add-label>
        </dt>
        <dd class="labels">
            <ui-list-editor-info-panel
                is-editable="true"
                images="ctrl.selectedImages"
                add-to-images="ctrl.addLabelToImages"
                remove-from-images="ctrl.removeLabelFromImages"
                accessor="ctrl.labelAccessor"
                query-filter="queryLabelFilter"
                element-name="label">
            </ui-list-editor-info-panel>
        </dd>
    </dl>
</div>

<div class="image-info__group" role="region" aria-label="Photoshoot">
    <dl class="image-info__wrap">
        <dt class="metadata-line metadata-line__key">Photoshoot</dt>
        <dd>
            <gr-photoshoot images="ctrl.selectedImages"/>
        </dd>
    </dl>
</div>

<div ng-if="ctrl.singleImage" class="image-info" role="region" aria-label="Syndication rights">
    <div class="image-info__group">
        <dl class="image-info__wrap">
            <dt class="metadata-line metadata-line__key">Syndication Rights (from RCS)</dt>
            <dd class="metadata-line__info">
                <gr-syndication-rights image="ctrl.singleImage"></gr-syndication-rights>
            </dd>
        </dl>
    </div>
</div>

<div ng-if="ctrl.userCanEdit || ctrl.selectedImagesHasAny(ctrl.keywordAccessor)"
     class="image-info" role="region" aria-label="Keywords" >
    <dl class="image-info__group image-info__wrap">
        <dt class="image-info__heading image-info__wrap">
            Keywords
            <button data-cy="it-edit-keywords-button"
                    class="metadata-plus__button"
                    ng-class="{'small': ctrl.grSmall}"
                    ng-click="keywordsEditForm.$show()"
                    ng-hide="keywordsEditForm.$visible"
                    ng-if="ctrl.userCanEdit && ctrl.metadataUpdatedByTemplate.length == 0"
                    gr-tooltip="Add Keyword"
                    gr-tooltip-position="left"
                    aria-label="Add keyword to image">

                <gr-icon ng-class="{'spin': ctrl.adding}">add_box</gr-icon>
                <span>
                    <span ng-show="ctrl.adding">Adding...</span>
                </span>
            </button>
        </dt>
        <dd class="image-info__pills">
            <span ng-class="{'image-info--multiple': ctrl.selectedImages.size > 0}"
                  editable-text="ctrl.newKeywords"
                  ng-hide="keywordsEditForm.$visible"
                  onbeforesave="ctrl.updateMetadataField('keywords', $data)"
                  e:form="keywordsEditForm"
                  e:ng-class="{'image-info__editor--error': $error,
                                       'image-info__editor--saving': keywordsEditForm.$waiting,
                                       'text-input': true}">

                <ui-list-editor-info-panel
                    is-editable="ctrl.userCanEdit"
                    images="ctrl.selectedImages"
                    add-to-images="ctrl.addKeywordToImages"
                    remove-from-images="ctrl.removeKeywordFromImages"
                    accessor="ctrl.keywordAccessor"
                    query-filter="queryFilter:'keyword'"
                    element-name="keyword">
                </ui-list-editor-info-panel>

            </span>
        </dd>
    </dl>
</div>
<gr-display-crops ng-if="ctrl.singleImage" gr-small="true" crops="ctrl.singleImage.allCrops"></gr-display-crops>