{% extends "mobile/coach/base.html" %}
{% load i18n %}

{% comment %}
    C5 -- design_handoff_rosterchief_platform/README.md's C5 section: title,
    body, photos, posted for the coach's active team. See CoachCreateNewsView's
    own docstring for what's scoped down from the mock (no English fallback,
    no audience/visibility toggle -- teams is a hidden field locked to the
    active team, not a picker) and why the button reads "Send for review"
    rather than the mock's "Publish" -- a coach's post always needs an
    editor's sign-off first.
{% endcomment %}

{% block content %}
    <div class="-mx-4 -mt-5 flex items-center gap-3 border-b border-line bg-white px-4 py-3">
        <a class="font-display text-sm font-extrabold tracking-wide text-muted uppercase" href="{% url "mobile:coach_today" %}">{% trans "Cancel" %}</a>
        <span class="min-w-0 flex-1 truncate text-center font-display text-lg font-extrabold text-ink uppercase">{% trans "New post" %}</span>
        <button class="font-display text-sm font-extrabold tracking-wide text-club uppercase" type="submit" form="coach-news-form">{% trans "Send" %}</button>
    </div>

    {% for error in form.non_field_errors %}
        <div class="m-card border border-danger-border bg-danger-bg p-3 text-sm text-club-dark"><p>{{ error }}</p></div>
    {% endfor %}
    {% for error in photo_form.non_field_errors %}
        <div class="m-card border border-danger-border bg-danger-bg p-3 text-sm text-club-dark"><p>{{ error }}</p></div>
    {% endfor %}

    <form id="coach-news-form" class="flex flex-col gap-4" method="post" action="{% url "mobile:coach_create_news" %}" enctype="multipart/form-data" hx-boost="false">
        {% csrf_token %}
        {{ form.teams }}

        <div class="m-card flex flex-col p-4">
            <div>
                <label class="mb-1 block text-xs font-semibold text-muted" for="{{ form.title.id_for_label }}">{% trans "Headline" %}</label>
                {{ form.title }}
                {% for error in form.title.errors %}<p class="mt-1 text-xs text-club-dark">{{ error }}</p>{% endfor %}
            </div>
            <div class="my-3 h-px bg-rule"></div>
            <div>
                <label class="mb-1 block text-xs font-semibold text-muted" for="{{ form.body.id_for_label }}">{% trans "Body" %}</label>
                {{ form.body }}
                {% for error in form.body.errors %}<p class="mt-1 text-xs text-club-dark">{{ error }}</p>{% endfor %}
            </div>
        </div>

        <div class="m-card p-4">
            <label class="mb-1 block text-xs font-semibold text-muted" for="{{ photo_form.images.id_for_label }}">{% trans "Photos" %}</label>
            {{ photo_form.images }}
            <p class="mt-1 text-xs text-dim">{% trans "Optional. The first photo becomes the main picture." %}</p>
            {% for error in photo_form.images.errors %}<p class="mt-1 text-xs text-club-dark">{{ error }}</p>{% endfor %}
        </div>

        <p class="px-1 text-xs text-dim">{% blocktrans with team=active_team.name %}Linked to {{ team }} and sent to an editor for review before it goes out to families -- they can widen who it reaches if needed.{% endblocktrans %}</p>
    </form>
{% endblock content %}