<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>OctoPrint Recovery</title>

    <link rel="shortcut icon" href="{{ url_for('static', filename='img/tentacle-32x32.png') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='img/mask.svg') }}" color="#56BE37">
    <link rel="mask-icon-theme" href="{{ url_for('static', filename='img/mask-theme.svg') }}" color="#56BE37">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='img/apple-touch-icon-144x144.png') }}">

    <!-- le CSS -->

    <link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap.min.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap-responsive.min.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="vendor/font-awesome-5.15.1/css/all.min.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="vendor/font-awesome-5.15.1/css/v4-shims.min") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="css/recovery.css") }}">

    {% for url in theming %}
        <link rel="stylesheet" href="{{ url }}">
    {% endfor %}

    <!-- le javascript -->

    <script>
        var BASE_URL = "{{ url_for('index') }}";
        var LOGIN_URL = "{{ url_for('login', redirect=url_for('recovery'), permissions="ADMIN") }}";
        var LOCALE = "";
    </script>
    <script src="{{ url_for("static", filename="js/lib/jquery/jquery.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/knockout.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/sockjs.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/bootstrap/bootstrap.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/lodash.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/sprintf.min.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/babel.js") }}"></script>
    <script src="{{ url_for("static", filename="js/lib/moment-with-locales.min.js") }}"></script>

    {% assets "js_client" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}

    {% if g.locale %}<script type="text/javascript" src="{{ url_for('localeJs', locale=g.locale, domain='messages') }}"></script>{% endif %}

    <script src="{{ url_for("static", filename="js/app/helpers.js") }}"></script>
    <script src="{{ url_for("static", filename="js/recovery/recovery.js") }}"></script>
</head>
<body>
    <div id="navbar" class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-inner">
            <span class="brand">OctoPrint Recovery</span>
            <ul class="nav pull-right">
                <li><p class="navbar-text">Logged in as <strong data-bind="text: username"></strong> (<a href="javascript:void(0)" data-bind="click: logout">Logout</a>)</p></li>
            </ul>
        </div>
    </div>
    <div id="recovery" class="container">
        <div class="row-fluid">
            <div class="span3">
                <ul class="nav nav-list">
                    <li class="nav-header">{{ _('Navigation') }}</li>
                    <li><a href="#system-commands">{{ _('System commands') }}</a></li>
                    <li data-bind="visible: printerConnected"><a href="#printer-control">{{ _('Printer control') }}</a></li>
                    <li data-bind="visible: backupSupported"><a href="#backups">{{ _('Backups') }}</a></li>
                    <li><a href="#system-info">{{ _('System info') }}</a></li>
                </ul>
            </div>
            <div class="span9">
                <div data-bind="visible: !connected()" class="alert alert-error">{{ _('Server is currently offline.') }} <a href="javascript:void(0)" data-bind="click: reconnect">{{ _('Reconnect...') }}</a></div>
                <div data-bind="visible: known() && !permitted()" class="alert alert-error">{{ _('You lack admin permissions.') }}</div>

                <div style="margin-bottom: 2em">
                    <h1 id="system-commands">{{ _('System commands') }}</h1>
                    <!-- ko foreach: systemCommands -->
                    <button class="btn btn-block" data-bind="text: name, click: function() { $root.executeSystemCommand($data) }"></button>
                    <!-- /ko -->
                </div>

                <div data-bind="visible: printerConnected" style="margin-bottom: 2em">
                    <h1 id="printer-control">{{ _('Printer control') }}</h1>
                    <button class="btn btn-block" data-bind="visible: jobInProgress, click: cancelPrint">{{ _('Cancel print') }}</button>
                    <button class="btn btn-block" data-bind="click: disconnectPrinter">{{ _('Disconnect printer') }}</button>
                </div>

                <div data-bind="visible: backupSupported" style="margin-bottom: 2em">
                    <h1 id="backups">{{ _('Backup & Restore') }}</h1>
                    <small data-bind="visible: !restoreSupported()">{{ _('Online restore is not supported on your system.') }}</small>

                    <h2>{{ _('Create backup') }}</h2>
                    <form class="form-horizontal" onsubmit="return false;">
                        <div class="control-group">
                            <div class="controls">
                                <label class="checkbox">
                                    <input type="checkbox" data-bind="value: 'uploads', checked: excludeFromBackup"> {{ _('Exclude uploaded files & metadata from backup') }}
                                </label>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <label class="checkbox">
                                    <input type="checkbox" data-bind="value: 'timelapse', checked: excludeFromBackup"> {{ _('Exclude timelapses from backup') }}
                                </label>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="controls">
                                <button class="btn btn-primary" data-bind="enable: !workInProgress(), click: createBackup"><i class="fas fa-spinner fa-spin" data-bind="visible: workInProgress"></i> {{ _('Create backup now') }}</button>
                            </div>
                        </div>
                    </form>

                    <h2>{{ _('Existing backups') }}</h2>
                    <table data-bind="visible: backups().length > 0" class="table table-hover">
                        <thead>
                            <th>{{ _('Name') }}</th>
                            <th style="text-align: right">{{ _('Size') }}</th>
                            <th style="text-align: center">{{ _('Date') }}</th>
                            <th style="text-align: center">{{ _('Actions') }}</th>
                        </thead>
                        <tbody data-bind="foreach: backups">
                            <tr>
                                <td><a href="javascript:void(0)" data-bind="text: name, attr: {href: url}"></a></td>
                                <td style="text-align: right" data-bind="text: formatSize(size)"></td>
                                <td style="text-align: center" data-bind="text: formatDate(date)"></td>
                                <td style="text-align: center">
                                    <button class="btn btn-small" data-bind="visible: $root.restoreSupported, click: $root.restoreBackup">{{ _('Restore') }}</button>
                                    <a class="btn btn-small" data-bind="attr: {href: url}">{{ _('Download') }}</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p data-bind="visible: backups().length <= 0">
                        {{ _('There are no backups yet.') }}
                    </p>
                </div>

                <div style="margin-bottom: 2em">
                    <h1 id="system-info">{{ _('System info') }}</h1>
                    <p data-bind="foreach: systemInfo">
                        <strong data-bind="text: key"></strong>: <span data-bind="text: value"></span><br />
                    </p>
                    <a href="javascript:void(0)" data-bind="click: copySystemInfo"><i class="far fa-copy"></i> {{ _('Copy') }}</a>
                </div>
            </div>
        </div>
    </div>

    <div id="workdialog" class="modal hide fade">
        <div class="modal-header">
            <h3 data-bind="text: workTitle"></h3>
        </div>
        <div class="modal-body">
            <pre class="pre-scrollable pre-output" style="height: 170px" data-bind="foreach: workLoglines"><span data-bind="text: line, css: {stdout: stream == 'stdout', stderr: stream == 'stderr', call: stream == 'call', message: stream == 'message', error: stream == 'error'}"></span></pre>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" data-bind="enable: !workInProgress()" aria-hidden="true">{{ _('Close') }}</button>
        </div>
    </div>

</body>
</html>
