{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/services.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/backups.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Backups</h2>
    <div class="backup-controls">
        <form id="backup-run-form" method="POST" action="/admin/backups/run" class="admin-inline-form" aria-label="Create backup">
            <label for="backup-run-target">Target
                <select name="target" id="backup-run-target">
                    {% for target in targets %}
                    <option value="{{ target.key }}">{{ target.label }}</option>
                    {% endfor %}
                </select>
            </label>
            <button type="submit" class="admin-btn admin-btn-primary"><span class="icon">&#x1F4BE;</span> Create backup</button>
        </form>
        <a href="#" class="admin-btn admin-btn-sm" data-modal="backup-schedule-modal" id="backup-schedule-new"><span class="icon">&#x1F551;</span> New schedule</a>
        <span class="backup-generated" data-meta="generated" role="status" aria-live="polite" aria-label="Last generated">-</span>
    </div>
</div>

<div id="backups-root" class="backups" role="region" aria-label="Backup status" aria-live="polite">
    <p class="admin-empty" data-empty>Loading backup status...</p>
</div>

<div id="backup-schedule-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 id="backup-schedule-title">New backup schedule</h3>
            <a href="#" class="modal-close" aria-label="Close dialog">&times;</a>
        </div>
        <form id="backup-schedule-form" method="POST" action="/admin/backups/schedules/create" class="modal-body backup-schedule-form" aria-labelledby="backup-schedule-title">
            <label for="backup-schedule-name">Name
                <input type="text" id="backup-schedule-name" name="name" maxlength="120" required aria-required="true" placeholder="Nightly full backup">
            </label>
            <label for="backup-schedule-target">Target
                <select name="target" id="backup-schedule-target">
                    {% for target in targets %}
                    <option value="{{ target.key }}">{{ target.label }}</option>
                    {% endfor %}
                </select>
            </label>
            <label for="backup-schedule-kind">Schedule type
                <select name="kind" id="backup-schedule-kind">
                    <option value="interval">Every N seconds</option>
                    <option value="cron">Cron expression</option>
                </select>
            </label>
            <label data-kind="interval" for="backup-schedule-every">Interval (seconds)
                <input type="number" id="backup-schedule-every" name="every_seconds" min="60" value="86400">
            </label>
            <label data-kind="cron" hidden for="backup-schedule-cron">Cron (minute hour dom month dow)
                <input type="text" id="backup-schedule-cron" name="cron" maxlength="120" placeholder="0 3 * * *">
            </label>
            <label for="backup-schedule-keep">Keep last N backups (0 = keep all)
                <input type="number" id="backup-schedule-keep" name="keep_last" min="0" max="1000" value="7">
            </label>
            <div class="modal-actions">
                <button type="submit" class="admin-btn admin-btn-primary">Save schedule</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script type="module" src="{{ static_url('/static/js/BackupMonitor.js') }}"></script>
<script type="module">
new window.BackupMonitor().start();
</script>
{% endblock %}