{% extends "ui/templates/base/layout.html" %}
{% block content %}
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-2xl font-semibold">Year Backup Export</h1>
      <p class="mt-1 text-sm text-slate-600">Financial Year {{ fy.year_code }} / Assessment Year {{ fy.assessment_year }}</p>
    </div>
    <a href="/system-settings/financial-years?tenant_id={{ fy.tenant_id }}" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to Financial Years</a>
  </div>

  {% if request.query_params.get('exported') %}
  <div class="mt-4 rounded-xl border border-green-200 bg-green-50 p-4 text-sm text-green-800">Backup export generated successfully.</div>
  {% endif %}
  {% if request.query_params.get('error') %}
  <div class="mt-4 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">Backup file is not available on disk.</div>
  {% endif %}

  <section class="mt-5 rounded-2xl border bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h2 class="text-lg font-semibold text-slate-900">Create export ZIP</h2>
        <p class="mt-1 max-w-3xl text-sm text-slate-600">
          This creates a year-wise archive containing CSV indexes for engagements, tasks, engagement documents, notice/case records, billing invoices, payments, and available stored document files.
        </p>
      </div>
      {% if can_manage_fy %}
      <form method="post" action="/system-settings/financial-years/{{ fy.id }}/backup/export">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">Generate Backup ZIP</button>
      </form>
      {% endif %}
    </div>
  </section>

  <div class="mt-5 overflow-hidden rounded-2xl border bg-white">
    <table class="w-full text-sm">
      <thead class="bg-slate-50 text-slate-600">
        <tr>
          <th class="p-3 text-left">Generated At</th>
          <th class="p-3 text-left">Status</th>
          <th class="p-3 text-left">Size</th>
          <th class="p-3 text-right">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for export in exports %}
        <tr class="border-t">
          <td class="p-3">{{ export.generated_at_utc }}</td>
          <td class="p-3"><span class="rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">{{ export.export_status|title }}</span></td>
          <td class="p-3">{{ (export.file_size_bytes / 1024)|round(1) }} KB</td>
          <td class="p-3 text-right"><a href="/system-settings/financial-years/backups/{{ export.id }}/download" class="font-medium text-brand-700 hover:underline">Download</a></td>
        </tr>
        {% else %}
        <tr><td colspan="4" class="p-6 text-center text-slate-500">No backup exports generated yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}