{% load dlux_tags %}
    <div class="dlux-backup-create-block">
        <form id="sysbackup-create-form"
              class="dlux-form"
              data-create-url="{% url 'system_backup_create' %}"
              data-busy="{% if active_backup %}1{% else %}0{% endif %}"
              data-estimate-full="{{ backup_estimates.full|default:'' }}"
              data-estimate-data="{{ backup_estimates.data|default:'' }}"
              data-msg-preparing="{{ DLUX_STRINGS.sysbackup_preparing }}"
              data-msg-ready="{{ DLUX_STRINGS.sysbackup_ready }}"
              data-msg-failed="{{ DLUX_STRINGS.sysbackup_failed }}"
              data-msg-cancelled="{{ DLUX_STRINGS.sysbackup_cancelled_note|default:'Backup cancelled.' }}"
              data-msg-estimate="{{ DLUX_STRINGS.sysbackup_estimate|default:'Typically takes about {duration}, based on recent backups.' }}"
              data-msg-eta="{{ DLUX_STRINGS.sysbackup_eta|default:'about {duration} left' }}"
              data-msg-last-signal="{{ DLUX_STRINGS.sysbackup_last_signal|default:'Last update' }}"
              data-msg-stalled="{{ DLUX_STRINGS.sysbackup_stalled_note|default:'No progress reported for {seconds}s.' }}"
              data-unit-h="{{ DLUX_STRINGS.duration_hours_short|default:'h' }}"
              data-unit-m="{{ DLUX_STRINGS.duration_minutes_short|default:'m' }}"
              data-unit-s="{{ DLUX_STRINGS.duration_seconds_short|default:'s' }}">
            {% csrf_token %}
            <fieldset id="sysbackup-create-fields" class="dlux-backup-create-form"{% if active_backup %} disabled{% endif %}>
                <div>
                    <label class="form-label small mb-1" for="sysbackup-encryption">{{ DLUX_STRINGS.sysbackup_encryption_label|default:'Encryption' }}</label>
                    <select id="sysbackup-encryption" name="backup_encryption" class="form-select form-select-sm glass-input">
                        <option value="server_key">{{ DLUX_STRINGS.sysbackup_encryption_server_key|default:'Server key (SECRET_KEY)' }}</option>
                        <option value="passphrase">{{ DLUX_STRINGS.sysbackup_encryption_passphrase|default:'Passphrase' }}</option>
                        <option value="none">{{ DLUX_STRINGS.sysbackup_encryption_none|default:'None (not encrypted)' }}</option>
                    </select>
                </div>
                <div class="dlux-backup-passphrase-field" hidden>
                    <label class="form-label small mb-1" for="sysbackup-passphrase">{{ DLUX_STRINGS.sysbackup_passphrase_label }}</label>
                    <input type="password" id="sysbackup-passphrase" name="backup_passphrase" class="form-control form-control-sm glass-input" autocomplete="new-password" data-dlux-password-rules="off">
                </div>
                <div class="dlux-backup-passphrase-field" hidden>
                    <label class="form-label small mb-1" for="sysbackup-passphrase-confirm">{{ DLUX_STRINGS.sysbackup_passphrase_confirm }}</label>
                    <input type="password" id="sysbackup-passphrase-confirm" name="backup_passphrase_confirm" class="form-control form-control-sm glass-input" autocomplete="new-password" data-dlux-password-rules="off">
                </div>
                <div>
                    <label class="form-label small mb-1" for="sysbackup-scope">{{ DLUX_STRINGS.sysbackup_scope_label|default:'Scope' }}</label>
                    <select id="sysbackup-scope" name="backup_scope" class="form-select form-select-sm glass-input">
                        <option value="full">{{ DLUX_STRINGS.sysbackup_scope_full|default:'Full (database + media)' }}</option>
                        <option value="data">{{ DLUX_STRINGS.sysbackup_scope_data|default:'Quick — data only (no media)' }}</option>
                    </select>
                </div>
                <div class="dlux-backup-system-toggle">
                    <input type="hidden" name="include_system_data" value="0">
                    <div class="form-check form-switch mb-0" title="{{ DLUX_STRINGS.sysbackup_system_data_hint|default:'Off: a portable copy of project data only. Settings, notifications, activity log, preferences and devices are left out, and restoring it keeps those of the target system.' }}">
                        <input class="form-check-input" type="checkbox" role="switch" id="sysbackup-system-data" name="include_system_data" value="1" checked>
                        <label class="form-check-label small" for="sysbackup-system-data">{{ DLUX_STRINGS.sysbackup_system_data_label|default:'Include system data' }}</label>
                    </div>
                </div>
                <button type="submit"
                        id="sysbackup-create-btn"
                        class="btn btn-primary rounded-pill text-nowrap">
                    <i class="bi bi-file-zip-fill me-1"></i>{{ DLUX_STRINGS.sysbackup_create }}
                </button>
            </fieldset>
        </form>
        <small id="sysbackup-busy-note" class="text-warning-emphasis"{% if not active_backup %} hidden{% endif %}>
            <i class="bi bi-hourglass-split me-1"></i>{{ DLUX_STRINGS.sysbackup_busy|default:'A backup is still running. Wait for it to finish before starting another.' }}
        </small>
        <small id="sysbackup-encryption-note" class="text-danger-emphasis" hidden>
            <i class="bi bi-unlock me-1"></i>{{ DLUX_STRINGS.sysbackup_encryption_none_warning|default:'An unencrypted backup exposes user password hashes and all data to anyone who obtains the file.' }}
        </small>
        <small id="sysbackup-estimate" class="text-muted" hidden></small>
        <small id="sysbackup-create-status" class="text-muted"></small>
    </div>