{% extends "territories_dashboard_lib/website/layout/base.html" %}
{% load static %}

{% block page_title %}Mes exports{% endblock %}

{% block css %}
    {% include "./page.css" %}
{% endblock %}

{% block extra_head %}
    <script
        defer
        type="module"
        src="{% static 'territories_dashboard_lib/website/js/pages/exports/page.mjs' %}"
    ></script>
{% endblock %}

{% block main %}
<main role="main" class="fr-container fr-pt-md-8w fr-pb-md-10w fr-pt-4w fr-pb-6w" id="contenu" tabindex="-1">
    <nav role="navigation" class="fr-breadcrumb back-link" aria-label="Retour">
        <ol class="fr-breadcrumb__list">
            <li>
                <a class="fr-breadcrumb__link" href="{{ export_url }}">Retour vers le portrait de territoire</a>
            </li>
        </ol>
    </nav>
    <h1>Mes exports</h1>

    <div class="fr-callout fr-callout--yellow-moutarde fr-mb-4w">
        <p class="fr-callout__text">
            Cette liste est rattachée au <b>navigateur</b> que vous utilisez : elle n'est visible que depuis celui-ci.
            <br>
            Les fichiers sont conservés <b>{{ expiry_days }} jours</b> après leur préparation.
        </p>
    </div>

    {% if rows %}
        <div class="fr-table fr-table--bordered" id="exports-table" data-has-active="{% if has_active %}true{% else %}false{% endif %}">
            <table>
                <caption class="fr-sr-only">Exports demandés depuis ce navigateur</caption>
                <thead>
                    <tr>
                        <th scope="col">Intitulé</th>
                        <th scope="col">Format</th>
                        <th scope="col">Demandé le</th>
                        <th scope="col">Statut</th>
                        <th scope="col">Action / Message</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        <tr data-export-id="{{ row.export.public_id }}" data-status="{{ row.export.status }}">
                            <td>{{ row.export.label }}</td>
                            <td>{{ row.export.get_kind_display }}</td>
                            <td>{{ row.export.created_at|date:"d/m/Y à H:i" }}</td>
                            <td>
                                <span class="fr-badge fr-badge--sm {{ row.badge_class }}">
                                    {{ row.export.get_status_display }}
                                </span>
                            </td>
                            <td class="export-action">
                                {% if row.download_url %}
                                    <a
                                        class="fr-link fr-link--download"
                                        href="{{ row.download_url }}"
                                        download
                                    >
                                        Télécharger
                                        <span class="fr-link__detail">
                                            {{ row.export.get_kind_display }} – expire le {{ row.export.expires_at|date:"d/m/Y" }}
                                        </span>
                                    </a>
                                {% elif row.export.status == "expired" %}
                                    <span class="fr-text--sm export-note">
                                        Fichier supprimé, relancez l'export depuis le portrait.
                                    </span>
                                {% elif row.export.status == "error" %}
                                    <span class="fr-text--sm export-note">
                                        {{ row.error|default:"La génération du fichier a échoué." }}
                                    </span>
                                {% else %}
                                    <span class="fr-text--sm export-note">
                                        Préparation en cours…
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <p>
            Aucun export demandé depuis ce navigateur.
            {% if export_url %}
                Vous pouvez en demander un depuis le
                <a class="fr-link" href="{{ export_url }}">portrait de territoire</a>.
            {% endif %}
        </p>
    {% endif %}
</main>
{% endblock %}