public/components/content-list-drawer/content-list-drawer.html

<tr class="content-list-drawer content-list-drawer--hidden" ng-class="{'content-list-drawer--trashed': contentItem.item.trashed}">
    <td colspan="100">

        <div class="drawer">
            <div class="drawer__section" ng-class="{'drawer__section--closed' : openSection !== 'furniture'}">

                <div class="drawer__header" ng-if="openSection === 'furniture'">
                    <i class="drawer__icon" wf-icon="furniture"></i>
                    Furniture

                    <button type="button" class="btn btn-primary btn-xs pull-right"  ng-disabled="defaultSection === 'furniture'" ng-click="setDefaultOpenSection('furniture')">Set default</button>
                </div>

                <button type="button" class="drawer__header-toggle" ng-if="openSection !== 'furniture'" ng-click="toggleSection('furniture')">
                    <p class="drawer__header drawer__header--closed">
                        <i class="drawer__icon" wf-icon="furniture"></i>
                        Furniture
                    </p>
                </button>

                <span class ="drawer__warning" ng-if="capiData.capiError && openSection === 'furniture'">Warning: Could not reach content api. Some fields will be missing. Please go to composer to view full content information. If problem persists contact digitalcms.dev@guardian.co.uk.</span>

                <!--CONTENT DRAWER-->
                <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'furniture'}" ng-if="!supportedAtomTypes.includes(contentItem.contentType)">

                    <ul class="drawer__column">
                        <li class="drawer__item">
                            <p class="drawer__item-title">Working title</p>
                            <wf-editable class="drawer__item-content" ng-model="contentItem.workingTitle" wf-editable-on-update="onBeforeSaveWorkingTitle(newValue)" wf-editable-required="true">
                                {{ contentItem.workingTitle || '-' }}
                            </wf-editable>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Note</p>
                            <wf-editable class="drawer__item-content" wf-editable-type="textarea" ng-model="contentItem.note" wf-editable-on-update="onBeforeSaveNote(newValue)" wf-editable-maxlength="maxNoteLength">{{
                                contentItem.note || 'Add note' }}
                            </wf-editable>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Standfirst</span>
                            <span class="drawer__item-content" ng-class="{'drawer__item-content--empty': !capiData.standfirst}">
                                {{ capiData.standfirst || "None" }}
                            </span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Headline</p>
                            <span class="drawer__item-content">{{ capiData.headline || '-' }}</span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">URL</span>
                            <span class="drawer__item-content" ng-if="contentItem.path">
                                <a href="{{ contentItem.links.live || contentItem.links.preview || contentItem.links.composer || contentItem.links.editor }}">{{
                                    contentItem.path }}</a>
                            </span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Section</p>
                            <select ng-click="$event.stopPropagation()" ng-model="contentItem.section" ng-options="section.name for section in contentList.sections" wf-content-item-update-action="section"></select>
                        </li>
                    </ul>

                    <ul class="drawer__column">
                        <li cng-class="{'drawer__section-mainmedia--nopreview': capiData.mainMediaType != 'image'}">
                            <span class="drawer__item-title">Main media</span>

                            <div ng-if="capiData.mainMediaType == 'image'" class="drawer__image-container">
                                <img ng-src="{{ capiData.mainMediaUrl}}" class="drawer__image" alt=""/>
                            </div>
                            <div ng-if="contentItem.mainMediaNoPreview" class="drawer__section-image-container">
                                {{capiData.mainMediaType}}
                            </div>
                            <div ng-if="!capiData.mainMediaType" class="drawer__item-content drawer__item-content--empty">
                                None
                            </div>
                            </span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Caption</span>
                            <span class="drawer__item-content" ng-class="{'drawer__item-content--empty': !capiData.mainMediaCaption}">
                                {{ capiData.mainMediaCaption || "None" }}
                            </span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Alt text</span>
                            <span class="drawer__item-content" ng-class="{'drawer__item-content--empty': !capiData.mainMediaAltText}">
                                {{ capiData.mainMediaAltText || "None" }}
                            </span>
                        </li>

                        <li class="drawer__item">
                            <span class="drawer__item-title">Trail picture</span>
                            <div ng-if="capiData.trailImageUrl" class="drawer__image-container">
                                <img ng-src="{{ capiData.trailImageUrl }}" class="drawer__image" alt=""/>
                            </div>
                            <div ng-if="!capiData.trailImageUrl" class="drawer__item-content drawer__item-content--empty">
                                None
                            </div>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Trail text</span>
                            <span class="drawer__item-content" ng-class="{'drawer__item-content--empty': !capiData.trailText}">
                                {{ capiData.trailText || "None" }}
                            </span>
                        </li>
                    </ul>

                    <ul class="drawer__column">
                        <li class="drawer__item">
                            <span class="drawer__item-title">Comments</span>
                            <span class="drawer__item-content">{{ capiData.commentsTitle }}</span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Optimised for web</span>
                            <span class="drawer__item-content" ng-if="contentItem.optimisedForWeb">Optimised</span>
                            <span class="drawer__item-content" ng-if="!contentItem.optimisedForWeb && !contentItem.optimisedForWebChanged">Not optimised</span>
                            <span class="drawer__item-content" ng-if="contentItem.optimisedForWebChanged">Modified since being optimised</span>
                            <span class="drawer__item-content"><a target="_blank" href="https://docs.google.com/document/d/1MgQfsl1JaSS0UfE3NCsA06ErY99gbQyF7nAXjmu1uiA">Web headline guide</a></span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Content type</span>
                            <span class="drawer__item-content">
                                <i class="drawer__icon" wf-icon="{{ contentItem.contentType }}"></i> {{ contentItem.contentTypeTitle }}
                            </span>
                        </li>
                        <li class="drawer__item" ng-show="contentItem.contentType == 'article'">
                            <div class="drawer__item-wordcount">
                                <span class="drawer__item-title">Web word count</span>
                                <span class="drawer__item-content">{{ capiData.wordCount }} </span>
                            </div>
                            <div class="drawer__item-wordcount">
                                <span class="drawer__item-title">Print word count</span>
                                <span class="drawer__item-content" ng-class="{'drawer__item-content--empty': !contentItem.printWordCount}">
                                    {{ contentItem.printWordCount || "n/a" }} </span>
                            </div>
                        </li>
                        <li class="drawer__item" ng-show="contentItem.contentType == 'article'">
                            <span class="drawer__item-title">Commissioned Length</span>
                            <wf-editable class="drawer__item-content"
                            wf-editable-type="input"
                            wf-editable-input-type="number"
                            ng-model="contentItem.commissionedLength"
                            wf-editable-on-update="updateCommissionedLength(newValue)"
                            wf-editable-maxlength="5">{{contentItem.commissionedLength || formatReason(contentItem.missingCommissionedLengthReason) || "Add" }}
                            </wf-editable>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Commissioning info</span>
                            <span class="drawer__item-content" ng-repeat="desk in capiData.commissioningDesks" ng-show="capiData.commissioningDesks.length">{{ desk }}</span>
                            <span class="drawer__item-content--warning" ng-show="!capiData.commissioningDesks.length">None</span>
                            <span class="drawer__item-content--warning" ng-show="tagsUnavailable()">Commissioning info is temporarily unavailable</span>
                        </li>
                        <li class="drawer__item">
                            <span class="drawer__item-title">Story packages</span>
                            <span class="drawer__item-content" ng-repeat="p in capiData.packages" ng-show="capiData.packages.length">
                                <a href="{{storyPackagesUrl}}/editorial?layout=latest,content:{{p.id}},packages" target="_blank">{{ p.name }}</a>
                            </span>
                            <span class="drawer__item-content--warning" ng-show="!capiData.packages.length">None</span>
                        </li>
                    </ul>

                </div>
                <div ng-if="supportedAtomTypes.includes(contentItem.contentType)" ng-switch="contentItem.contentType">
                    <!--MEDIA ATOM DRAWER-->
                    <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'furniture'}" ng-switch-when="media">

                        <ul class="drawer__column">
                            <li class="drawer__item">
                                <p class="drawer__item-title">Working title</p>
                                <wf-editable class="drawer__item-content" ng-model="contentItem.workingTitle" wf-editable-on-update="onBeforeSaveWorkingTitle(newValue)" wf-editable-required="true">
                                    {{ contentItem.workingTitle || '-' }}
                                </wf-editable>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">Note</p>
                                <wf-editable class="drawer__item-content" wf-editable-type="textarea" ng-model="contentItem.note" wf-editable-on-update="onBeforeSaveNote(newValue)" wf-editable-maxlength="maxNoteLength">
                                    {{ contentItem.note || 'Add note' }}
                                </wf-editable>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">URL</p>
                                <span class="drawer__item-content" ng-if="capiData.editorUrl">
                                    <a href="{{ capiData.editorUrl }}">
                                        {{ capiData.editorUrl }}</a>
                                </span>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">Section</p>
                                <select ng-click="$event.stopPropagation()" ng-model="contentItem.section" ng-options="section.name for section in contentList.sections" wf-content-item-update-action="section"></select>
                            </li>
                        </ul>

                        <ul class="drawer__column">
                            <li class="drawer__item">
                                <p class="drawer__item-title">Content type</p>
                                <span class="drawer__item-content">
                                    {{ contentItem.contentTypeTitle || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Headline (YT title)</p>
                                <span class="drawer__item-content">
                                    {{ capiData.title || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Standfirst</p>
                                <span class="drawer__item-content" ng-bind-html="capiData.description | wfTrustedHtml">
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Trail text</p>
                                <span class="drawer__item-content">
                                    {{ capiData.trailText || '-' }}
                                </span>
                            </li>
                        </ul>

                        <ul class="drawer__column">
                            <li class="drawer__item">
                                <p class="drawer__item-title">Video source</p>
                                <span class="drawer__item-content">
                                    {{ capiData.source || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Video category</p>
                                <span class="drawer__item-content">
                                    {{ capiData.category || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Expiry date</p>
                                <span class="drawer__item-content">
                                    {{ capiData.friendlyExpiryDate || '-' }}
                                </span>
                            </li>

                            <!-- Remove this when YT data is added -->
                            <li class="drawer__item">
                                <p class="drawer__item-title">Keywords</p>
                                <span class="drawer__item-content">
                                    {{ capiData.keywords || '-' }}
                                </span>
                            </li>

                        </ul>

                        </ul>


                        <!--TODO: Add helpful Youtube data-->
                        <!--<ul class="drawer__column">
                            <li class="drawer__item">
                                <p class="drawer__item-title">Youtube category ID</p>
                                <span class="drawer__item-content">
                                    {{ capiData.metadata.categoryId || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Youtube channel ID</p>
                                <span class="drawer__item-content">
                                    {{ capiData.metadata.channelId || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Keywords</p>
                                <span class="drawer__item-content">
                                    {{ capiData.keywords || '-' }}
                                </span>
                            </li>

                        </ul>-->

                        <ul class="drawer__column drawer__column--wide" >
                            <li class="drawer__item">
                                <p class="drawer__item-title">Video preview</p>
                                <div class="drawer__video" ng-if="capiData.currentAsset" ng-bind-html="capiData.defaultHtml | wfTrustedHtml" />
                                <span class="drawer__item-content" ng-if="!capiData.currentAsset">
                                    No preview available
                                </span>
                            </li>
                            <li class="drawer__item">
                                <span class="drawer__item-title">Commissioning info</span>
                                <span class="drawer__item-content" ng-repeat="desk in capiData.commissioningInfo" ng-show="capiData.commissioningDesks.length">{{ desk }}</span>
                                <span class="drawer__item-content--warning" ng-show="!capiData.commissioningDesks.length">None</span>
                            </li>
                        </ul>

                    </div>
                    <!--DEFAULT ATOM DRAWER-->
                    <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'furniture'}" ng-switch-default>

                        <ul class="drawer__column">
                            <li class="drawer__item">
                                <p class="drawer__item-title">Working title</p>
                                <wf-editable class="drawer__item-content" ng-model="contentItem.workingTitle" wf-editable-on-update="onBeforeSaveWorkingTitle(newValue)" wf-editable-required="true">
                                    {{ contentItem.workingTitle || '-' }}
                                </wf-editable>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">Note</p>
                                <wf-editable class="drawer__item-content" wf-editable-type="textarea" ng-model="contentItem.note" wf-editable-on-update="onBeforeSaveNote(newValue)" wf-editable-maxlength="maxNoteLength">
                                    {{ contentItem.note || 'Add note' }}
                                </wf-editable>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">URL</p>
                                <span class="drawer__item-content" ng-if="capiData.editorUrl">
                                    <a href="{{ capiData.editorUrl }}">
                                        {{ capiData.editorUrl }}</a>
                                </span>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">Section</p>
                                <select ng-click="$event.stopPropagation()" ng-model="contentItem.section" ng-options="section.name for section in contentList.sections" wf-content-item-update-action="section"></select>
                            </li>
                            <li class="drawer__item">
                                <p class="drawer__item-title">Content type</p>
                                <span class="drawer__item-content">
                                    {{ contentItem.contentTypeTitle || '-' }}
                                </span>
                            </li>

                            <li class="drawer__item">
                                <p class="drawer__item-title">Title</p>
                                <span class="drawer__item-content">
                                    {{ capiData.title || '-' }}
                                </span>
                            </li>

                        </ul>

                    </div>

                </div>

            </div>

            <div class="drawer__section" ng-class="{'drawer__section--closed' : openSection !== 'management'}">
                <div class="drawer__header" ng-if="openSection === 'management'">
                    <i class="drawer__icon" wf-icon="management"></i>
                    Management

                    <button type="button" class="btn btn-primary btn-xs pull-right" ng-disabled="defaultSection === 'management'" ng-click="setDefaultOpenSection('management')">Set default</button>
                </div>

                <button data-cy="management-drawer" type="button" class="drawer__header-toggle" ng-if="openSection !== 'management'" ng-click="toggleSection('management')">
                    <p class="drawer__header drawer__header--closed">
                        <i class="drawer__icon" wf-icon="management"></i>
                        Management
                    </p>
                </button>

                <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'management'}" >
                    <!-- We allow overflow here for the datepicker, which will otherwise be occluded by its container -->
                    <ul class="drawer__column drawer__column--with-overflow drawer__column--wide">
                        <li class="drawer__item">
                            <p class="drawer__item-title">Priority</p>
                            <select ng-model="contentItem.priority" ng-options="p.value as p.name for p in contentList.priorities" wf-content-item-update-action="priority"></select>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Production deadline</p>
                            <button ng-hide="dateTimeEdit" ng-click="dateTimeEdit = true" ng-class="{ 'drawer__section-data-row--editable': contentItem.item.due, 'drawer__section-data-row--editable-empty': !contentItem.item.due, 'editable__view-value': true, 'editable__edit-button': true }" title="{{ (contentItem.item.due | wfLocaliseDateTime:$root.globalSettings.location | wfFormatDateTime:'long') || '' }}">
                                {{ (contentItem.item.due | wfLocaliseDateTime:$root.globalSettings.location | wfFormatDateTime) || 'Add deadline' }}
                            </button>
                            <form ng-show="dateTimeEdit" ng-submit="dateTimeEdit = false">
                                <div class="form-group">
                                    <div wf-date-time-picker wf-update-on="enter" ng-model="currentDatePickerValue" wf-on-cancel="dateTimeEdit = false; revertDeadline()" wf-cancel-on="blur" wf-on-submit="updateDeadline(); dateTimeEdit = false;" help-text="true"></div>
                                </div>
                            </form>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Scheduled</p>
                            <span class="drawer__item-content">
                                {{ (contentItem.item.scheduledLaunchDate | wfLocaliseDateTime | wfFormatDateTime) || "-" }}
                            </span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Embargoed</p>
                            <span class="drawer__item-content">
                                {{ contentItem.lifecycleStateSupl || (contentItem.lifecycleStateSuplDate | wfLocaliseDateTime | wfFormatDateTime) || "-" }}
                            </span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">State</p>
                            <span class="drawer__item-content">
                                {{ contentItem.state || '-' }}
                            </span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Status</p>
                            <select ng-model="contentItem.status" ng-options="status.value as status.label for status in contentItem.statusValues" wf-content-item-update-action="status"></select>
                        </li>
                    </ul>
                    <!-- We allow overflow here for the datepicker, which will otherwise be occluded by its container -->
                    <ul class="drawer__column  drawer__column--wide drawer__column--with-overflow">
                        <li class="drawer__item">
                            <p class="drawer__item-title">Print Location</p>
                            <div class="drawer__item-printlocation">
                                <span>Book section:</span>
                                <span ng-if="contentItem.shortActualPrintLocationDescription">{{contentItem.shortActualPrintLocationDescription}}</span>
                                <button ng-if="!contentItem.shortActualPrintLocationDescription" class="editable__edit-button" ng-hide="showBookTagPicker" ng-click="toggleBookTagPicker(true)">
                                    <div class="planned-print-location editable__view-value">
                                        <span>{{ (editedShortPlannedPrintLocationDescription || contentItem.shortPlannedPrintLocationDescription) || 'Add planned print location' }}</span>
                                        <span class="planned-print-location__brackets" ng:show="editedShortPlannedPrintLocationDescription || contentItem.shortPlannedPrintLocationDescription" class="editable__printlocation">(planned)</span>
                                    </div>
                                </button>
                                <div class="editable--edit editable--inline autocomplete" ng-show="showBookTagPicker">
                                    <input class="text-input fullwidth"
                                        ng-model="$parent.bookSectionQuery"
                                        placeholder="Enter a book section…"
                                        name="bookSection"
                                        autocomplete="off"
                                        ui-filter-list="candidateBookSections"
                                        ui-filter-list-on-filter="setBookSections()"
                                        ui-filter-list-on-select="pickBookSection(selectedItem)"
                                        >
                                    <ul class="autocomplete__results" ng:show="candidateBookSections">
                                        <li ng-repeat="tag in candidateBookSections" ng:class="{'is-selected': tag.selected}">
                                            <button ng-click="pickBookSection(tag.item)" >{{tag.item.internalName}}</button>
                                        </li>
                                    </ul>
                                    <span class="editable__controls">
                                        <button class="editable__control editable__control--cancel" ng-click="toggleBookTagPicker(false)" title="Cancel changes">
                                            <i class="editable__control-icon editable__control-icon--cancel" wf-icon="cross"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                            <div class="drawer__item-printlocation">
                                <span>Page number:</span>
                                <span ng-if="contentItem.actualNewspaperPageNumber">{{contentItem.actualNewspaperPageNumber}}</span>
                                <wf-editable class="editable--inline" ng-if="!contentItem.actualNewspaperPageNumber" ng-model="contentItem.plannedNewspaperPageNumber" wf-editable-on-update="onBeforeSavePlannedPageNumber(newValue)" wf-editable-input-type="number">
                                    <div class="planned-print-location editable__view-value">
                                        <span>{{ contentItem.plannedNewspaperPageNumber || 'Add planned page number.' }}</span>
                                        <span class="planned-print-location__brackets" ng:show="contentItem.plannedNewspaperPageNumber" class="editable__printlocation">(planned)</span>
                                    </div>
                                </wf-editable>
                            </div>
                            <div class="drawer__item-printlocation">
                                <span>Publication date:</span>
                                <span ng-if="contentItem.actualNewspaperPublicationDate">{{contentItem.actualNewspaperPublicationDate | wfFormatDateTime:'date'}}</span>
                                <button
                                    ng-hide="publicationDateTimeEdit || contentItem.actualNewspaperPublicationDate"
                                    ng-click="publicationDateTimeEdit = true"
                                    ng-class="{ 'drawer__section-data-row--editable': contentItem.plannedNewspaperPublicationDate, 'drawer__section-data-row--editable-empty': !contentItem.plannedNewspaperPublicationDate, 'editable__edit-button': true }"
                                    title="{{ (contentItem.plannedNewspaperPublicationDate | wfFormatDateTime:'date') || '' }}"
                                    >
                                    <div class="planned-print-location editable__view-value">
                                        <span>{{ (contentItem.plannedNewspaperPublicationDate | wfFormatDateTime:'date') || 'Add planned publication date' }}</span>
                                        <span class="planned-print-location__brackets" ng:show="contentItem.plannedNewspaperPublicationDate" class="editable__printlocation">(planned)</span>
                                    </div>
                                </button>
                                <form ng-show="publicationDateTimeEdit" ng-submit="publicationDateTimeEdit = false">
                                    <div class="form-group editable--inline">
                                        <div
                                        wf-date-time-picker
                                        wf-update-on="enter"
                                        ng-model="$parent.currentPublicationDatePickerValue"
                                        wf-on-cancel="publicationDateTimeEdit = false; revertPlannedPublicationDate()"
                                        wf-cancel-on="blur"
                                        wf-on-submit="updatePlannedPublicationDate(); publicationDateTimeEdit = false;"
                                        wf-date-only="true"
                                        ></div>
                                    </div>
                                </form>
                            </div>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Last modified (print)</p>
                            <span class="drawer__item-content">{{ (contentItem.lastModified | wfLocaliseDateTime:$root.globalSettings.location | wfFormatDateTime) || "-" }}</span>
                            <span class="drawer__item-content" ng-show="contentItem.lastModifiedInPrintBy">by {{ contentItem.lastModifiedInPrintBy }}</span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Status in print</p>
                            <span class="drawer__item-content" ng-show="contentItem.statusInPrint">{{ contentItem.statusInPrint }}</span>
                        </li>
                        <li class="drawer__item">
                          <p class="drawer__item-title">Rights</p>
                          <span class="drawer__item-content">
                            <ui-edit-rights content-item="contentItem" />
                          </span>
                        </li>
                    </ul>


                    <ul class="drawer__column drawer__column--wide">
                        <li class="drawer__item">
                            <p class="drawer__item-title">Office</p>
                            <select ng-model="contentItem.office" ng-change="updateOffice(contentItem.office)" ng-options="office.value as office.name for office in prodOffices" wf-content-item-update-action="prodOffice"></select>
                        </li>
                        <li class="drawer__item" ng-switch="!!editingAssignee">
                            <div ng-switch-when="false">
                                <p class="drawer__item-title">Assigned to</p>
                                <span class="drawer__section-data-row--editable drawer__user-name" ng-click="toggleAssigneeEditing();" onbeforesave="onBeforeSaveAssignee($data)">{{ contentItem.assignee || "None" }}</span>
                            </div>
                            <div ng-switch-when="true">
                                <punters stub="contentItem" indrawer="true"></punters>
                            </div>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">In use by</p>
                            <wf-presence-indicators presence-id="contentItem.composerId" dont-display-idle="contentItem.contentType == 'liveblog'" in-drawer="true" ng-if="contentItem.composerId"></wf-presence-indicators>
                            <wf-presence-indicators presence-id="'media-' + contentItem.item.editorId" in-drawer="true" ng-if="contentItem.contentType === 'media'"></wf-presence-indicators>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Last modified</p>
                            <span class="drawer__item-content">{{ (contentItem.lastModified | wfLocaliseDateTime:$root.globalSettings.location | wfFormatDateTime) || "-" }}</span>
                            <span class="drawer__item-content" ng-show="contentItem.lastModifiedBy">by {{ contentItem.lastModifiedBy }}</span>
                        </li>
                        <li class="drawer__item" ng-if="contentItem.contentType !== 'media'">
                            <p class="drawer__item-title">InCopy</p>
                            <span class="drawer__item-content">{{ contentItem.incopyTitle }}</span>
                            <span class="drawer__item-content" ng-if="contentItem.isOwnedByInCopy"><i>Locked</i></span>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Legal status</p>
                            <select ng-model="contentItem.needsLegal" ng-options="ls.value as ls.name for ls in legalValues" wf-content-item-update-action="needsLegal"></select>
                        </li>
                        <li class="drawer__item">
                            <p class="drawer__item-title">Picture Desk status</p>
                            <select ng-model="contentItem.needsPictureDesk" ng-options="pds.value as pds.name for pds in pictureDeskValues" wf-content-item-update-action="needsPictureDesk"></select>
                        </li>
                    </ul>

                </div>

            </div>

            <div class="drawer__section" ng-class="{'drawer__section--closed' : openSection !== 'usages'}" ng-if="supportedAtomTypes.includes(contentItem.contentType)">
                <div class="drawer__header" ng-if="openSection === 'usages'">
                    <i class="drawer__icon" wf-icon="usages"></i>
                    Usages

                </div>

                <button type="button"  class="drawer__header-toggle" ng-if="openSection !== 'usages'" ng-click="toggleSection('usages')">
                    <p class="drawer__header drawer__header--closed">
                        <i class="drawer__icon" wf-icon="usages"></i>
                        Usages
                    </p>
                </button>

                <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'usages'}" >

                    <ul class="drawer__column drawer__column--wide">
                        <li class="drawer__item">
                            <ul class="drawer__item-content usages-list" ng-if="capiData.usages.length">

                                <li class="usage" ng-class="{'usage--highlight' : usage.type === 'video'}" ng-repeat="usage in capiData.usages">
                                    <p class="usage__title">{{ usage.webTitle || '-' }}</p>
                                    <div class="usage__details">
                                        <span class="usage__date">{{ 'Created: ' + usage.friendlyCreationDate + ' '}}</span>
                                        <a ng:if="usage.type !== 'video'" href="{{ usage.composerUrl }}" target="_blank"><i class="drawer__icon usage__icon" wf-icon="composer"></i></a>
                                        <a ng:if="usage.type === 'video'" href="{{ usage.composerUrl }}" target="_blank"><i class="drawer__icon usage__icon" wf-icon="composer-video"></i></a>
                                        <a href="{{ usage.viewerUrl }}" target="_blank"><i class="drawer__icon usage__icon" wf-icon="preview"></i></a>
                                        <a href="{{ usage.webUrl }}" target="_blank"><i class="drawer__icon usage__icon" wf-icon="live-site"></i></a>
                                    </div>
                                </li>

                            </ul>

                            <p class="drawer__item-content" ng-if="!capiData.usages.length">No usages found for this Atom</p>
                        </li>
                    </ul>

                </div>

            </div>

            <div class="drawer__section" ng-class="{'drawer__section--closed' : openSection !== 'atoms'}" ng-if="!supportedAtomTypes.includes(contentItem.contentType)">
                <div class="drawer__header" ng-if="openSection === 'atoms'">
                    <i class="drawer__icon" wf-icon="atom"></i>
                    Atoms
                </div>

                <button type="button" class="drawer__header-toggle" ng-if="openSection !== 'atoms'" ng-click="toggleSection('atoms')">
                    <p class="drawer__header drawer__header--closed">
                        <i class="drawer__icon" wf-icon="atom"></i>
                        Atoms
                    </p>
                </button>

                <div class="drawer__inner" ng-class="{'drawer__inner--closed' : openSection !== 'atoms'}" >

                    <ul class="drawer__column drawer__column--wide">
                        <li class="drawer__item">
                            <ul class="drawer__item-content usages-list" ng-if="capiData.atomUsages.length">

                                <li class="usage" ng-repeat="atom in capiData.usages">
                                    <p class="usage__title">{{ atom.atomType }} - {{ atom.title }}</p>
                                    <p class="usage__details">
                                        <span class="usage__date">{{ 'Created: ' + atom.friendlyCreationDate + ' '}}</span>
                                        <a ng:if="atom.editorUrl" href="{{ atom.editorUrl }}" target="_blank"><i class="drawer__icon usage__icon" wf-icon="atom"></i></a>
                                    </p>
                                </li>

                            </ul>

                            <p class="drawer__item-content" ng-if="!capiData.atomUsages.length">No atoms found in this content</p>
                        </li>
                    </ul>

                </div>

            </div>

        </div>

        <div class="drawer__toolbar">

            <span class="drawer__toolbar-item drawer__toolbar-item--danger" ng-class="{'drawer__control--confirm': awaitingDeleteConfirmation}" ng-click="deleteContentItem(!contentItem.item.trashed)" title="{{ contentItem.item.trashed ? 'Restore' : 'Trash' }}" ng-class="{'drawer__control-item--restore': contentItem.item.trashed}">
                <i ng-if="!contentItem.item.trashed" class="drawer__icon drawer__toolbar-icon" wf-icon="delete"></i>
                {{ contentItem.item.trashed ? 'Restore' : 'Trash' }}
            </span>
            <div class="drawer__toolbar-item drawer__toolbar-item--spacer">
                &nbsp;
            </div>
            <!-- if the content doesn't have a Composer page, it won't be accessible in Restorer -->
            <span ng:if="!composerRestorerUrl.includes('null')" class="drawer__toolbar-item drawer__toolbar-item--action">
                <a href="{{ composerRestorerUrl }}" target="_blank" class="drawer__item-content" title="View versions">
                    <i class="drawer__icon drawer__toolbar-icon" wf-icon="view-versions"></i>
                    View versions
                </a>
            </span>
            <span ng-hide="contentItem.linkedWithIncopy" class="drawer__toolbar-item drawer__toolbar-item--action">
                <a
                    href="{{ indesignExportUrl }}"
                    title="Send to InDesign"
                    class="drawer__item-content" >
                    <i class="drawer__icon drawer__toolbar-icon" wf-icon="indesign"></i>
                    Send to InDesign
                </a>
            </span>
            <span class="drawer__toolbar-item drawer__toolbar-item--action">
                <a
                    href="{{ contentItem.linkedWithIncopy ?
                        buildUrl({ 'storyBundleId': contentItem.storyBundleId }, incopyOpenUrlTemplate) :
                        buildUrl({ 'composerId': contentItem.composerId }, incopyExportUrlTemplate)
                         }}"
                    title="{{ contentItem.linkedWithIncopy ? 'Open in' : 'Send to' }} InCopy"
                    class="drawer__item-content" >
                    <i class="drawer__icon drawer__toolbar-icon" wf-icon="incopy"></i>
                    {{ contentItem.linkedWithIncopy ? "Open in" : "Send to" }} InCopy
                </a>
            </span>
            <span class="drawer__toolbar-item drawer__toolbar-item--discreet" ng-click="contentListDrawerController.hide()" title="Close details">
                <i class="drawer__icon drawer__toolbar-icon" wf-icon="cross"></i>
                Close details
            </span>
        </div>

    </td>
</tr>