{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0">
                        <i class="bi bi-send me-2"></i>{% translate "Créer une notification" %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                        {% endif %}

                        <div class="row g-3">
                            <!-- Title -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">{{ form.title.label }}</label>
                                {{ form.title }}
                                {% if form.title.errors %}<div class="text-danger small">{{ form.title.errors }}</div>{% endif %}
                            </div>
                            <!-- Content -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">{{ form.content.label }}</label>
                                {{ form.content }}
                            </div>
                            <!-- Type -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">{{ form.notification_type.label }}</label>
                                {{ form.notification_type }}
                            </div>
                            <!-- Action -->
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">{{ form.action_url.label }}</label>
                                {{ form.action_url }}
                                <div class="form-text">{{ form.action_url.help_text }}</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ form.action_label.label }}</label>
                                {{ form.action_label }}
                            </div>
                            <!-- Expires -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ form.expires_at.label }}</label>
                                {{ form.expires_at }}
                                <div class="form-text">{{ form.expires_at.help_text }}</div>
                            </div>
                            <div class="col-md-6"></div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-paperclip me-1"></i>{{ form.attachments.label }}
                                </label>
                                {{ form.attachments }}
                                <div class="form-text">{{ form.attachments.help_text }}</div>
                            </div>
                            <!-- Recipients -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ form.recipient_users.label }}</label>
                                {{ form.recipient_users }}
                                <div class="form-text">{% translate "Ctrl+clic pour sélectionner plusieurs" %}</div>
                                {% if form.recipient_users.errors %}<div class="text-danger small">{{ form.recipient_users.errors }}</div>{% endif %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ form.recipient_teams.label }}</label>
                                {{ form.recipient_teams }}
                                <div class="form-text">{% translate "Ctrl+clic pour sélectionner plusieurs" %}</div>
                                {% if form.recipient_teams.errors %}<div class="text-danger small">{{ form.recipient_teams.errors }}</div>{% endif %}
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'notifications:inbox' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left me-1"></i>{% translate "Annuler" %}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send me-1"></i>{% translate "Envoyer" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}