<template name="imageDownloadDialog">
    {{#dialogForm (extend this
        title='Download High Quality Image'
        class='themed'
        dialogClass='modal-lg'
        formClass='form-themed'
        confirmLabel='Download Image'
        confirmCallback=instance.getConfirmCallback
        cancelLabel='Cancel'
        id='imageDownloadDialog'
        schema=instance.schema
    )}}
        <h5>Please specify the dimensions, filename, and desired type for the output image.</h5>
        <div class="card-round">
            <div class="row m-t-2">
                <div class="col-lg-4">
                    <table class="full-width">
                        <tbody>
                            <tr>
                                <td class="text-right p-r-1 nowrap">Image width (px)</td>
                                <td>{{>inputNumber key='width' min="1" max="16384"}}</td>
                                <td class="p-l-1" rowspan="2">
                                    <button class="btn btn-secondary js-keep-aspect {{#if keepAspect}}active{{/if}}" title="Keep aspect ratio">
                                        <i class="fa fa-chain{{#unless keepAspect}}-broken{{/unless}}"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-right p-r-1 nowrap">Image height (px)</td>
                                <td>{{>inputNumber key='height' min="1" max="16384"}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-5">
                    <table class="full-width">
                        <tbody>
                            <tr>
                                <td class="text-right p-r-1">File name</td>
                                <td>{{>inputText key='name'}}</td>
                            </tr>
                            <tr>
                                <td class="text-right p-r-1">File type</td>
                                <td>{{>inputSelect key='type' hideSearch=true}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-3">
                    <table class="full-width">
                        <tbody>
                            <tr>
                                <td class="text-right" colspan="2">{{>inputCheckbox key='showAnnotations'}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="viewport-element hidden"></div>
        <div class="image-preview card-round m-t-2 text-center">
            <h4 class="m-t-0">Image Preview</h4>
            <img class="viewport-preview" />
        </div>
    {{/dialogForm}}
</template>
