{% extends "management/base.html" %}
{% load i18n lucide ui %}

{% block heading %}{% trans "News" %}{% endblock heading %}

{% block actions %}
    {% if can_add_news %}
        <a class="btn btn-primary gap-2" href="{% url 'management:news_create' %}">{% lucide "plus" size=16 %} {% trans "New post" %}</a>
    {% endif %}
{% endblock actions %}

{% block panel %}
    <div class="flex items-start gap-4">
        <div class="flex w-[460px] shrink-0 flex-col gap-3">
            {# D8's filter chips exactly: 28px tall, 6px radius (not a pill/button), dark ink when active rather than the club accent colour, plain hairline border otherwise. Plus Published for symmetry with the statuses this app actually has. #}
            <div class="flex flex-nowrap gap-1.5">
                <a href="{% querystring status=None selected=None page=None %}" class="flex h-7 items-center rounded-md px-2.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if status_filter == "all" %}bg-ink text-white{% else %}border border-line text-muted{% endif %}">{% trans "All" %} {{ counts.all }}</a>
                <a href="{% querystring status="draft" selected=None page=None %}" class="flex h-7 items-center rounded-md px-2.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if status_filter == "draft" %}bg-ink text-white{% else %}border border-line text-muted{% endif %}">{% trans "Drafts" %} {{ counts.draft }}</a>
                <a href="{% querystring status="scheduled" selected=None page=None %}" class="flex h-7 items-center rounded-md px-2.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if status_filter == "scheduled" %}bg-ink text-white{% else %}border border-line text-muted{% endif %}">{% trans "Scheduled" %} {{ counts.scheduled }}</a>
                <a href="{% querystring status="published" selected=None page=None %}" class="flex h-7 items-center rounded-md px-2.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if status_filter == "published" %}bg-ink text-white{% else %}border border-line text-muted{% endif %}">{% trans "Published" %} {{ counts.published }}</a>
            </div>

            <div class="card overflow-hidden divide-y divide-rule">
                {% for item in news_items %}
                    {# D8's exact row anatomy: status pill + mono meta on their own line, a real 20px condensed headline below, then a muted author/audience line -- three lines, not a squeezed one-liner. It's a list because rows are plain hairline-divided strips, not because the type is tiny. #}
                    <a href="{% querystring selected=item.pk %}" class="block border-l-[3px] px-5 py-3.5 {% if news_item and item.pk == news_item.pk %}border-l-club bg-row-sel{% else %}border-l-transparent hover:bg-subhead{% endif %}">
                        <div class="mb-1 flex items-center gap-2.5">
                            {% if item.status == "draft" %}
                                <span class="badge badge-sm">{% trans "Draft" %}</span>
                            {% elif item.status == "pending_review" %}
                                <span class="badge badge-warning badge-sm">{% trans "Pending review" %}</span>
                            {% elif item.is_scheduled %}
                                <span class="badge badge-info badge-sm">{% trans "Scheduled" %}</span>
                            {% else %}
                                <span class="badge badge-success badge-sm">{% trans "Published" %}</span>
                            {% endif %}
                            <span class="font-mono text-[11px] text-dim">
                                {% if item.status == "published" %}{{ item.published_at|date:"j M Y" }}
                                {% else %}{% blocktrans with time=item.modified|timesince %}Edited {{ time }} ago{% endblocktrans %}{% endif %}
                            </span>
                        </div>
                        <div class="truncate font-display text-xl leading-[1.05] font-extrabold text-ink uppercase">{{ item.title }}</div>
                        <div class="mt-0.5 truncate text-[13px] text-muted">
                            {% if item.created_by %}{{ item.created_by }} &middot; {% endif %}
                            {% for team in item.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% empty %}{% trans "Club-wide" %}{% endfor %}
                        </div>
                    </a>
                {% empty %}
                    <div class="px-4 py-10 text-center text-sm text-muted">{% trans "No news items yet." %}</div>
                {% endfor %}
            </div>

            {% include "management/_pagination.html" %}
        </div>

        <div class="min-w-0 flex-1">
            {% if news_item %}
                {% include "management/_news_preview.html" %}
            {% else %}
                <div class="card p-10 text-center text-sm text-muted">{% trans "Select a post on the left to preview it here." %}</div>
            {% endif %}
        </div>
    </div>
{% endblock panel %}