<div class="icon-info tips<%if (errorMessage) { print(' active'); }%>" aria-label="<%- errorMessage %>"></div>
<div class="options active">
    <div class="option-section sizing">

        <fieldset class="file-format">
            <legend><%=Strings.FILE_SETTINGS%></legend>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.FORMAT%></div>
                </div>
                <div class="column-8-hand">
                    <div class="box">
                        <select class="export-format" tabindex="100">
                            <option value="png">PNG</option>
                            <option value="jpg">JPG</option>
                            <option value="gif">GIF</option>
                            <option value="svg">SVG</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row transparency-row <% if (!transparencyVisible) { %>hide<% } %>">
                <div class="offset-4-hand"></div>
                <div class="column-8-hand">
                    <div class="box">
                        <input type="checkbox" id="transparancy-checkbox" value="transparency" tabindex="101" />
                        <label class="checkbox transparency" for="transparancy-checkbox" ><%- Strings.TRANSPARENCY %></label>
                    </div>
                </div>
            </div>
            <div class="row smaller-file-row <% if (!smallerFileVisible) { %>hide<% } %>">
                <div class="offset-4-hand"></div>
                <div class="column-8-hand">
                    <div class="box">
                        <input type="checkbox" id="smaller-file-checkbox" value="smaller-file" tabindex="102" />
                        <label class="checkbox smaller-file" for="smaller-file-checkbox" ><%- Strings.SMALLER_FILE %></label>                        
                    </div>
                </div>
            </div>
            <div class="row quality-row <% if (!qualityVisible) { %>hide<% } %>">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%- Strings.QUALITY %></div>
                </div>
                <div class="column-8-hand">
                    <div class="box">
                        <label class="input-select">
                            <input class="quality-text-input" type="text" value="<%=quality%>" placeholder="<%=placeHolderQuality%>" tabindex="101" name="imageQuality" /><input type="button" class="percentage"/>
                            <div class="percentage-range">
                                <input class="quality-range-input psstyle-range" type="range" value="<%=quality%>" />
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="row svg-warning-row hide">
                <div class="column-1-hand center-hand bottom-hand">
                    <div class="box">
                        <div class="icon-warning tips active" aria-label="<%=Strings.FONT_RENDERING_TOOLTIP%>" />
                    </div>                    
                </div>
                <div class="column-11-hand">
                    <div class="box label svg-warning-label"><%=Strings.FONT_RENDERING_WARNING%></div>
                </div>
            </div>
        </fieldset>

        <fieldset class="image-size">
            <legend><%=Strings.IMAGE_SIZE%></legend>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label nowrap"><%=Strings.WIDTH%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="width" type="text" placeholder=""  value="<%=width%>" tabindex="103" />
                    <div class="rounding-warning-box width-rounding-tip hide">
                        <div class="icon-warning tips active rounding-tip" aria-label="<%=Strings.WRONG_DIMENSION_WARNING%>" />                        
                    </div>    
                    </div>
                </div>
                <div class="column-2-hand end-hand top-hand">
                    <div class="box label nowrap fill-width"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label nowrap"><%=Strings.HEIGHT%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="height" type="text" placeholder="" value="<%=height%>" tabindex="104" />
                    <div class="rounding-warning-box height-rounding-tip hide">
                        <div class="icon-warning tips active rounding-tip" aria-label="<%=Strings.WRONG_DIMENSION_WARNING%>" />                        
                    </div>                            
                    </div>
               </div>
                <div class="column-2-hand end-hand top-hand">
                    <div class="box label nowrap fill-width"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.SCALE%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box scale-editable-combobox">
                        <input name="scale" type="text" placeholder="<%=placeHolderScale%>" tabindex="105 "/>
                        <select class="scale-select" tabindex="106">
                            <option value="10">10%</option>
                            <option value="25">25%</option>
                            <option value="33.33">33%</option>
                            <option value="50">50%</option>
                            <option value="75">75%</option>
                            <option value="100" selected>100%</option>
                            <option value="125">125%</option>
                            <option value="150">150%</option>
                            <option value="200">200%</option>
                            <option value="300">300%</option>
                            <option value="400">400%</option>
                            <option value="500">500%</option>
                        </select>                        
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.RESAMPLE%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <select class="select-interpolation" tabindex="107">
                            <option value="bicubic"><%=Strings.INTERPOLATION_BICUBIC%></option>
                            <option value="bicubicAutomatic" selected><%=Strings.INTERPOLATION_BICUBICAUTO%></option>
                            <option value="bicubicSharper"><%=Strings.INTERPOLATION_BICUBICSHARP%></option>
                            <option value="bicubicSmoother"><%=Strings.INTERPOLATION_BICUBICSMOOTH%></option>
                            <option value="bilinear"><%=Strings.INTERPOLATION_BILINEAR%></option>
                            <option value="nearestNeighbor"><%=Strings.INTERPOLATION_NEAREST%></option>
                            <option value="preserveDetailsUpscale"><%=Strings.INTERPOLATION_PRESERVE%></option>
                        </select>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="canvas-size">
            <legend><%=Strings.CANVAS_SIZE%></legend>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.WIDTH%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="canvasWidth" type="text" value="" tabindex="108" />
                    </div>
                </div>
                <div class="column-2-hand end-hand top-hand">
                    <div class="box label nowrap fill-width"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-4-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.HEIGHT%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="canvasHeight" type="text" value="" tabindex="109" />
                    </div>
               </div>
                <div class="column-2-hand end-hand top-hand">
                    <div class="box label nowrap fill-width"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-12-hand center-hand bottom-hand">
                    <div class="box">
                        <button class="btn-small reset-canvas-dimensions" tabindex="110" disabled><%=Strings.RESET%></button>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="metadata">
            <legend><%=Strings.METADATA%></legend>
            <div class="row metadata-row">
                <div class="column-12-hand bottom-hand">
                    <div class="box metadata-box">
                        <input type="radio" class="metadata-radio" name="meta" id="none" tabindex="111" />
                        <label for="none" class="label-medium metadata"><%=Strings.NONE%></label>
                        <input type="radio" class="metadata-radio" name="meta" id="copy-and-contact" />
                        <label for="copy-and-contact" class="label-medium  metadata"><%=Strings.COPYRIGHT_AND_CONTACT%></label>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="colorspace">
            <legend><%=Strings.COLORSPACE%></legend>
            <div class="row">
                <div class="column-12-hand bottom-hand">
                    <div class="box colorspace-box">
                        <input type="checkbox" id="srgb-checkbox" value="srgb" tabindex="112" />
                        <label class="checkbox srgb" for="srgb-checkbox" ><%- Strings.CONVERT_SRGB %></label>
                        <input type="checkbox" id="embedcolorprofile-checkbox" value="embedcolorprofile" tabindex="113" />
                        <label class="checkbox embedcolorprofile" for="embedcolorprofile-checkbox" ><%- Strings.EMBED_COLOR_PROFILE %></label>
                    </div>
                </div>
            </div>
        </fieldset>

    </div>
</div>
