<!--===========================================
    DETAIL
    ===========================================-->

<!-- Detail Header bar -->

<!-- Thumbnail header -->
<script type="text/html" id="thumbnail-header-template">
    <div class="thumbnail-header">
        <div class="thumbnail-header-nowrap">
            <div class ="creative-cloud-logo"></div>
            <a class="back-to-files"></a>
            <div class="header-separator"></div>
            <span class="file-name"><%= imgdata.originalFile %></span>
        </div>
    </div>
</script>

<!-- notification bar -->
<script type="text/html" id="notification-bar-template">
    <div class="notification-bar">
        <div class="notification-nowrap"><%= messageText %></div>
    </div>
</script>


<!-- Selection Toolbar -->
<script type="text/html" id="toolbar-template">
    <div class="selection-controlbar">
        <!--div class="arrow-right"%></div-->
        <div class="properties-panel vertical-header-center">
            <div class="header-separator"></div>
            <a id="psdInspectTab" class="details-anchor styles-label"></a>
            <a id="psdLayersTab" class="details-anchor layers-label"></a>
            <div class="header-separator hide_less_space"></div>  
        </div>
        <div class='keyboard-shortcut-container vertical-header-center hide_less_space'>      
            <div class="keyboard-shortcut-guide settings-logo" title='<%-translate("KEYBOARD_SHORTCUTS_GUIDE")%>'></div>
        </div>    
    </div>
</script>

<!-- Zoom Controls -->
<script type="text/html" id="zoom-controls-template">
    <div class="header-separator hide-without-layer-comp"></div>
    <span class="file-dim hide_less_space"><%= imgdata.bounds.right %> x <%= imgdata.bounds.bottom %></span>
        <% if (window.dwPSDExtractManager.shouldHandleLangSpecificCSS()) { %>
            <div class="zoom-fit-button languageSpecificFitHide" title='<%-translate("ZOOM_WIDTH_VIEW")%>'><%-translate("FIT")%></div>
        <% } else { %>
    <div class="zoom-fit-button" title='<%-translate("ZOOM_WIDTH_VIEW")%>'><%-translate("FIT")%></div>
        <% } %>    
    <div class="zoom-input topcoat-text-input" title='<%-translate("ALT_ZOOM_IN_OUT")%>'>100%</div>
    <span class="dropdown">
        <span class="dropdown-btn zoom-value">
        </span>
    </span>
</script>

<!-- LayerComp Controls -->
<script type="text/html" id="layer-comps-template">
    <div id="layerCompDropdown" class="layer-comp-select">
        <div class="label" title="<%-layerComps[currentIndex].get('name')%>"><%-layerComps[currentIndex].get('name')%></div>
        <span class="layerCompIndexLabel"><%-currentIndex + 1%> <%-translate("OF")%> <%-layerComps.length%></span>
        <% _.each(layerComps, function(layerComp) { %>
        <ul class="layerCompDropdownItem">
            <li title="<%-layerComp.get('name')%>"><a id="<%-layerComp.get('id')%>" href="#"><%-layerComp.get('name')%></a></li>
        </ul>
        <% }); %>
    </div>
</script>

<!-- Detail Panel -->
<script type="text/html" id="detail-panel-template">
    <div class="tabs dark media-container remove-display" id="detail-panel">
        <section id="psdInfoSection" role="tab" class="active"></section>
        <section id="psdInspectSection" role="tab"></section>
        <% if (loggedIn) { %>
        <section id="psdAssetsSection" role="tab"></section>
        <% } %>
    </div>
</script>

