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

{% block page_title %}Homes{% 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">
        Homes are the property directory for this HOA. After homes exist, manage
        <a href="/plugins/hoa-community/admin-households">households</a> and
        <a href="/plugins/hoa-community/admin-members">residents</a>. CSV import accepts
        <code>building_name,unit_number,display_name,unit_type,floor_label,household_label</code>.
    </p>
    {{ crud::shell_open(config_url="/plugins/hoa-community/assets/admin/units_list.json", mount_id="hoa-community-units", custom_mount=true) }}
    <div data-crud-toolbar-extra>
        <button type="button" class="blocks-button blocks-button-secondary" id="hoa-community-import-btn">
            <i class="fas fa-file-import"></i> Import CSV
        </button>
    </div>
    <div class="blocks-responsive-table">
        <table class="blocks-admin-table responsive-table"><thead></thead><tbody><tr><td colspan="7" class="crud-empty-state py-5 text-center text-slate-600 dark:text-slate-300">Loading homes…</td></tr></tbody></table>
    </div>
    {{ crud::shell_close() }}

    <div id="hoa-community-unit-modal" class="crud-modal" aria-hidden="true">
        <div class="modal-content w-full max-w-3xl">
            <div class="modal-header">
                <h2 id="hoa-community-unit-modal-title">Add home</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-unit-form-fields"></div></div>
        </div>
    </div>

    <div id="hoa-community-import-modal" class="crud-modal" aria-hidden="true">
        <div class="modal-content w-full max-w-3xl">
            <div class="modal-header">
                <h2>Import homes CSV</h2>
                <button type="button" class="close-modal blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <p class="text-slate-600 dark:text-slate-300">Header row required. Matching <code>building_name</code> + <code>unit_number</code> updates the home; optional <code>household_label</code> creates a household stub when missing.</p>
                <label class="mb-1 block text-sm font-medium" for="hoa-community-import-csv">CSV</label>
                <textarea id="hoa-community-import-csv" class="blocks-input min-h-48 w-full" rows="12" placeholder="building_name,unit_number,display_name,unit_type,floor_label,household_label"></textarea>
                <div class="mt-3 flex flex-wrap gap-2">
                    <button type="button" class="blocks-button blocks-button-primary" id="hoa-community-import-submit">Import</button>
                    <button type="button" class="blocks-button blocks-button-secondary close-modal">Cancel</button>
                </div>
                <pre id="hoa-community-import-result" class="mt-3 max-h-48 overflow-auto whitespace-pre-wrap rounded-md border border-slate-200 bg-slate-50 p-3 text-sm dark:border-slate-700 dark:bg-slate-900 hidden"></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}