{% extends "layouts/dashboard.html" %}
{% load ui_tags %}
{% block breadcrumbs %}
  {% url 'core:dashboard' as dashboard_url %}
  {% crumb_trail "Dashboard" dashboard_url "Data Export" "" as breadcrumbs %}
  {% include "components/breadcrumbs.html" %}
{% endblock %}

{% block content %}
{% include "components/page_header.html" with title="Data Export" subtitle="Download live data from any module as an Excel workbook. Each file matches the import template layout and can be used for offline editing or reporting." eyebrow="System" %}

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {% for exp in exports %}
  <div class="card p-5 flex flex-col gap-4">
    <div class="flex items-start gap-3">
      <span class="text-2xl leading-none">{{ exp.icon }}</span>
      <div>
        <p class="font-semibold text-ruforum-text">{{ exp.label }}</p>
        <p class="text-xs text-ruforum-text-muted mt-0.5">Live data · Excel (.xlsx)</p>
      </div>
    </div>
    <div class="mt-auto flex gap-2">
      <a href="{% url 'core:export_download' exp.key %}"
         class="btn-primary btn-sm flex-1 justify-center">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
        Download
      </a>
    </div>
  </div>
  {% endfor %}
</div>

<div class="mt-8 rounded-lg border border-ruforum-border bg-ruforum-surface px-5 py-4 text-sm text-ruforum-text-muted">
  <p class="font-medium text-ruforum-text mb-1">Notes</p>
  <ul class="list-disc list-inside space-y-1 text-xs">
    <li>Downloads include all records visible to your role — no pagination limit.</li>
    <li>Column headers match the import templates exactly for round-trip editing.</li>
    <li>Large datasets (e.g. Alumni, Scholars) may take a few seconds to generate.</li>
    <li>Files are generated fresh on each download — no caching.</li>
  </ul>
</div>
{% endblock %}