<!-- Help panel -->
<script type="text/html" id="help-dialog-template">
    <div class="keystroke-window-overlay" style="display:none;">
        <div class="keystroke-window-wrapper">
            <div class="keystroke-header">
                <span class=
                "keystroke-header-title"><%-translate("SHORTCUTS")%></span>
            </div>

            <div class="keystroke-main-col">
                

                <div class="keystroke-item keystroke-separator">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">Cmd</a>/<a class=
                        "keystroke-item-key">Ctrl</a> <%-translate("OR")%> <a class="keystroke-item-key">Shift</a> +<a class="keystroke-item-key">Click</a>
                    </div><span class="keystroke-item-title"><%-translate("MULTI_SELECT")%></span>

                    <p class="keystroke-item-text"><%-translate("SELECT_OR_DESELECT_LAYER")%></p>
                </div>

                <div class="keystroke-item keystroke-separator">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">X</a>
                    </div><span class="keystroke-item-title"><%-translate("TOGGLE_MEASUREMENT_TOOLTIP")%></span>

                    <p class="keystroke-item-text"><%-translate("TOGGLE_MEASUREMENT_TOOLTIP_ON_HOVER")%></p>
                </div>

                <div class="keystroke-item">
                    <div class="keystroke-item-keys"><a class="keystroke-item-key">Alt</a> + <a class="keystroke-item-key">-</a>/<a class="keystroke-item-key">+</a></div><span class="keystroke-item-title"><%-translate("ZOOM")%></span>

                    <p class="keystroke-item-text"><%-translate("ZOOM_PREVIEW_CANVAS_IN_OUT")%></p>
                </div>
                    
                <div class="keystroke-item keystroke-separator">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">Cmd</a>/<a class="keystroke-item-key">Ctrl</a> + <a class="keystroke-item-key">0</a>
                    </div><span class="keystroke-item-title"><%-translate("ZOOM_TO_100")%></span>
                    <p class="keystroke-item-text"><%=translate("RESET_ZOOM_LEVEL_TO_100_OF_FILE_RESOLUTION")%></p>
                </div>
                    
                <div class="keystroke-item keystroke-separator">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">E</a>
                    </div><span class="keystroke-item-title"><%-translate("EYEDROPPER_TOOL")%></span>

                    <p class="keystroke-item-text"><%-translate("ALLOW_EXTRACTION_PIXEL_LEVEL_COLOR_VALUE")%></p>
                </div>


                <div class="keystroke-item">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">&larr;</a>
                    </div><span class="keystroke-item-title"><%-translate("SELECT_PARENT_LAYER")%></span>

                    <p class="keystroke-item-text"><%=translate("PRESSING_LEFT_ARROW")%></p>
                </div>

                <div class="keystroke-item">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">&rarr;</a>
                    </div><span class="keystroke-item-title"><%-translate("SELECT_FIRST_CHILD")%></span>

                    <p class="keystroke-item-text"><%=translate("PRESSING_RIGHT_ARROW")%></p>
                </div>

                <div class="keystroke-item keystroke-separator">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">&darr;</a><a class=
                        "keystroke-item-key">&uarr;</a>
                    </div><span class="keystroke-item-title"><%-translate("NEXT_OR_PREVIOUS_SIBLING_LAYER")%></span>

                    <p class="keystroke-item-text"><%=translate("SELECT_NEXT_OR_PREVIOUS_SIBLING_LAYER")%></p>
                </div>

                <div class="keystroke-item">
                    <div class="keystroke-item-keys">
                        <a class="keystroke-item-key">Esc</a>
                    </div><span class="keystroke-item-title"><%-translate("CLEAR_OR_EXIT")%></span>

                    <p class="keystroke-item-text"><%=translate("PRESSING_QUOT_OR_ESC_QUOT")%></p>
                </div>
            </div>
        </div>
    </div>
</script>


<!--===========================================
    INSPECT
    ===========================================-->

<!-- Panel -->
<script type="text/html" id="psd-auto-extracted-items-template">
    <div>
        <h4 class='info-heading'><%-translate("FONTS")%></h4>
        <ul class="font-list sub-pane"></ul>
        <h4 class='info-heading'><%-translate("COLORS")%></h4>
        <ul class="solid-color-list sub-pane"></ul>
        <h4 class='info-heading'><%-translate("GRADIENTS")%></h4>
        <ul class="gradient-list sub-pane"></ul>
    </div>
</script>

<script type="text/html" id="psd-derived-assets-list-template">
    <div>
        <h6><%=translate("EXTRACTED_ASSETS") + " - <i>" + translate("CLICK_TO_DOWNLOAD") + "</i>"%></h6>
        <ul class="derived-assets-list"></ul>
    </div>
</script>

<!-- CSS Property -->
<script type="text/html" id="css-color-item-template">
    <li>
        <span class="property">color:</span><span class="color-chip" style="background-color: <%= value %>;"></span> <span class="value"><%= value %>;</span>
    </li>
</script>

