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

{% block heading %}{% trans "Members" %}{% endblock heading %}

{% block actions %}
<a class="btn btn-sm btn-outline btn-info gap-2" href="{% url 'management:member_import_template' %}">{% lucide "download" size=14 %} {% trans "Download upload template" %}</a>
    {% if is_club_admin %}
        <a class="btn btn-sm btn-outline btn-info gap-2" href="{% url 'management:member_import' %}">{% lucide "upload" size=14 %} {% trans "Mass upload" %}</a>
        <a class="btn btn-sm btn-outline gap-2" href="{% url 'management:family_create' %}">{% lucide "users" size=14 %} {% trans "Add family" %}</a>
        <a class="btn btn-sm btn-outline gap-2" href="{% url 'management:member_create' %}">{% lucide "user-plus" size=14 %} {% trans "Add member" %}</a>
    {% endif %}
{% endblock actions %}

{% block panel %}
    <form method="get" class="mb-2 flex items-center gap-2">
        <label class="input grow sm:grow-0">
            <span class="opacity-50">{% lucide "search" size=16 %}</span>
            <input type="search" name="q" value="{{ search }}" placeholder="{% trans 'Search members ...' %}" class="input input-bordered w-full sm:max-w-xs">
        </label>
        {% if selected_kind != "member" %}<input type="hidden" name="kind" value="{{ selected_kind }}">{% endif %}
        {# Icon-only below `sm`: label text next to a growing input is what forced this row to wrap on a phone. #}
        <button class="btn btn-outline gap-2" type="submit" aria-label="{% trans 'Search' %}">{% lucide "search" size=16 %}<span class="hidden sm:inline">{% trans "Search" %}</span></button>
        {% if search %}
            <a class="btn gap-2" href="{% url "management:member_list" %}" aria-label="{% trans 'Clear filter' %}">{% lucide "x" size=16 %}<span class="hidden sm:inline">{% trans "Clear filter" %}</span></a>
        {% endif %}
    </form>

    {% comment %}
        Guardians -- parents attached to the club only through a child -- have no
        fee and aren't counted as members, so members_visible_to() leaves them out
        of the default list entirely. Without this filter that's silent: a parent
        just registered via "Add family"/"Add parent" simply doesn't appear here,
        with nothing on the page explaining why. ?kind= makes the exclusion an
        explicit, reversible choice instead.
    {% endcomment %}
    <div class="mb-4 flex flex-col gap-2">
        <div class="join w-full">
            <a href="{% querystring kind=None page=None %}" class="btn btn-sm join-item flex-1 {% if selected_kind == "member" %}btn-primary{% endif %}">{% trans "Members" %}</a>
            <a href="{% querystring kind="guardian" page=None %}" class="btn btn-sm join-item flex-1 {% if selected_kind == "guardian" %}btn-primary{% endif %}">{% trans "Guardians" %}</a>
            <a href="{% querystring kind="both" page=None %}" class="btn btn-sm join-item flex-1 {% if selected_kind == "both" %}btn-primary{% endif %}">{% trans "Both" %}</a>
        </div>
        <span class="text-xs opacity-60">{% trans "Guardians are parents linked only through a child -- no fee, not counted as a member." %}</span>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            {# table-cards: below `md` each row reads as a card instead of forcing a horizontal scroll -- see the .table-cards rule in app.css. #}
            <div class="overflow-x-auto">
                <table class="table table-cards">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Email" %}</th>
                            <th>{% trans "Family" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for member in members %}
                            <tr>
                                <td><a class="link link-hover font-semibold" href="{% url 'management:member_detail' member.pk %}">{{ member.last_name }}, {{ member.first_name }}</a></td>
                                <td data-label="{% trans 'Email' %}">{{ member.contact_email|default:"-" }}</td>
                                <td data-label="{% trans 'Family' %}">
                                    {% if member.family_memberships_display %}
                                        <div class="flex flex-col gap-1">
                                            {% for fm in member.family_memberships_display %}
                                                <div>
                                                    <a class="btn btn-outline btn-sm" href="{% url 'management:family_detail' fm.family.pk %}">{% lucide "users" size=14 %} {{ fm.family }} {% lucide "arrow-right" size=14 %}</a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <span class="opacity-40">-</span>
                                    {% endif %}
                                </td>
                                <td data-label="{% trans 'Status' %}">
                                    {% if member.current_membership %}
                                        <span class="badge badge-sm
                                            {% if member.current_membership.status == "active" %}badge-success
                                            {% elif member.current_membership.status == "pending" %}badge-warning
                                            {% elif member.current_membership.status == "cancelled" %}badge-error
                                            {% else %}badge-neutral{% endif %}">
                                            {{ member.current_membership.get_status_display }}
                                        </span>
                                    {% else %}
                                        <span class="badge badge-sm badge-neutral">{% trans "unknown" %}</span>
                                    {% endif %}
                                </td>
                                <td class="text-right">
                                    {% if is_club_admin %}
                                        <div class="flex flex-wrap justify-end gap-1">
                                            <a class="btn btn-outline btn-sm" href="{% url 'management:member_detail' member.pk %}" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</a>
                                            <button class="btn btn-sm btn-outline btn-error" type="button" onclick="document.getElementById('{{ member.pk|dom_id:"member_delete_modal" }}').showModal()" aria-label="{% trans 'Delete' %}">{% lucide "trash-2" size=14 %} {% trans "Delete" %}</button>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="5" class="text-center opacity-60">{% trans "No members yet." %}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% include "management/_pagination.html" %}

    {% if is_club_admin %}
        {% trans "Delete member" as delete_member_title %}
        {% trans "Delete" as delete_label %}
        {% for member in members %}
            {% url 'management:member_delete' member.pk as member_delete_url %}
            {% blocktrans with full_name=member.get_full_name asvar delete_member_body %}Delete {{ full_name }}? This also removes their club membership, roster spots, staff assignments, and family links. This cannot be undone.{% endblocktrans %}
            {% include "controlpanel/_confirm_modal.html" with modal_id=member.pk|dom_id:"member_delete_modal" title=delete_member_title body=delete_member_body action_url=member_delete_url submit_label=delete_label %}
        {% endfor %}
    {% endif %}
{% endblock panel %}