{% load i18n %}
<div class="page-content">

    <div style="margin-bottom:1rem;">
        <a href="/reports/" hx-get="/reports/" hx-target="#main-content" hx-push-url="/reports/" hx-indicator="#loader"
           style="font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none;">← {% trans "Все отчёты" %}</a>
    </div>

    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground); margin:0;">{% trans "Шаблоны оформления" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin:0.25rem 0 0;">
                {% trans "Копируйте системный шаблон и правьте HTML/Markdown под требования отдела." %}
            </p>
        </div>
    </div>

    <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; overflow:hidden;">
        <table style="width:100%; border-collapse:collapse; font-size:0.875rem;">
            <thead>
                <tr style="border-bottom:1px solid var(--color-border);">
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground);">{% trans "Название" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground);">{% trans "Код" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground);">{% trans "Статус" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:right; color:var(--color-muted-foreground);"></th>
                </tr>
            </thead>
            <tbody>
                {% for tpl in templates %}
                <tr style="border-bottom:1px solid var(--color-border);">
                    <td style="padding:0.75rem 1rem;">
                        <div style="font-weight:500;">{{ tpl.name }}</div>
                        {% if tpl.description %}<div style="font-size:0.75rem; color:var(--color-muted-foreground);">{{ tpl.description|truncatechars:80 }}</div>{% endif %}
                    </td>
                    <td style="padding:0.75rem 1rem; font-family:monospace; font-size:0.8125rem;">{{ tpl.code }}</td>
                    <td style="padding:0.75rem 1rem; font-size:0.8125rem;">
                        {% if tpl.is_default %}<span class="badge badge-success">{% trans "По умолчанию" %}</span>{% endif %}
                        {% if tpl.is_system %}<span class="badge badge-muted">{% trans "Системный" %}</span>{% endif %}
                        {% if not tpl.is_active %}<span class="badge badge-warning">{% trans "Выкл." %}</span>{% endif %}
                    </td>
                    <td style="padding:0.75rem 1rem; text-align:right; white-space:nowrap;">
                        <a href="/reports/templates/{{ tpl.pk }}/" hx-get="/reports/templates/{{ tpl.pk }}/" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
                           class="btn btn-ghost" style="font-size:0.8125rem;">{% if tpl.is_system %}{% trans "Открыть" %}{% else %}{% trans "Править" %}{% endif %}</a>
                        <form method="post" action="/reports/templates/{{ tpl.pk }}/copy/" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-secondary" style="font-size:0.8125rem;">{% trans "Копия" %}</button>
                        </form>
                        {% if not tpl.is_default and tpl.is_active %}
                        <form method="post" action="/reports/templates/{{ tpl.pk }}/set-default/" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-ghost" style="font-size:0.8125rem;">{% trans "Сделать default" %}</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="4" style="padding:2rem; text-align:center; color:var(--color-muted-foreground);">
                    {% trans "Шаблонов нет. Выполните: python manage.py seed_report_templates" %}
                </td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div style="margin-top:1rem; padding:1rem; border-radius:0.5rem; background:var(--color-muted); font-size:0.8125rem; color:var(--color-muted-foreground);">
        <strong style="color:var(--color-foreground);">{% trans "Переменные шаблона" %}:</strong>
        <code>report</code>, <code>company</code>, <code>month</code>, <code>stats</code>,
        <code>month_title</code>, <code>prepared_date</code>, <code>labels</code>,
        <code>employees</code>, <code>conclusions</code>.
        {% trans "Синтаксис — Django templates (теги и переменные)." %}
    </div>

</div>