<!-- CSS Message Select Single Item -->
<script type="text/html" id="css-message-select-single-item-template">
    <li class="css-properties-message"
        <%-translate("SELECT_SINGLE_LAYER_IN_PSD_TO_SEE_CSS_PROPERTIES")%>
    </li>
</script>


<!-- Colors -->
<script type="text/html" id="color-list-item-template">
    <li>
        <div class="color-chip"></div>
    </li>
</script>

<script type="text/html" id="dropper-item-template">
    <li class="dropper-item" title='<%-translate("COLOR_PICKER")%>'>
        <div class="color-chip"><div class="dropper"></div></div>
    </li>
</script>

<!-- Fonts -->
<script type="text/html" id="font-family-list-item-template">
    <li class="font-family-list-item">
        <div class="arrow"></div>
        <a class="typekit-anchor" target="_blank" title='<%-translate("FIND_FONT_ON_TYPEKIT")%>'></a>
        <p class="font-family-name"><%-get('name')%></p>
        <div class="font-face-count"><p></p></div>
        <div style="clear:both;"></div>
        <ul class="font-face-list"></ul>
    </li>
</script>

<script type="text/html" id="font-face-list-item-template">
    <li class="font-face-list-item">
        <p class="font-face-name"><%-fontFace%></p>
        <ul>
            <% _.each(styles, function(textStyle){ %>
                <li class="text-style-size"><p><%-convert(textStyle.get('style').get('size'))%></p></li>
            <% }); %>
        </ul>
    </li>
</script>

<!-- Assets -->
<script type="text/html" id="derived-asset-list-item-template">
    <li class="derived-asset-list-item" title="<%-name%>">
        <div class="image-wrapper">
            <a href="#">
                <div style="background: url('<%- graphite.serverAPI.getDerivedRenditionURL(guid) %>') center center no-repeat; background-size: contain;"></div>
            </a>
        </div>
        <h5 class="asset-label" title="<%-name%>"> <%-name%> </h5>
        <div class="del-button" title='<%-translate("DELETE_ASSET")%>'>×</div>
    </li>
</script>

<!--===========================================
    LAYERS
    ===========================================-->

<!-- Layer Group -->
<script type="text/html" id="layer-group-list-item-template">
    <div class="layer-group-item closed">
        <div class="layer-group-header">
            <div class="layer-bg"></div>
            <div class="visible-button layer-group"></div>
            <div class="folder"></div>
            <div class="image-wrapper">
                <img src="<%- graphite.serverAPI.getLayerURL(psdGuid, layerId) %>" class="preview">
            </div>
            <h5 class="layer-group-label" title="<%- layerName %>"> <%- layerName %></h5>
            <div class="export-buttons">
                <span class="asset-button"></span>
            </div>
        </div>
        <div class="children-list">
            <div class="children-list-list">
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="layer-group-list-item-spritesheet-template">
    <div class="layer-group-item closed">
        <div class="layer-group-header">
            <div class="layer-bg"></div>
            <div class="visible-button layer-group"></div>
            <div class="folder"></div>
            <div class="image-wrapper">
                <canvas id="sprite_preview" class="preview" width="40" height="30"></canvas>
                <div class="preview-warning"></div>
            </div>
            <h5 class="layer-group-label" title="<%- layerName %>"> <%- layerName %></h5>
            <div class="export-buttons">
                    <span class="asset-button"></span>
            </div>
        </div>
        <div class="children-list">
            <div class="children-list-list">
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="layer-group-list-item-no-children-template">
    <div class="layer-group-item closed">
        <div class="layer-group-header">
            <div class="layer-bg"></div>
            <div class="visible-button layer-group"></div>
            <div class="folder"></div>
            <div class="image-wrapper">
            </div>
            <h5 class="layer-group-label" title="<%- layerName %>"> <%- layerName %></h5>
            <div class="export-buttons">
                <span class="asset-button"></span>
            </div>
        </div>
        <div class="children-list">
            <div class="children-list-list">
            </div>
        </div>
    </div>
</script>

<!-- Layer -->
<script type="text/html" id="layer-list-item-template">
    <div class="layer-item">
        <div class="layer-bg"></div>
        <div class="visible-button"></div>
        <div class="image-wrapper">
            <canvas id="sprite_preview" class="preview" width="40" height="30"></canvas>
            <div class="preview-warning"></div>
        </div>
        <h5 class="layer-label" title="<%- layerName %>"> <%- layerName %> </h5>
        <div class="export-buttons">
            <span class="asset-button"></span>
        </div>
    </div>
