<template name="cineDialog">
    <dialog id="cineDialog">
        {{#form id='cineDialogForm' class=(getClassNames 'dialog-animated noselect') schema=instance.schema api=instance.api}}
            {{>inputHidden key='intervalId'}}
            <div class="button-close-container">
                <div class="button-close"><span aria-hidden="true">x</span></div>
            </div>
            <div class="cine-controls">
                <div class="btn-group">
                    {{#button class='btn' action='cineFirst' title='Skip to first image' disabled=(buttonDisabled)}}
                        <i class="fa fa-fast-backward"></i>
                    {{/button}}
                    {{#button class='btn' action='cinePrevious' title='Previous image' disabled=(buttonDisabled)}}
                        <i class="fa fa-step-backward"></i>
                    {{/button}}
                    {{#button class='btn' action='cineToggle' title='Play / Stop' class=(concat 'btn ' (valueIf isPlaying 'active' '')) disabled=(buttonDisabled)}}
                        {{#if isPlaying}}
                            <i class="fa fa-fw fa-stop"></i>
                        {{else}}
                            <i class="fa fa-fw fa-play"></i>
                        {{/if}}
                    {{/button}}
                    {{#button class='btn' action='cineNext' title='Next image' disabled=(buttonDisabled)}}
                        <i class="fa fa-step-forward"></i>
                    {{/button}}
                    {{#button class='btn' action='cineLast' title='Skip to last image' disabled=(buttonDisabled)}}
                        <i class="fa fa-fast-forward"></i>
                    {{/button}}
                </div>
            </div>
            <div class="cine-options">
                <div class="fps-section">
                    {{#inputRange key='framesPerSecond' class='p-a-0' labelClass='form-group m-a-0' labelAsDiv=true}}
                    {{/inputRange}}
                </div>
                <span id="fps">{{framerate}} fps</span>
            </div>
            <div class="cine-navigation">
                <div class="btn-group">
                    {{#button class='btn' disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}}
                        <i class="fa fa-toggle-up"></i>
                    {{/button}}
                    {{#button class='btn' disabled=(displaySetDisabled true) action='displaySetNext' title='Next display set'}}
                        <i class="fa fa-toggle-down"></i>
                    {{/button}}
                </div>
            </div>
        {{/form}}
    </dialog>
</template>
