<template name="viewportOverlay">
    <div class="imageViewerViewportOverlay noselect {{#if gt numImages 1}}controlsVisible{{/if}}">
        {{#unless tagDisplaySpecified}}
            <div class="topleft dicomTag">
                <div>{{formatPN patientName}}</div>
                <div>{{patientId}}</div>
                <div class='priorIndicator'>{{prior}}</div>
            </div>
            <div class="topright dicomTag">
                <div>{{studyDescription}}</div>
                <div>{{formatDA studyDate}} {{formatTM studyTime}}</div>
            </div>
            <div class="bottomright dicomTag">
                <div>{{#if zoom}}Zoom: {{formatNumberPrecision zoom 0}}%{{/if}}</div>
                <div class="compressionIndicator">{{compression}}</div>
                <div>{{wwwc}}</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>
                    <span>{{#if isValidNumber 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>{{seriesDescription}}</div>
            </div>
        {{/unless}}

        {{#if tagDisplayRightOnly}}
            <div class="topright dicomTag">
                <div>{{formatPN patientName}}</div>
                <div>{{patientId}}</div>
                <div class='priorIndicator'>{{prior}}</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='priorIndicator'>{{prior}}</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>