</script>


<!--===========================================
    POPUPS
    ===========================================-->

<!-- Base -->
<script type="text/html" id="popup-template">
    <div class="popup-contents"></div>
    <div class="notch"></div>
</script>

<!-- Copy CSS popup properties list -->

<script type="text/html" id="css-copy-popup-group-item-template">
    <div class="css-properties-group">
        <% _.each(propertyItems, function(propertyItem, index){ %>
            <div class="css-property-item">
                <input type = "checkbox" id="<%= key %><%= index %>" class="copy-css-check">
                <label class="copy-css-label" for="<%= key %><%= index %>">
                    <span class="propertyItemText property-name"><%= propertyItem.property%></span>
                    <span class="propertyItemText css-colon">:</span>
                    <span title='<%= propertyItem.value%>' class="propertyItemText property-value"><%= propertyItem.value%></span>
                    <span class="propertyItemText css-semi-colon">;</span>
                </label>
            </div>
        <% }); %>
    </div>
</script>

<script type="text/html" id="css-copy-popup-single-item-template">
    <div class="css-properties-group">
        <% _.each(propertyItems, function(propertyItem){ %>
            <div class="css-property-item">
                <span id='single-property-name' class="propertyItemText property-name"><%= propertyItem.property%></span>
                <span class="propertyItemText css-colon">:</span>
                <span title='<%= propertyItem.value%>' class="propertyItemText property-value"><%= propertyItem.value%></span>
                <span class="propertyItemText css-semi-colon">;</span>
            </div>
        <% }); %>
    </div>
</script>

<script type="text/html" id="css-copy-popup-select-all-option-template">
    <div class="css-properties-group">
        <div class="css-property-item">
            <input id="select-all-check" type = "checkbox" class="select-all-check">
            <label for="select-all-check" class="select-all-text"><%-translate("SELECT_ALL")%></label>
        </div>
    </div>
</script>


<!-- Color Chip popup -->
<script type="text/html" id="color-chip-popup-template">
    <div class="dropdown">
        <div class="dropdown-btn color-format">
            <%-colorFormat%>
        </div>
    </div>
    <textarea class="topcoat-textarea" readonly>rgba(100,100,100)</textarea>
</script>

<script type="text/html" id="alpha-list-popup-template">
    <div class="alpha-list">
        <p class="opacities-label"><%-translate("OPACITIES")%>:</p>
        <ul>
            <% _.each(alphas, function(alpha){ %>
            <li class="color-alpha"><p><%-alpha%></p></li>
            <% }); %>
        </ul>
    </div>
</script>

<!-- Extract Asset -->
<script type="text/html" id="extract-asset-template">
    <h4 class="title"><%-translate("FOLDER")%></h4>
    <span class="close-button"></span>
    <div id="popup-browse-folder-container">
        <input type="text" class="topcoat-text-input folder-name-input" tabindex="1">
        <div id="folder-browse-button" title='<%-translate("BROWSE_FOR_FOLDER")%>' class="folder" tabindex="2"></div>
    </div>
    <h4 class="file-save-as"><%-translate("SAVE_AS")%></h4>
    <div id="popup-preview-image-container">
        <div class="image-wrapper">
            <canvas id="sprite_preview" class="preview" width="52" height="40"></canvas>
        </div>
        <input type="text" class="topcoat-text-input file-name-input" tabindex="3">
        <span id="extension-text"><%- fileExtension %></span>
    </div>
    <div class="options">
        <div class="image-type-parent">
            <input type="radio" name="imagetype" value="png8" tabindex="4"/>
            <p>PNG 8 Alpha</p>
        </div>
        <div class="image-type-parent">
            <input type="radio" name="imagetype" value="png32" tabindex="5"/>
            <p>PNG 32</p>
        </div>
        <div class="image-type-parent">
            <input type="radio" name="imagetype" value="jpeg" tabindex="6" checked />
            <p>JPG</p>
        </div>
    </div>
    <div class="subtitle"><%-translate("QUALITY")%></div>
    <div class="optimize clearfix">
        <input type="text" tabindex="8" class="topcoat-text-input quality-percentage" value="80" />
        <input type="range" class="topcoat-range quality-range" value="80" tabindex="7" />
    </div>
    
    <div class="popup-footer clearfix">
        <div class="scale clearfix <%- settings.get('scaleExtractedAssets') ? '' : 'disabled'%>" title='<%-translate("EXTRACT_ASSET_SPECIFIED_SCALE_FACTOR")%>'>
            <div id="scalecheck-parent">
                <input type="checkbox" tabindex="9" name="scalecheck" id="scalecheck" class="scale-enable" value="checkbox" <%- settings.get('scaleExtractedAssets') ? 'checked' : ''%> />
            </div>    
            <label for="scalecheck"><%-translate("SCALE_AT")%></label>
            <input type="text" tabindex="-1" class="topcoat-text-input scale-factor" value="<%- parseFloat(settings.get('assetScaleFactor').toFixed()) %>x" />
        </div>
        <button id="downloadBtn" tabindex="11" class="topcoat-button--cta"><%-translate("SAVE")%></button>
    </div>
    <div class="notch"></div>
