{% extends "oscar/dashboard/layout.html" %}
{% load i18n static %}

{% block title %}{{ title }} | {{ block.super }}{% endblock %}

{% block breadcrumbs %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
        <li class="breadcrumb-item"><a href="{% url 'dashboard:announcement-list' %}">{% trans "Announcements" %}</a></li>
        <li class="breadcrumb-item active">{{ title }}</li>
    </ol>
</nav>
{% endblock %}

{% block header %}
<div class="page-header"><h1>{{ title }}</h1></div>
{% endblock %}

{% block dashboard_content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <form method="post" id="announcement-form" class="wysiwyg">
                    {% csrf_token %}

                    {# ── Message ── #}
                    {% with field=form.content %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label fw-semibold">
                            {{ field.label }} <span class="text-danger">*</span>
                        </label>
                        {{ field }}
                        {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                        {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
                    </div>
                    {% endwith %}

                    {# ── Type & Audience side by side ── #}
                    <div class="row mb-3">
                        <div class="col">
                            {% with field=form.level %}
                            <label for="{{ field.id_for_label }}" class="form-label fw-semibold">{{ field.label }}</label>
                            {{ field }}
                            {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
                            {% endwith %}
                        </div>
                        <div class="col">
                            {% with field=form.visibility %}
                            <label for="{{ field.id_for_label }}" class="form-label fw-semibold">{{ field.label }}</label>
                            {{ field }}
                            {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                            {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
                            {% endwith %}
                        </div>
                    </div>

                    {# ── Show from ── #}
                    {% with field=form.publish_start %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label fw-semibold">{{ field.label }}</label>
                        <div class="input-group">
                            {{ field }}
                            <button type="button" class="btn btn-outline-secondary oa-clear-date"
                                    data-target="{{ field.id_for_label }}"
                                    data-label-now="{% trans 'Now' %}"
                                    data-label-day="{% trans 'Announce in 1 day' %}"
                                    data-label-days-prefix="{% trans 'Announce in' %}"
                                    data-label-days-suffix="{% trans 'days' %}"
                                    title="{% trans 'Clear date to announce immediately' %}">
                                <span class="oa-start-label">{% trans "Announce now" %}</span>
                            </button>
                        </div>
                        {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                        {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
                    </div>
                    {% endwith %}

                    {# ── Expires at ── #}
                    {% with field=form.publish_end %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label fw-semibold">{{ field.label }}</label>
                        <div class="input-group">
                            {{ field }}
                            <button type="button" class="btn btn-outline-secondary oa-clear-date"
                                    data-target="{{ field.id_for_label }}"
                                    title="{% trans 'Remove expiry — announcement runs indefinitely' %}">
                                {% trans "Never" %}
                            </button>
                        </div>
                        {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                        {% for error in field.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
                    </div>
                    {% endwith %}

                    {# ── Re-send (edit only) ── #}
                    {% if form.instance.pk %}
                    {% with field=form.clear_dismissals %}
                    <div class="mb-3 form-check">
                        {{ field }}
                        <label class="form-check-label" for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                    </div>
                    {% endwith %}
                    {% endif %}

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> {% trans "Save" %}
                    </button>
                    <a href="{% url 'dashboard:announcement-list' %}" class="btn btn-outline-secondary ms-2">
                        {% trans "Cancel" %}
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extrascripts %}
{{ block.super }}
<script src="{% static 'oscar_announcements/js/announcement_form.js' %}"></script>
{% endblock %}