{% load lucide ui %}

{% comment %}
    The shell every billing form uses: card, fields, cancel + submit. Included with
    `heading`, `blurb`, `submit_label`, `submit_icon` and `cancel_url`.
{% endcomment %}
<div class="card max-w-xl bg-base-100 shadow">
    <div class="card-body">
        {% if blurb %}<p class="text-sm opacity-70">{{ blurb }}</p>{% endif %}
        <form method="post">
            {% csrf_token %}
            {% for error in form.non_field_errors %}
                <div class="alert alert-error my-2">
                    <span>{{ error }}</span>
                </div>
            {% endfor %}
            {% for field in form %}
                <div class="form-control my-3 w-full">
                    {% if field.field.widget.input_type == "checkbox" %}
                        <label class="label cursor-pointer justify-start gap-3" for="{{ field.id_for_label }}">
                            {{ field|daisy }}
                            <span class="label-text">{{ field.label }}</span>
                        </label>
                    {% else %}
                        <label class="label" for="{{ field.id_for_label }}">
                            <span class="label-text">{{ field.label }}</span>
                        </label>
                        {{ field|daisy }}
                    {% endif %}
                    {% if field.help_text %}<span class="label-text-alt mt-1 block text-base-content/70">{{ field.help_text }}</span>{% endif %}
                    {% for error in field.errors %}<span class="label-text-alt mt-1 text-error">{{ error }}</span>{% endfor %}
                </div>
            {% endfor %}
            <div class="card-actions justify-end pt-2">
                <a class="btn btn-outline gap-2" href="{{ cancel_url }}">{% lucide "arrow-left" size=16 %} Cancel</a>
                <button class="btn btn-primary gap-2" type="submit">{% lucide submit_icon|default:"check" size=16 %} {{ submit_label|default:"Save" }}</button>
            </div>
        </form>
    </div>
</div>