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

{% block panel_title %}{% if object %}Edit {{ object }}{% else %}New club{% endif %}{% endblock panel_title %}

{% block breadcrumb %}
    <a class="hover:text-ink" href="{% url 'controlpanel:club_list' %}">clubs</a>
    <span>/</span>
    <span class="text-ink">{% if object %}{{ object.slug }}{% else %}new{% endif %}</span>
{% endblock breadcrumb %}

{% block panel %}
    <div class="font-display text-2xl font-extrabold text-ink uppercase">{% if object %}Edit {{ object }}{% else %}New club{% endif %}</div>

    <div class="card">
        <div class="card-body">
            <form method="post" enctype="multipart/form-data" class="flex flex-col gap-4">
                {% csrf_token %}

                {% for error in form.non_field_errors %}
                    <div class="alert alert-error">
                        <span>{{ error }}</span>
                    </div>
                {% endfor %}

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    {% form_field form.name %}
                    {% form_field form.legal_name %}
                    {% form_field form.contact_email %}
                    {% form_field form.website %}
                    {% form_field form.slug %}
                    {% form_field form.sport_type %}
                </div>

                <div class="border-t border-rule"></div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                    {% form_field form.logo %}
                    {% form_field form.primary_color %}
                    {% form_field form.secondary_color %}
                </div>

                <div class="border-t border-rule"></div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    {% form_field form.season_start %}
                    {% form_field form.season_duration_months %}
                </div>

                <div class="flex justify-start gap-2 pt-2">
                    <a class="btn btn-outline gap-2" href="{% if update_view %}{% url "controlpanel:club_detail" object.pk %}{% else %}{% url "controlpanel:club_list" %}{% endif %}">{% lucide "arrow-left" size=16 %} Cancel</a>
                    <button class="btn btn-primary gap-2" type="submit">{% lucide "save" size=16 %} Save</button>
                </div>
            </form>
        </div>
    </div>
{% endblock panel %}