kahuna/public/js/usage-rights/usage-rights-editor.html

<form class="usage-rights-editor ure"
      novalidate
      name="usageRights"
      ng-class="{'ure__category-invalid': ctrl.categoryInvalid, 'ure__category-preview': ctrl.usageRightsUpdatedByTemplate}"
      ng-submit="usageRights.$valid && ctrl.save()"
      aria-label="Image usage rights">

    <div class="ure__description">
        <a rel="noopener" target="_blank" href="{{ctrl.usageRightsHelpLink}}"
           aria-label="Usage rights guide">
            <gr-icon title="Rights Guide">
                info_outline
            </gr-icon>
            <strong>Having trouble picking rights?</strong>
        </a>
    </div>
    <label class="ure__category">
        <!-- We reset the model here else properties remain attached to the\
        model, even though they don't exist in the form -->
        <select
            data-cy="it-rights-select"
            class="full-width"
            ng-model="ctrl.category"
            ng-disabled="ctrl.saving || ctrl.usageRightsUpdatedByTemplate"
            ng-options="category as category.name for category in ctrl.categories track by category.value"
            ng-change="ctrl.reset()">
        </select>
    </label>

    <div class="ure__caution warning warning--small" ng-if="ctrl.category.caution">
        {{ctrl.category.caution}}
    </div>

    <div class="ure__description">
        {{ctrl.category.description}}
    </div>

    <div class="ure__properties" ng-if="ctrl.category">
        <div class="ure__multiple-rights-warning"
            ng-if="ctrl.usageRights.length > 1">
            Multiple rights & restrictions
            <gr-icon
                title="Some specific information about the usage rights of these images might be missing below and will be overridden.">
                help
            </gr-icon>
        </div>

        <div class="form-property"
             ng-repeat="property in ctrl.category.properties"
             ng-class="{ 'form-property--last': $last }">

            <div ng-if="property.name === 'restrictions' && !!ctrl.category.usageRestrictions">
                <span>
                    This rights category requires a restriction and the following wording will be applied:
                </span>
                <div class="ure__caution warning warning--small">
                    {{console.log("Usage Rights Length = " + ctrl.usageRights.length); ctrl.category.usageRestrictions}}
                </div>
            </div>

            <div ng-if="property.name === 'restrictions' && ctrl.category.usageSpecialInstructions">
                <span ng-if="ctrl.category.usageRestrictions" class="ure__description">
                    The special instructions will be:
                </span>
                <span ng-if="!ctrl.category.usageRestrictions" class="ure__description">
                    This rights category requires special instructions and the following wording will be applied:
                </span>
                <div class="ure__description job-usage-instructions">
                    {{ctrl.category.usageSpecialInstructions}}
                </div>
            </div>

            <div ng-if="property.name === 'restrictions'">
                <label>
                    <input type="checkbox"
                           ng-model="ctrl.showRestrictions"
                           ng-disabled="ctrl.forceRestrictions" />
                    <span ng-if="!ctrl.category.usageRestrictions">
                        Restricted
                    </span>
                    <span ng-if="!!ctrl.category.usageRestrictions">
                        Add further restrictions
                    </span>
                </label>

                <div ng-if="ctrl.showRestrictions"
                     ng-switch="ctrl.category.defaultRestrictions === undefined">
                    <!-- We don't allow you to set the restrictions if there are defaults.
                    This might not be the behaviour we want in the future, but works for now. -->
                    <textarea
                        class="text-input form-input-text"
                        name="{{ property.name }}"
                        placeholder="What restrictions apply to this image? e.g. 'Use in relation to the Windsor Triathlon only'"
                        ng-switch-when="true"
                        ng-model="ctrl.model[property.name]"
                        ng-required="ctrl.showRestrictions"
                        ng-readonly="ctrl.usageRightsUpdatedByTemplate">
                    </textarea>

                    <textarea
                        class="text-input form-input-text"
                        disabled="disabled"
                        ng-switch-default>
                        {{ctrl.category.defaultRestrictions}}
                    </textarea>
                </div>
            </div>

            <div ng-if="property.name !== 'restrictions'"
                 ng-init="fieldUniqueId = $id">
                <label class="form-label" for="ure-field-{{::fieldUniqueId}}">
                    <div class="form-label__text">{{ property.label }}</div>
                    <!-- TODO: Show errors here -->
                    <!--<div class="form-label__error">Error</div>-->
                </label>

                <div ng-switch="property.type">
                    <div ng-switch-when="string">
                        <input
                            id="ure-field-{{::fieldUniqueId}}"
                            data-cy="it-edit-usage-input"
                            class="text-input form-input-text"
                            type="text"
                            name="{{ property.name }}"
                            placeholder="e.g. {{ property.examples }}"
                            ng-if="!property.options && !property.optionsMap"
                            ng-model="ctrl.model[property.name]"
                            ng-required="property.required" />

                        <div ng-if="property.options"
                             ng-switch="property.options.length > 3"
                             ng-init="options = ctrl.getOptionsFor(property)">
                                <div class="radio-list" ng-switch-when="false">
                                    <div class="radio-list__item"
                                         ng-repeat="o in options">

                                        <input type="radio"
                                            id="id-{{::$id}}-{{o.key}}-{{property.name}}-radio-list__item"
                                            class="radio-list__circle"
                                            name="{{property.name}}-radio-list"
                                            placeholder="e.g. {{ property.examples }}"
                                            ng-value="o.value"
                                            ng-required="property.required"
                                            ng-model="ctrl.model[property.name]" />
                                        <label
                                            for="id-{{::$id}}-{{o.key}}-{{property.name}}-radio-list__item"
                                            class="radio-list__label"
                                            ng-class="{'radio-list--selected': ctrl.model[property.name] === o.value || (!ctrl.model[property.name] && o.value === null)}">
                                            <div class="radio-list__selection-state"></div>
                                            <div class="radio-list__label-value">{{ o.key }}</div>
                                        </label>

                                    </div>
                                </div>

                                <select
                                    class="full-width"
                                    id="ure-field-{{::fieldUniqueId}}"
                                    name="{{ property.name }}"
                                    ng-switch-when="true"
                                    ng-model="ctrl.model[property.name]"
                                    ng-required="property.required"
                                    ng-options="o.value as o.key for o in options">
                                </select>
                        </div>

                        <div class="flex-container"
                             ng-if="property.optionsMap"
                             ng-init="otherValue = ctrl.isOtherValue(property)">

                            <select
                                class="full-width"
                                id="ure-field-{{::fieldUniqueId}}"
                                name="{{ property.name }}"
                                ng-model="ctrl.model[property.name]"
                                ng-required="property.required"
                                ng-options="o for o in ctrl.getOptionsMapFor(property)"
                                ng-if="!otherValue">
                                <option value="">None</option>
                            </select>

                            <input type="text"
                                class="text-input full-width"
                                id="ure-field-{{::fieldUniqueId}}"
                                placeholder="e.g. {{ property.examples }}"
                                ng-model="ctrl.model[property.name]"
                                ng-required="property.required"
                                ng-if="otherValue" />

                            <label class="flex-no-shrink">
                                <input type="checkbox" ng-model="otherValue" />
                                Other
                            </label>
                        </div>
                    </div>

                    <textarea
                        class="text-input form-input-text"
                        id="ure-field-{{::fieldUniqueId}}"
                        name="{{ property.name }}"
                        placeholder="e.g. {{ property.examples }}"
                        ng-model="ctrl.model[property.name]"
                        ng-switch-when="text"
                        ng-required="property.required">
                    </textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="ure__bar" ng-if="!ctrl.usageRightsUpdatedByTemplate">
        <button class="ure__action button-ico button-cancel" type="button" ng-click="ctrl.cancel()"
                title="close usage rights overrides"
                aria-label="Close usage rights form">
            <gr-icon-label gr-icon="close">Cancel</gr-icon-label>
        </button>

        <button data-cy="save-usage-rights"
            class="ure__action button-ico button-save"
            type="submit"
            title="save usage rights overrides"
            ng-disabled="ctrl.savingDisabled || !usageRights.$valid"
            aria-label="Save usage rights">
            <gr-icon-label ng-if="!ctrl.saving" gr-icon="check">Save</gr-icon-label>
            <gr-icon ng-if="ctrl.saving">timelapse</gr-icon>
        </button>
    </div>
</form>