{% 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-[380px] shrink-0 flex-col gap-3">
            {# D8's filter chips -- All/Drafts/Scheduled, plus Published for symmetry with the statuses this app actually has. #}
            <div class="flex flex-wrap gap-1.5">
                <a href="{% querystring status=None selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "all" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "All" %} <span class="badge badge-sm badge-ghost">{{ counts.all }}</span></a>
                <a href="{% querystring status="draft" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "draft" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Drafts" %} <span class="badge badge-sm badge-ghost">{{ counts.draft }}</span></a>
                <a href="{% querystring status="scheduled" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "scheduled" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Scheduled" %} <span class="badge badge-sm badge-ghost">{{ counts.scheduled }}</span></a>
                <a href="{% querystring status="published" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "published" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Published" %} <span class="badge badge-sm badge-ghost">{{ counts.published }}</span></a>
            </div>

            <div class="card overflow-hidden divide-y">
                {% for item in news_items %}
                    <a href="{% querystring selected=item.pk %}" class="flex flex-col gap-1 border-l-[3px] px-4 py-3 {% if news_item and item.pk == news_item.pk %}border-club bg-row-sel{% else %}border-transparent hover:bg-subhead{% endif %}">
                        <div class="flex flex-wrap items-center gap-2">
                            {% if item.status == "draft" %}
                                <span class="badge badge-sm">{% trans "Draft" %}</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-xs text-dim">
                                {% if item.status == "draft" %}{% blocktrans with time=item.modified|timesince %}Edited {{ time }} ago{% endblocktrans %}
                                {% else %}{{ item.published_at|date:"j M Y" }}{% endif %}
                            </span>
                        </div>
                        <div class="truncate font-display text-base font-extrabold text-ink uppercase">{{ item.title }}</div>
                        <div class="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 %}