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

{% block heading %}{% trans "Parent claims" %}{% endblock heading %}
{% block subheading %}{% trans "Parents asking to be linked to a child the club already has on file." %}{% endblock subheading %}

{% block panel %}
    <div class="card bg-base-100 shadow mb-4">
        <div class="card-body">
            <h2 class="card-title text-base">{% lucide "inbox" size=18 %} {% trans "Waiting for review" %}</h2>
            <p class="text-sm opacity-70">
                {% blocktrans %}Check each request against your own records before approving. The shortlist only ever contains children who have nobody on file, so approving can never re-parent a child who already has one. An approved parent is added as a guardian: they get the login, but owe no fee and are not counted as a member.{% endblocktrans %}
            </p>

            {% for claim in pending %}
                <div class="border border-base-300 rounded-box p-4 mt-2">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <div class="text-xs opacity-70">{% trans "Parent says they are" %}</div>
                            <div class="font-semibold">{{ claim.parent_name }}</div>
                            <div class="text-sm opacity-70">{{ claim.parent_email }}</div>
                        </div>
                        <div>
                            <div class="text-xs opacity-70">{% trans "Parent of" %}</div>
                            <div class="font-semibold">{{ claim.claimed_child_name }}</div>
                            <div class="text-sm opacity-70">{{ claim.child_date_of_birth|date:"j F Y" }}</div>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-end gap-2 mt-4">
                        {% if claim.has_candidates %}
                            <form method="post" action="{% url 'management:parent_claim_approve' claim.pk %}" class="flex flex-wrap items-end gap-2">
                                {% csrf_token %}
                                <div class="min-w-64">{% form_field claim.review_form.child %}</div>
                                <button class="btn btn-primary btn-sm gap-2" type="submit">{% lucide "check" size=14 %} {% trans "Approve" %}</button>
                            </form>
                        {% else %}
                            <p class="text-sm opacity-70">{% trans "No child without a parent matches this. Check the spelling and the date of birth with them before rejecting." %}</p>
                        {% endif %}

                        <form method="post" action="{% url 'management:parent_claim_reject' claim.pk %}" class="flex items-end gap-2">
                            {% csrf_token %}
                            <input type="text" name="note" class="input input-bordered input-sm" placeholder="{% trans 'Reason (optional)' %}">
                            <button class="btn btn-outline btn-error btn-sm gap-2" type="submit">{% lucide "x" size=14 %} {% trans "Reject" %}</button>
                        </form>
                    </div>
                </div>
            {% empty %}
                <p class="text-sm opacity-60 mt-2">{% trans "Nothing waiting." %}</p>
            {% endfor %}
        </div>
    </div>

    <div class="card bg-base-100 shadow mb-4">
        <div class="card-body">
            <h2 class="card-title text-base">{% lucide "user-search" size=18 %} {% trans "Children with nobody on file" %}</h2>
            <p class="text-sm opacity-70">{% trans "Imported without a parent. They stay here until someone claims them." %}</p>
            <ul class="divide-y divide-base-200">
                {% for child in awaiting_a_parent %}
                    <li class="py-2 flex items-center justify-between">
                        <a class="link link-hover" href="{% url 'management:member_detail' child.pk %}">{{ child }}</a>
                        <span class="text-sm opacity-70">{{ child.date_of_birth|date:"j F Y"|default:"—" }}</span>
                    </li>
                {% empty %}
                    <li class="py-2 text-sm opacity-60">{% trans "Every child has a parent linked." %}</li>
                {% endfor %}
            </ul>
        </div>
    </div>

    {% if reviewed %}
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "history" size=18 %} {% trans "Already dealt with" %}</h2>
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{% trans "Parent" %}</th>
                                <th>{% trans "Claimed" %}</th>
                                <th>{% trans "Outcome" %}</th>
                                <th>{% trans "Reviewed by" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for claim in reviewed %}
                                <tr>
                                    <td>{{ claim.parent_name }}<div class="text-xs opacity-60">{{ claim.parent_email }}</div></td>
                                    <td>{{ claim.claimed_child_name }}</td>
                                    <td>
                                        {% if claim.status == "approved" %}
                                            <span class="badge badge-success badge-sm">{% trans "Approved" %}</span>
                                            {% if claim.child %}<div class="text-xs opacity-60">{{ claim.child }}</div>{% endif %}
                                        {% else %}
                                            <span class="badge badge-error badge-sm">{% trans "Rejected" %}</span>
                                            {% if claim.note %}<div class="text-xs opacity-60">{{ claim.note }}</div>{% endif %}
                                        {% endif %}
                                    </td>
                                    <td>{{ claim.reviewed_by|default:"—" }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock panel %}