{% extends "backend/base.html" %}

{% load i18n %}
{% load form_field %}
{% load avatar %}

{% block content %}
    {% partialdef content inline %}
        <h1 class="page-title">{% translate "Members" %}</h1>

        <h2 class="page-subtitle border-b-0! hidden lg:flex">{% translate "Bulk load new member information" %}</h2>

        <div class="alert alert-info mt-2 text-sm text-justify">
            <i class="text-lg fa-solid fa-info"></i>
            <span>
                {% blocktranslate %}
                    Data should be formatted as a .csv file with the following information in the different columns:
                    <ul class="my-2 list-disc list-inside">
                        <li>First name</li>
                        <li>Last name</li>
                        <li>Email</li>
                        <li>Birthday (YYYY-MM-DD)</li>
                        <li>License number</li>
                        <!-- <li>Team (short name)</li>
                        <li>Role (abbreviation)</li>
                        <li>Number</li>
                        <li>Position (C or A, depending on captain or assistant captain, leave empty if neither)</li> -->
                    </ul>
                {% endblocktranslate %}
            </span>
        </div>

        {% if form.errors %}
            <div class="flex flex-row items-center gap-2 p-2 m-4 rounded-lg bg-error">
                <i class="mr-2 text-3xl fa-solid fa-exclamation-triangle text-error-content"></i>

                <div class="flex flex-col">
                    <div class="mb-1 font-semibold text-error-content">{% translate "Error" %}</div>
                    <div class="text-sm text-error-content">{% translate "Please correct the errors below before saving again." %}</div>
                </div>
            </div>
        {% endif %}

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="mt-4">
                {% form_field form.csv_file %}
            </div>

            <button class="w-full mt-8 btn btn-neutral" type="submit">
                <i class="fa-solid fa-floppy-disk"></i>{% translate "Save" %}
            </button>
        </form>
    {% endpartialdef content %}
{% endblock content %}