{% extends 'admin/base.html' %}

{% block extrahead %}
{{ block.super }}
<style>
  /* Collapsible diff styles */
  .diff-list, .diff-list ul { list-style: none; margin-left: 1em; padding-left: 0; }
  .nested { display: none; }
  .toggle { cursor: pointer; user-select: none; font-weight: bold; }
  .new { color: green; }
  .removed { color: red; }
  .updated { color: orange; }
</style>
{% endblock %}

{% block content %}
<h1>Backup & Restore</h1>

<!-- Export backup -->
<section>
    <h2>Download Backup</h2>
    <form method="get" action="{% url 'settings:export_backup' %}">
        <button type="submit">Download New Backup</button>
    </form>
</section>

<hr>

<!-- Upload backup -->
<section>
    <h2>Upload Backup</h2>
    <form id="upload-form" method="post" enctype="multipart/form-data" action="">
        {% csrf_token %}
        <input type="file" name="backup_file" required>
        <button type="submit">Upload & Compare Backup</button>
    </form>
</section>

<hr>

<!-- Compare summary & diffs -->
{% if compare_summary %}
<section>
    <h2>Comparison Summary</h2>
    <ul>
    {% for model, counts in compare_summary.items %}
        <li>{{ model }}: Added {{ counts.add }}, Removed {{ counts.remove }}, Modified {{ counts.modify }}</li>
    {% endfor %}
    </ul>

    <h2>Details</h2>
    {% include "diff_list.html" with items=diffs.suburbs title="Suburbs" %}
    {% include "diff_list.html" with items=diffs.schools title="Schools" %}
    {% include "diff_list.html" with items=diffs.travellers title="Travellers" %}
    {% include "diff_list.html" with items=diffs.companies title="Companies" %}

    <!-- Execute Recovery -->
    <form method="post" action="">
        {% csrf_token %}
        <!-- Pass the uploaded file content for restore -->
        <input type="hidden" name="backup_content" value="{{ uploaded_file_content|escape }}">
        <button type="submit" name="execute_restore"
                onclick="return confirm('Are you sure you want to restore this backup? This cannot be undone.')">
            Execute Recovery
        </button>
    </form>
</section>
{% endif %}

{% endblock %}

{% block extrajs %}
<script>
document.addEventListener("DOMContentLoaded", () => {
    // Collapsible diffs
    document.querySelectorAll('.toggle').forEach(el => {
        el.addEventListener('click', () => {
            const nested = el.nextElementSibling;
            if (nested) nested.style.display = (nested.style.display === "none" || nested.style.display === "") ? "block" : "none";
        });
    });
});
</script>
{% endblock %}