{% extends "base.html" %}
{% block title %}Backup & Restore · WageWise Neo{% endblock %}
{% block content %}
<div class="page-header">
    <div><div class="eyebrow">Setup</div><h1>Backup &amp; Restore</h1></div>
</div>

<div class="panel" style="margin-bottom:16px;">
    <div class="panel-title"><h2>Create Backup Now</h2></div>
    <p style="margin-bottom:14px;font-size:13px;">Backs up only your data (database file). Code files are not included — you can always re-download those. Backups are stored in the <code style="font-family:var(--font-data);">backups/</code> folder inside WageWise.</p>
    <form method="post" action="{{ url_for('backup_create') }}" style="display:flex;gap:10px;align-items:flex-end;">
        <div class="field" style="flex:1;max-width:320px;margin:0;">
            <label>Reason (optional)</label>
            <input type="text" name="reason" placeholder="e.g. Before May payroll run">
        </div>
        <button type="submit" class="btn btn-primary">Create Backup Now</button>
    </form>
    <p class="field-hint" style="margin-top:10px;">
        You can also backup anytime from the command line:<br>
        <code style="font-family:var(--font-data);">python backup.py</code><br>
        To restore from command line: <code style="font-family:var(--font-data);">python backup.py restore</code>
    </p>
</div>

<div class="panel">
    <div class="panel-title"><h2>Available Backups ({{ backups|length }})</h2>
        <span class="meta">Last {{ [backups|length, 30]|min }} — oldest are auto-deleted after 30 backups</span>
    </div>

    {% if backups %}
    <table class="ledger-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Date &amp; Time</th>
                <th>Reason</th>
                <th class="num">Size</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        {% for b in backups %}
        <tr>
            <td class="meta">{{ loop.index }}</td>
            <td style="font-family:var(--font-data);font-size:13px;">
                {{ b.date }}
                {% if loop.first %}<span class="stamp active" style="margin-left:6px;">Latest</span>{% endif %}
            </td>
            <td class="meta">{{ b.reason or '—' }}</td>
            <td class="num meta">{{ '{:,.0f}'.format(b.size / 1024) }} KB</td>
            <td>
                <form method="post" action="{{ url_for('backup_restore') }}" style="display:inline;"
                      onsubmit="return confirm('Restore from this backup?\n\nYour current data will be backed up first as a safety copy, then this backup will be loaded.\n\nWageWise will need to be restarted after restore.')">
                    <input type="hidden" name="backup_name" value="{{ b.name }}">
                    <button type="submit" class="btn btn-secondary"
                            style="font-size:11px;padding:3px 10px;color:var(--color-stamp);">
                        ↩ Restore
                    </button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="meta" style="padding:20px;text-align:center;">No backups yet. Create your first backup above.</p>
    {% endif %}
</div>

<div class="panel" style="background:var(--color-paper-stripe);border-color:var(--color-rule);">
    <h3 style="margin-bottom:10px;">Important Notes</h3>
    <ul style="font-size:13px;line-height:1.8;margin:0;padding-left:20px;">
        <li>Backups contain only your payroll data. The WageWise program files are separate.</li>
        <li>Copy your <code style="font-family:var(--font-data);">backups/</code> folder to a USB drive or cloud storage regularly.</li>
        <li>A restore will overwrite your current data. Your current data is always safety-backed-up before any restore.</li>
        <li>After a restore, close and restart WageWise for changes to take effect.</li>
        <li>To move WageWise to a new computer: copy the entire WageWise folder including <code style="font-family:var(--font-data);">database/</code> and <code style="font-family:var(--font-data);">backups/</code>.</li>
    </ul>
</div>
{% endblock %}