superdesk/superdesk-client-core

<div id="item-preview" class="preview-pane content-item-preview" ng-if="item" ng-class="{shift: toggleLeft}" data-test-id="authoring-preview" role="region" aria-labelledby="preview-heading">
    <h3 id="preview-heading" class="a11y-only" translate>Item preview</h3>
    <button class="shift-preview__toggle" ng-class="{shift: toggleLeft}" ng-click="shiftPreview()" aria-label="{{ 'Shift preview' | translate }}">
        <i class="icon-chevron-left-thin"></i>
    </button>
    <header>
        <ul role="tablist" class="nav-tabs" ng-class="{'nav-tabs--small': (showRelatedTab && showHistoryTab) || (showRelatedTab && links.length) || (showHistoryTab && links.length)}">
            <li class="nav-tabs__tab" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'content'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'content'" title="{{ 'Content' | translate }}"><span translate>Content</span></button>
            </li>
            <li class="nav-tabs__tab" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'metadata'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'metadata'" title="{{ 'Metadata' | translate }}"><span translate>Metadata</span></button>
            </li>
            <li class="nav-tabs__tab" ng-show="showRelatedTab" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'related'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'related'" title="{{ 'Duplicates' | translate }}"><span translate>Duplicates</span></button>
            </li>
            <li class="nav-tabs__tab" ng-show="showHistoryTab" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'history'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'history'" title="{{ 'Item history' | translate }}" translate>Item history</button>
            </li>
            <li class="nav-tabs__tab" ng-show="links.length" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'used'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'used'"  title="{{ 'Used' | translate }}">{{ 'Used' | translate }} <span class="badge">{{ links.length }}</span></button>
            </li>
            <li class="nav-tabs__tab" ng-show="isAssigned" ng-class="{'nav-tabs__tab--active': vm.current_tab === 'assignment'}" role="tab">
                <button class="nav-tabs__link" ng-click="vm.current_tab = 'assignment'"  title="{{ 'Assignment' | translate }}" translate>Assignment</button>
            </li>
        </ul>
        <button ng-click="close()" class="icn-btn close-preview" aria-label="{{ 'Close preview' | translate }}">
            <i class="icon-close-small"></i>
        </button>
    </header>
    <div class="content">
        <div ng-if="vm.current_tab === 'content'" sd-media-preview data-item="item" class="sd-wrap-helper"></div>
        <div ng-if="vm.current_tab === 'metadata'" sd-media-metadata data-item="item" class="sd-wrap-helper"></div>
        <div ng-if="vm.current_tab === 'related' && showRelatedTab" class="preview-tab--enable-scrolling">
            <sd-related-view class="sd-display--block sd-padding--3" item="item" related-items="relatedItems"></sd-related-view>
        </div>
        <div ng-if="vm.current_tab === 'history' && showHistoryTab" sd-versioning-history data-item="item" class="sd-wrap-helper"></div>
        <div ng-if="vm.current_tab === 'used' && links.length" sd-media-used data-item="item" class="sd-wrap-helper" data-links="links"></div>
        <div ng-if="vm.current_tab === 'assignment' && isAssigned" sd-assignment-preview data-item="item" class="sd-wrap-helper"></div>
    </div>
</div>