<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-5-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.FORMAT%></div>
                </div>
                <div class="column-7-hand">
                    <div class="box">
                        <select class="export-format" tabindex="100">
                            <option value="png">PNG</option>
                            <option value="jpg">JPG</option>
                            <option value="png-8">PNG-8</option>
                            <option value="gif">GIF</option>
                            <option value="svg">SVG</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row transparency-row <% if (!transparencyEnabled) { %>hide<% } %>">
                <div class="offset-5-hand"></div>
                <div class="column-7-hand">
                    <div class="box">
                        <label class="checkbox transparency"><input type="checkbox" value="transparency"><div class="checkbox__checkmark"></div><%- Strings.TRANSPARENCY %></label>
                    </div>
                </div>
            </div>
            <div class="row quality-row <% if (!qualityEnabled) { %>hide<% } %>">
                <div class="column-5-hand center-hand bottom-hand">
                    <div class="box"><%- Strings.QUALITY %></div>
                </div>
                <div class="column-7-hand">
                    <div class="box">
                        <label class="input-select">
                            <input class="quality-text-input" type="text" value="<%=quality%>%" 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"><%=Strings.FONT_RENDERING_WARNING%></div>
                </div>
            </div>
        </fieldset>
        <fieldset class="image-size">
            <legend><%=Strings.IMAGE_SIZE%></legend>
            <div class="row">
                <div class="column-5-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.WIDTH%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="width" type="text" placeholder="<%=placeHolderWidth%>"  value="<%=width%>" tabindex="103" />
                    </div>
                </div>
                <div class="column-1-hand center-hand top-hand">
                    <div class="box label nowrap"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-5-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.HEIGHT%></div>
                </div>
                <div class="column-auto-hand">
                    <div class="box">
                        <input name="height" type="text" placeholder="<%=placeHolderHeight%>" value="<%=height%>" tabindex="104" />
                    </div>
               </div>
                <div class="column-1-hand center-hand top-hand">
                    <div class="box label nowrap"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-5-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.SCALE%></div>
                </div>
                <div class="column-7-hand">
                    <div class="box scale-editable-combobox">
                        <input name="scale" type="text" tabindex="105 "/>
                        <select class="scale-select">
                            <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-5-hand center-hand bottom-hand">
                    <div class="box label"><%=Strings.RESAMPLE%></div>
                </div>
                <div class="column-7-hand">
                    <div class="box">
                        <select class="select-interpolation" tabindex="106">
                            <option value="bicubic" selected><%=Strings.INTERPOLATION_BICUBIC%></option>
                            <option value="bicubicAutomatic"><%=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-5-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" placeholder=""  value="" tabindex="107" />
                    </div>
                </div>
                <div class="column-1-hand center-hand top-hand">
                    <div class="box label nowrap"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-5-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" placeholder="" value="" tabindex="108" />
                    </div>
               </div>
                <div class="column-1-hand center-hand top-hand">
                    <div class="box label nowrap"><%=Strings.PX%></div>
                </div>
            </div>
            <div class="row">
                <div class="column-12-hand center-hand bottom-hand">
                    <div class="box">
                        <button class="reset-button reset-canvas-dimensions" tabindex="109" disabled><span><%=Strings.RESET%></span></button>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>
