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

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

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

        <div class="flex flex-row gap-2 items-center lg:hidden">
            <div class="text-3xl min-w-12">
                <a href="{% url "backend:members:list" %}" hx-get="{% url "backend:members:list" %}" hx-target="#content">
                    <i class="fa-solid fa-angle-left"></i>
                </a>
            </div>

            <div class="flex flex-row gap-2 grow justify-center items-center">
                {% if member %}
                    <div class="font-bold text-xl">{{ member.user.get_full_name }}</div>

                    {% if member.user.is_superuser %}
                        <div class="tooltip" data-tip="{% translate "This user is a site admin" %}">
                            <div class="badge badge-sm badge-accent">
                                <i class="fa-solid fa-user-shield"></i>
                            </div>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="font-bold text-xl">{% translate "Create new member" %}</div>
                {% endif %}
            </div>

            <div class="flex min-w-12 justify-end">
                {% if member %}
                    <a class="btn btn-error btn-outline" href="{% url "backend:members:delete" member.pk %}">
                        <i class="fa-solid fa-trash"></i>
                    </a>
                {% else %}
                    &nbsp;
                {% endif %}
            </div>
        </div>

        {% if member %}
            <div class="mt-4 lg:hidden flex flex-row gap-2">
                <div class="mt-4 lg:hidden flex flex-row gap-2">
                    {% if member.phone_number %}
                        <a href="{{ member.phone_number.as_rfc3966 }}" class="btn btn-info btn-outline btn-sm grow">
                            <i class="fa-solid fa-phone"></i>
                            {{ member.phone }}
                        </a>
                    {% endif %}

                    {% if member.emergency_phone_number %}
                        <a href="{{ member.emergency_phone_number.as_rfc3966 }}" class="btn btn-error btn-outline btn-sm grow">
                            <i class="fa-solid fa-file-medical"></i>
                            {{ member.emergency_phone_number }}
                        </a>
                    {% endif %}
                </div>

                {% if config.TF_ENABLE_TEAMS %}
                    <a href="?member__user__first_name={{ member.user.first_name }}&member__user__last_name={{ member.user.last_name }}" class="btn btn-sm w-full mt-2 btn-outline btn-neutral lg:hidden">
                        <i class="fa-solid fa-ticket"></i>{% translate "View team memberships" %}
                    </a>
                {% endif %}

            <div class="flex flex-row items-center mt-8 gap-x-3 hidden lg:flex">
                {% avatar first_name=member.user.first_name last_name=member.user.last_name %}

                <h2 class="page-subtitle border-b-0! mt-0!">{{ member.user.get_full_name }}</h2>

                {% if member.user.is_superuser %}
                    <div class="badge badge-accent"><i class="fa-solid fa-user-shield"></i>{% translate "Admin" %}</div>
                {% endif %}

                <div class="justify-end hidden gap-2 lg:flex lg:flex-row grow">
                    {% if member.phone %}
                        <a href="{{ member.phone.as_rfc3966 }}" class="btn btn-outline btn-info"><i class="fa-solid fa-phone"></i>{{ member.phone }}</a>
                    {% endif %}

                    {% if member.emergency_phone %}
                        <a href="{{ member.emergency_phone.as_rfc3966 }}" class="btn btn-outline btn-error"><i class="fa-solid fa-file-medical"></i>{{ member.emergency_phone }}</a>
                    {% endif %}

                    {% if config.TF_ENABLE_TEAMS %}
                        <a href="?member__user__first_name={{ member.user.first_name }}&member__user__last_name={{ member.user.last_name }}" class="btn btn-outline btn-neutral">
                            <i class="fa-solid fa-ticket"></i>{% translate "Team Memberships" %}
                        </a>
                    {% endif %}

                    <a href="{% url "backend:members:members_delete" member.id %}" class="btn btn-error btn-outline">
                        <i class="fa-solid fa-trash"></i>{% translate "Delete" %}
                    </a>
                </div>
            </div>
        {% else %}
            <h2 class="page-subtitle border-b-0! hidden lg:flex">{% translate "Create new member" %}</h2>
        {% endif %}

        {% 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">
            {% csrf_token %}

            <h2 class="page-subtitle">{% translate "Personal information" %}</h2>
            <div class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-2">
                {% form_field form.first_name %}
                {% form_field form.last_name %}
                {% form_field form.birthday %}
            </div>

            <h2 class="page-subtitle">{% translate "Contact information" %}</h2>
            <div class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-2">
                {% form_field form.email %}
                {% form_field form.phone_number %}
                {% form_field form.emergency_phone_number %}
            </div>

            <h2 class="page-subtitle">{% translate "Family information" %}</h2>
            <div class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-2">
                {% form_field form.family_members %}
            </div>

            <h2 class="page-subtitle">{% translate "Club information" %}</h2>
            <div class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-2">
                {% form_field form.license %}
                {% form_field form.admin show_as_toggle=True %}
            </div>

            <h2 class="page-subtitle">{% translate "Password" %}</h2>
            <div class="mt-2 text-sm text-justify">{% blocktranslate %}Setting the password here will overwrite the current password for this member, after changing the member will be prompted to set a new password at the next login.<br /><br />If both fields are empty the current password will not be changed.{% endblocktranslate %}</div>
            <div class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-2">
                {% form_field form.password %}
                {% form_field form.password_confirmation %}
            </div>

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

        <script type="text/javascript">
            new Choices(document.querySelector("#id_family_members"));
        </script>
    {% endpartialdef content %}
{% endblock content %}