</script>


<!-- Extract Code -->
<script type="text/html" id="extract-code-template">
    <span class="close-button"></span>
    <span id='font-copy-button' class="copyable-button"></span>
    <div id="copy-css-groups-container"></div>
    <div class="notch"></div>
</script>

<!-- Layer Thumb -->
<script type="text/html" id="layer-thumb-popup-template">
    <div class="layer-thumb">
        <canvas class="sprite_preview preview" ></canvas>
        <span id="layerWarningMessage" style="display: none"><%-translate("WARNING_LAYER_INCOMPATIBLE_GRAPHIC_OPTION_BLEND_MODE")%></span>
    </div>
</script>

<!-- Measurement offsets box -->
<script type="text/html" id="measurement-offsets-box-template">
    <div id="measurementOffsetsBox" class="measurementOffsetsBox">
        <canvas id="measurementOffsetsCanvas" class="measurementOffsetsCanvas">
        </canvas>
    </div>
</script>

<!-- Measurement info popup and tooltip-->
<script type="text/html" id="measurement-tooltip-template">
    <div id="measurementTooltipInfo" class="measurementTooltip">
        <div class="measurementElementInfoDim">W: 0 <br/>H: 0</div>
        <div class="measurementElementInfoPos">X: 0 <br/>Y: 0</div>
    </div>
</script>

<!-- Measurement info popup and tooltip-->
<script type="text/html" id="intercept-binary-template">
    <div id="interceptPopupBinary">
        <%-translate("WORK_AS_EXPECTED")%>
        <div class="popup-footer"><span id="interceptYesLink" class="popup-button"><%-translate("YES")%></span> <span id="interceptNoLink" class="popup-button"><%-translate("NO")%></span>
        </div>
        <i id="interceptCloseLink" class="popup-close">&times;</i>
    </div>
</script>

<!-- Measurement info popup and tooltip-->
<script type="text/html" id="measurement-popup-template">
    <div id="measurementPopupInfo">
        <div class="measurementElementCopyControls">
            <% if (window.dwPSDExtractManager.shouldHandleLangSpecificCSS()) { %>
                <span id="copyCSSLink" class="copyable languageSpecificCopyable"><%-translate("COPY_CSS")%></span>
                <span id="copyTextLink" class="copyable languageSpecificCopyable"><%-translate("COPY_TEXT")%></span>
            <% } else { %>
                <span id="copyCSSLink" class="copyable"><%-translate("COPY_CSS")%></span>
                <span id="copyTextLink" class="copyable"><%-translate("COPY_TEXT")%></span>
            <% } %>
        </div>
        <% if (window.dwPSDExtractManager.shouldHandleLangSpecificCSS()) { %>
            <div id="downloadLink" class="measurementElementAssetExtract languageSpecificDownloadButton" title='<%-translate("EXTRACT_ASSET")%>'></div>
        <% } else { %>
                <div id="downloadLink" class="measurementElementAssetExtract" title='<%-translate("EXTRACT_ASSET")%>'></div>
        <% } %>    
        <div id="copy-css-groups-container"></div>
    </div>
</script>

