<div data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_ADMIN)">
    <div style="display: none;" data-bind="visible: canSnapshot() && settings.webcam_ffmpegPath()">
        <div class="alert" data-bind="visible: isPrinting()">
            {{ _('Take note that timelapse configuration is disabled while your printer is printing.') }}
        </div>

        <h1>{{ _('Timelapse Configuration') }}</h1>

        <form class="form-horizontal" onsubmit="return false;">
            <div class="control-group">
                <label class="control-label" for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
                <div class="controls">
                    <select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: !isPrinting()">
                        <option value="off">{{ _('Off') }}</option>
                        <option value="timed">{{ _('Timed') }}</option>
                        <option value="zchange">{{ _('On Z Change') }}</option>
                    </select>
                    <span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-info">{{ _('Note') }}</span> {% trans %}Does not work when printing from the printer's SD Card (no way to detect the change in Z reliably). Use "Timed" mode for those prints instead.{% endtrans %}</span>
                </div>
            </div>

            <div id="webcam_timelapse_mindelay" class="control-group" data-bind="visible: timelapseType() == 'zchange'">
                <label class="control-label" for="webcam_timelapse_minDelay">{{ _('Minimum interval') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" min="1" class="input-mini" id="webcam_timelapse_minDelay" data-bind="value: timelapseMinDelay, valueUpdate: 'afterkeydown', enable: !isPrinting()">
                        <span class="add-on">{{ _('sec') }}</span>
                    </div>
                    <span class="help-block">{{ _('OctoPrint will rate limit snapshots to this minimum interval. This it to prevent against performance issues with vase mode/continuous z prints.') }}</span>
                </div>
            </div>

            <div id="webcam_timelapse_timedsettings" class="control-group" data-bind="visible: intervalInputEnabled">
                <label class="control-label" for="webcam_timelapse_interval">{{ _('Snapshot interval') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" min="1" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: !isPrinting()">
                        <span class="add-on">{{ _('sec') }}</span>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="webcam_timelapse_fps">{{ _('Timelapse frame rate') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" min="1" class="input-mini" id="webcam_timelapse_fps" data-bind="value: timelapseFps, valueUpdate: 'afterkeydown', enable: !isPrinting() && timelapseTypeSelected()">
                        <span class="add-on">{{ _('fps') }}</span>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="webcam_timelapse_postRoll">{{ _('Timelapse post roll') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" min="0" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: !isPrinting() && timelapseTypeSelected()">
                        <span class="add-on">{{ _('sec') }}</span>
                    </div>
                    <span class="help-block">{{ _('OctoPrint will use the final picture to add this many seconds to the end of your rendered timelapse.') }}</span>
                </div>
            </div>

            <div id="webcam_timelapse_retractionsettings" class="control-group" data-bind="visible: timelapseType() == 'zchange'">
                <label class="control-label" for="webcam_timelapse_retractionZHop">{{ _('Retraction Z-Hop') }}</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="number" min="0.0" class="input-mini" id="webcam_timelapse_retractionZHop" data-bind="value: timelapseRetractionZHop, valueUpdate: 'afterkeydown', enable: !isPrinting()">
                        <span class="add-on">{{ _('mm') }}</span>
                    </div>
                    <span class="help-block">{{ _('Enter the retraction z-hop used in the firmware or the gcode file to trigger snapshots for the timelapse only if a real layer change happens. For this to work properly your retraction z-hop has to be different from your layerheight!') }}</span>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" data-bind="checked: persist"> {{ _('Save as default') }}
                        <span class="help-block">{{ _('Check this to make your selected timelapse mode and options persist across restarts.') }}</span>
                    </label>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <strong class="text-center text-block" data-bind="visible: saveButtonEnabled">{{ _('You have unsaved changes. Don\'t forget to save them.') }}</strong>
                    <button class="btn btn-primary btn-block" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save changes') }}</button>
                    <button class="btn btn-block" data-bind="click: reset, enable: resetButtonEnabled">{{ _('Reset to active configuration') }}</button>
                </div>
            </div>
        </form>
    </div>
    <div class="alert" style="display: none" data-bind="visible: !canSnapshot() || !settings.webcam_ffmpegPath()">
        <p><strong>{{ _('Timelapse not fully configured') }}</strong></p>
        <p data-bind="visible: !loginState.isAdmin()">{{ _('A working snapshot setup and/or the path to FFMPEG are missing. To have this fixed, get in touch with an administrator of this OctoPrint instance.') }}</p>
        <p data-bind="visible: loginState.isAdmin">{{ _('A working snapshot setup and/or the path to FFMPEG are missing. You can change both under "Settings" > "Webcam & Timelapse" and in the settings of your chosen webcam plugin. If you don\'t have a webcam or don\'t want to enable timelapse support you can also just disable it there.') }}</p>
        <p data-bind="visible: loginState.isUser"><small>
            <!-- ko if: canSnapshot -->
                <!-- ko if: snapshotDisplay -->
                {{ _('Currently configured snapshot (from default webcam)') }}: <span data-bind="text: snapshotDisplay"></span><br/>
                <!-- /ko -->
                <!-- ko ifnot: snapshotDisplay -->
                {{ _('Snapshots supported by default webcam') }}<br/>
                <!-- /ko -->
            <!-- /ko -->
            <!-- ko ifnot: canSnapshot -->
            {{ _('Currently configured default webcam cannot take snapshots') }}<br/>
            <!-- /ko -->
            {{ _('Currently configured path to FFMPEG') }}: <span data-bind="text: settings.webcam_ffmpegPath"></span>
        </small></p>
    </div>
</div>

<h1 data-bind="visible: renderProgressBarString">{{ _('Timelapse Render Progress') }}</h1>

<div id="render_progress" class="progress progress-text-centered" data-bind="visible: renderProgressBarString, css: { 'progress-striped' : renderAnimation, active : renderAnimation }">
    <div class="bar" data-bind="style: {width: renderProgressString() + '%'}"></div>
    <span class="progress-text-back" data-bind="css: { 'progress-text-front': (renderProgressString() >= 50), 'progress-text-back': (renderProgressString() < 50) }, text: renderProgressBarString()"></span>
</div>

<h1>{{ _('Finished Timelapses') }}</h1>

<div class="pull-right">
    <div class="btn-group">
        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('name'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }} ({{ _('ascending') }})</a></li>
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('date'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'date' ? 'visible' : 'hidden'}"></i> {{ _('Sort by date') }} ({{ _('descending') }})</a></li>
            <li><a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('size'); }"><i class="fas fa-check" data-bind="style: {visibility: listHelper.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }} ({{ _('descending') }})</a></li>
        </ul>
    </div>
</div>
<div class="pull-left" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_DELETE)">
    <div class="btn-group">
        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="far fa-square"></i> <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" data-bind="click: markFilesOnPage">{{ _('Select all on this page') }}</a></li>
            <li><a href="javascript:void(0)" data-bind="click: markAllFiles">{{ _('Select all') }}</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a></li>
        </ul>
    </div>
    <button class="btn btn-small" data-bind="click: removeMarkedFiles, enable: markedForFileDeletion().length > 0">{{ _('Delete selected') }}</button>
    <a class="btn btn-small" data-bind="css: { disabled: !enableBulkDownload() }, attr: { href: bulkDownloadButtonUrl }">{{_('Download selected')}}</a>
</div>
<table class="table table-hover table-condensed table-hover" id="timelapse_files">
    <thead>
    <tr>
        <th class="timelapse_files_checkbox"></th>
        <th class="timelapse_files_thumb">{{ _('Preview') }}</th>
        <th class="timelapse_files_details">{{ _('Details') }}</th>
        <th class="timelapse_files_action">{{ _('Action') }}</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: listHelper.paginatedItems">
    <tr data-bind="attr: {title: name}">
        <td class="timelapse_files_checkbox"><input type="checkbox" data-bind="value: name, checked: $root.markedForFileDeletion, invisible: !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_DELETE)()"></td>
        <td class="timelapse_files_thumb">
            <div class="thumb" data-bind="css: { letterbox: $data.thumbnail }">
                <!-- ko if: $data.thumbnail -->
                <img data-bind="attr:{src: thumbnail}" loading="lazy" />
                <!-- /ko -->
                <a href="javascript:void(0)" data-bind="css: {disabled: !$root.isTimelapseViewable($data)}, click: $root.showTimelapsePreview"></a>
            </div>
        </td>
        <td class="timelapse_files_details">
            <p class="name" data-bind="text: name"></p>
            <p class="detail">{{ _('Recorded:') }} <span data-bind="text: formatTimeAgo(timestamp)"/></p>
            <p class="detail">{{ _('Size:') }} <span data-bind="text: size"/></p>
        </td>
        <td class="timelapse_files_action">
            <div class="btn-group action-buttons">
                <div href="javascript:void(0)" class="btn btn-mini" data-bind="click: function() { $parent.removeFile($data.name); }, css: {disabled: !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_DELETE)() }"><i class="far fa-trash-alt"></i></div>
                <a href="javascript:void(0)" class="btn btn-mini" data-bind="css: {disabled: !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_DOWNLOAD)()}, attr: { href: ($root.loginState.hasPermission($root.access.permissions.TIMELAPSE_DOWNLOAD)) ? $data.url : 'javascript:void(0)' }"><i class="fas fa-download"></i></a>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<div class="pagination pagination-mini pagination-centered">
    <ul>
        <li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="javascript:void(0)" data-bind="click: listHelper.prevPage">«</a></li>
    </ul>
    <ul data-bind="foreach: listHelper.pages">
        <li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="javascript:void(0)" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
    </ul>
    <ul>
        <li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="javascript:void(0)" data-bind="click: listHelper.nextPage">»</a></li>
    </ul>
</div>
<small data-bind="visible: bulkDownloadUrlTooLong"><i class="fa fa-warning"></i> {{ _('Too many files selected to download at once. Reduce number of files to enable download button.') }}</small>


<div data-bind="visible: unrenderedListHelper.allSize">
    <div><small><a href="javascript:void(0)" class="muted" onclick="$(this).children().toggleClass('fa-caret-right fa-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="fas fa-caret-right"></i> {{ _('Unrendered Timelapses') }}</a></small></div>
    <div class="hide">
        <div class="pull-left" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_MANAGE_UNRENDERED)">
            <div class="btn-group">
                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="fas fa-square"></i> <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)" data-bind="click: markUnrenderedOnPage">{{ _('Select all on this page') }}</a></li>
                    <li><a href="javascript:void(0)" data-bind="click: markAllUnrendered">{{ _('Select all') }}</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)" data-bind="click: clearMarkedUnrendered">{{ _('Clear selection') }}</a></li>
                </ul>
            </div>
            <button class="btn btn-small" data-bind="click: removeMarkedUnrendered, enable: markedForUnrenderedDeletion().length > 0">{{ _('Delete selected') }}</button>
        </div>
        <table class="table table-striped table-hover table-condensed table-hover" id="timelapse_unrendered">
            <thead>
            <tr>
                <th class="timelapse_unrendered_checkbox"></th>
                <th class="timelapse_unrendered_name">{{ _('Name') }}</th>
                <th class="timelapse_unrendered_count">{{ _('Frames') }}</th>
                <th class="timelapse_unrendered_size">{{ _('Size') }}</th>
                <th class="timelapse_unrendered_action">{{ _('Action') }}</th>
            </tr>
            </thead>
            <tbody data-bind="foreach: unrenderedListHelper.paginatedItems">
            <tr data-bind="attr: {title: name}">
                <td class="timelapse_unrendered_checkbox"><input type="checkbox" data-bind="value: name, checked: $root.markedForUnrenderedDeletion, invisible: !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSTIMELAPSE_MANAGE_UNRENDEREDE_DELETE)()"></td>
                <td class="timelapse_unrendered_name" data-bind="text: name"></td>
                <td class="timelapse_unrendered_count" data-bind="text: count"></td>
                <td class="timelapse_unrendered_size" data-bind="text: size"></td>
                <td class="timelapse_unrendered_action">
                    <span data-bind="visible: processing"><i class="fas fa-sync fa-spin"></i></span>
                    <span data-bind="visible: !processing"><a href="javascript:void(0)" title="{{ _('Delete unrendered timelapse')|edq }}" class="far fa-trash-alt" data-bind="click: function() { $parent.removeUnrendered($data.name); }, css: {disabled: !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_MANAGE_UNRENDERED)()}"></a>&nbsp;|&nbsp;<a href="javascript:void(0)" title="{{ _('Render timelapse')|edq }}" class="fas fa-video" data-bind="click: function() { if (!$root.isBusy()) { $parent.renderUnrendered($data.name); } else { return; } }, css: {disabled: $root.isBusy() || !$root.loginState.hasPermissionKo($root.access.permissions.TIMELAPSE_ADMIN)()}"></a></span>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagination pagination-mini pagination-centered">
            <ul>
                <li data-bind="css: {disabled: unrenderedListHelper.currentPage() === 0}"><a href="javascript:void(0)" data-bind="click: unrenderedListHelper.prevPage">«</a></li>
            </ul>
            <ul data-bind="foreach: unrenderedListHelper.pages">
                <li data-bind="css: { active: $data.number === $root.unrenderedListHelper.currentPage(), disabled: $data.number === -1 }"><a href="javascript:void(0)" data-bind="text: $data.text, click: function() { $root.unrenderedListHelper.changePage($data.number); }"></a></li>
            </ul>
            <ul>
                <li data-bind="css: {disabled: unrenderedListHelper.currentPage() === unrenderedListHelper.lastPage()}"><a href="javascript:void(0)" data-bind="click: unrenderedListHelper.nextPage">»</a></li>
            </ul>
        </div>
    </div>
</div>
