{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Residents{% endblock %}

{% block admin_content %}
<div data-plugin="hoa-community">
    <p class="mb-4 max-w-6xl text-sm text-slate-600 dark:text-slate-300">
        Date-bounded owner and occupant links. Pick a household — the home comes from that household’s primary home.
        Ending a residency keeps history; it does not delete the record.
    </p>
    {{ crud::shell_open(config_url="/plugins/hoa-community/assets/admin/members_list.json", mount_id="hoa-community-members", custom_mount=true) }}
    <div class="blocks-responsive-table">
        <table class="blocks-admin-table responsive-table"><thead></thead><tbody><tr><td colspan="9" class="crud-empty-state py-5 text-center text-slate-600 dark:text-slate-300">Loading residents…</td></tr></tbody></table>
    </div>
    {{ crud::shell_close() }}

    <script type="application/json" id="hoa-community-household-options-json">[]</script>

    <div id="hoa-community-member-modal" class="crud-modal" aria-hidden="true">
        <div class="modal-content w-full max-w-3xl">
            <div class="modal-header">
                <h2 id="hoa-community-member-modal-title">Add resident</h2>
                <button type="button" class="close-modal blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body"><div id="hoa-community-member-form-fields"></div></div>
        </div>
    </div>
</div>
{% endblock %}