<template name="cineDialog">
    <div id="cineDialog">
        <h5>Cine Controls</h5>
        <div id="cineButtons">
            <a id="cineFirstButton" title="Skip to first image" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-fast-backward"></i>
            </a>
            <a id="cineBackButton" title="Previous image" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-step-backward"></i>
            </a>
            <a id="cineSlowPlaybackButton" title="Slow playback" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-backward"></i>
            </a>
            <a id="cinePlayButton" title="Play / Pause" class="cineButton" data-toggle="tooltip">
                {{#if isPlaying}}
                    <i class="fa fa-lg fa-pause"></i>
                    {{else}}
                    <i class="fa fa-lg fa-play"></i>
                {{/if}}
            </a>
            <a id="cineFastForwardButton" title="Increase playback speed" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-forward"></i>
            </a>
            <a id="cineNextButton" title="Next image" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-step-forward"></i>
            </a>
            <a id="cineLastButton" title="Skip to last image" class="cineButton" data-toggle="tooltip">
                <i class="fa fa-lg fa-fast-forward"></i>
            </a>
        </div>
        <div id="cineOptions">
            <div id="loopSection">
                <label>Loop?</label>
                <input type="checkbox" checked id="cineLoopCheckbox" />
            </div>
            <div id="fpsSection">
                <label>Cine Speed: <span id="fps">{{framerate}}</span></label>
                <input type="range" id="cineSlider" min="1" max="90" value="{{framerate}}"/>
            </div>
        </div>
    </div>
</template>