<!-- Measurement offsets banner -->
<script type="text/html" id="measurement-offsets-banner-template">
    <div id="measurementOffsetsBanner" class="measurementOffsetsBanner measurementPopup popup measurementTooltip">
        <span id="measurementOffsetX" class="noWrap copyable"><i class="xOffsetIcon"></i>20</span><br/>
        <span id="measurementOffsetY" class="noWrap copyable"><i class="yOffsetIcon"></i>200</span>
        <div class="notch"></div>
    </div>
</script>

<!--===========================================
    PREVIEW
    ===========================================-->

<!-- PSD -->
<script type="text/html" id="psd-preview-template">
    <div class="center-helper" style="margin-bottom: <%- -(imgdata.bounds.bottom/2 + 50)%>px;"></div>
    <div class="preview-container" style="width: <%- imgdata.bounds.right %>px; height: <%- imgdata.bounds.bottom %>px;">
        <div style="width: <%- imgdata.bounds.right %>px; height: <%- imgdata.bounds.bottom %>px;" id="psdpreview_root"></div>
            <% if (localContent || layerCompId) { %>
                <img style="width: <%- imgdata.bounds.right %>px; height: <%- imgdata.bounds.bottom %>px;" id="tempPreview" class="tempPreview">
            <% } else { %>
                <img style="width: <%- imgdata.bounds.right %>px; height: <%- imgdata.bounds.bottom %>px;" id="tempPreview" class="tempPreview">
            <% } %>
        <iframe id="selection-overlay" src="selection-overlay.htm" style=" width: <%- imgdata.bounds.right %>px; height: <%- imgdata.bounds.bottom %>px;"></iframe>
    </div>
    <div class="spinner"></div>
</script>

<script type="text/html" id="psd-preview-layer-template">
    <canvas class="psd-layer" style="top: <%= bounds.top %>px; left: <%= bounds.left %>px;" ></canvas>
</script>

<script type="text/html" id="psd-preview-div-template">
    <div class="psd-layer-group" style="top: <%= bounds.top %>px; left: <%= bounds.left %>px; bottom: <%= bounds.bottom %>px; right: <%= bounds.right %>px;" >
        <canvas class="psd-layer-group preview"  ></canvas>
    </div>
</script>

<script type="text/html" id="psd-preview-div-sprite-sheet-template">
    <div class="psd-layer-group" style="top: <%= bounds.top %>px; left: <%= bounds.left %>px; bottom: <%= bounds.bottom %>px; right: <%= bounds.right %>px;" ></div>
</script>

<!-- Inspect callouts -->
<script type="text/html" id="inspect-color-callout-template">
    <div class="color-callout">
        <p class="alpha-value">1.0</p>
        <div class="callout-notch"></div>
    </div>
</script>

<script type="text/html" id="inspect-font-callout-template">
    <div class="font-callout">
        <p>T</p>
        <div class="callout-notch"></div>
    </div>
</script>

<!-- Measurements -->
<script type="text/html" id="measurement-overlay-template">
    <div id="measurementOverlay"></div>
</script>

<!-- Progress Pane -->
<script type="text/html" id="worker-progress-template">
    <div id="workerProgress">
        <div class="worker-status"><%-translate("PROCESSING")%></div>
        <div class="worker-progress-base"><div class="worker-progress-bar"></div></div>
        <div class="worker-status-tip"><%-translate("TIP")%></div>
    </div>
</script>

<!--===========================================
    MISC
    ===========================================-->

<script type="text/html" id="spritesheet-preferences">
    <div class="psd-preview-view">
    <%-translate("MIN_SHEETS")%>: <input type="text" name="minSheetCount" id="minSheetCount" size=10 placeHolder='<%-translate("DEFAULT")%>'><br>
    <%-translate("FORMAT")%>: <input type="text" name="format" id="format" size=10 placeHolder='<%-translate("DEFAULT")%>'><br>
    <%-translate("REDUCTION")%>: <input type="text" name"scale" id="scale" size=10 placeHolder='<%-translate("DEFAULT")%>'><br><br>
    <button id="apply" name="apply"><%-translate("APPLY")%></button>
    </div>
</script>

<script type="text/html" id="lens-template">
    <div class="lens" style="display: none;">
        <div class="inner">
            <canvas class="lens-grid" width="70" height="70"></canvas>
            <div class="center"></div>
        </div>
    </div>
</script>
