<template name="longitudinalViewportOverlay">
    <div class="imageViewerViewportOverlay noselect {{#if gt numImages 1}}controlsVisible{{/if}}">
        {{#unless tagDisplaySpecified}}
            <div class="topleft dicomTag">
                <div>{{patientId}}</div>
                <div>{{patientName}}</div>
                <div>{{getGenderAndAge}}</div>
                <div class="icons-section">
                    {{#if linked}}
                        <svg class="icon-link">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-viewport-link"}}></use>
                        </svg>
                    {{/if}}
                    {{>imageViewportIcons this}}
                </div>
            </div>
            <div class="topcenter dicomTag">
                <div class='timepointName'>{{timepointName}}</div>
            </div>
            <div class="topright dicomTag">
                <div>{{seriesDescription}}</div>
                <div>{{studyInfo 'AccessionNumber'}}</div>
                <div>{{formatDA (studyInfo 'AcquisitionDate')}} {{formatTM (studyInfo 'AcquisitionTime')}}</div>
                <div>{{#if seriesNumber}}S: {{seriesNumber}}{{#if gt numImages 1}},{{/if}} {{/if}}{{#if gt numImages 1}}I: {{imageIndex}}/{{numImages}}{{/if}}</div>
            </div>
            <div class="bottomright dicomTag">
                <div class="stationName">{{studyInfo 'StationName'}}</div>
                <div class="manufacturerModel">{{studyInfo 'ManufacturersModelName'}}</div>
                <div class="institutionName">{{studyInfo 'InstitutionName'}}</div>
            </div>
            <div class="bottomleft dicomTag">
                <div>
                    <span>{{#if location}}Loc: {{formatNumberPrecision location 2}} mm{{/if}}</span>
                    <span>{{#if thickness}}Thick: {{formatNumberPrecision thickness 2}} mm{{/if}}</span>
                    <span>{{#if spacingBetweenSlices}}Spacing: {{formatNumberPrecision spacingBetweenSlices 2}} mm{{/if}}</span>
                </div>
                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 2}}x{{/if}}</div>
                <div>{{wwwc}}</div>
            </div>
        {{/unless}}

        {{#if tagDisplayRightOnly}}
            <div class="topright dicomTag">
                <div>{{formatPN patientName}}</div>
                <div>{{patientId}}</div>
                <div class='timepointName'>{{timepointName}}</div>
                <div>{{studyDescription}}</div>
                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
            </div>
            <div class="bottomright dicomTag">
                <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
                <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
                <div>{{#if frameRate}}{{formatNumberPrecision frameRate 2}} FPS{{/if}}</div>
                <div>{{imageDimensions}}</div>
                <div>{{seriesDescription}}</div>
                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
                <div class="compressionIndicator">{{compression}}</div>
                <div>{{wwwc}}</div>
            </div>
        {{/if}}

        {{#if tagDisplayLeftOnly}}
            <div class="topleft dicomTag">
                <div>{{formatPN patientName}}</div>
                <div>{{patientId}}</div>
                <div class='timepointName'>{{timepointName}}</div>
                <div>{{studyDescription}}</div>
                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
            </div>
            <div class="bottomleft dicomTag">
                <div>{{#if seriesNumber}}Ser: {{seriesNumber}}{{/if}}</div>
                <div>{{#if gt numImages 1}}Img: {{instanceNumber}} ({{imageIndex}}/{{numImages}}){{/if}}</div>
                <div>{{#if frameRate}}{{formatNumberPrecision frameRate 2}} FPS{{/if}}</div>
                <div>{{imageDimensions}}</div>
                <div>{{seriesDescription}}</div>
                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
                <div class="compressionIndicator">{{compression}}</div>
                <div>{{wwwc}}</div>
            </div>
        {{/if}}

        {{#if gt numImages 1}}
            {{>imageControls imageIndex=imageIndex numImages=numImages}}
        {{/if}}
    </div>
</template>
