{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}Add Property | Home in Sri Lanka{% endblock %}


{% block extra_css %}
<style>
    /* =========================================================
       MANAGED PROPERTY CREATE PAGE
    ========================================================= */

    .pm-property-form-page {
        min-height: 100vh;
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 32%),
            radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.12), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #eef7f2 48%, #ffffff 100%);
        overflow: hidden;
    }

    .pm-property-form-page::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -120px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(15, 118, 110, 0.07);
        pointer-events: none;
    }

    .pm-property-form-page::after {
        content: "";
        position: absolute;
        bottom: -170px;
        left: -120px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.08);
        pointer-events: none;
    }

    .pm-property-form-wrapper {
        position: relative;
        z-index: 2;
    }

    .pm-property-intro-card {
        border-radius: 34px;
        background:
            linear-gradient(145deg, rgba(5, 46, 37, 0.98), rgba(15, 118, 110, 0.98));
        color: #ffffff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
        overflow: hidden;
        height: 100%;
    }

    .pm-property-intro-inner {
        padding: 2.6rem 2.35rem;
    }

    .pm-property-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fef3c7;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 1.2rem;
    }

    .pm-property-intro-card h1 {
        color: #ffffff;
        font-size: clamp(2.15rem, 4vw, 3.2rem);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1.08;
        margin-bottom: 1rem;
    }

    .pm-property-intro-card p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        font-size: 1.02rem;
    }

    .pm-property-flow-list {
        display: grid;
        gap: 1rem;
        margin-top: 1.6rem;
    }

    .pm-flow-item {
        display: flex;
        gap: 0.85rem;
        padding: 1rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .pm-flow-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(251, 191, 36, 0.18);
        color: #fde68a;
        font-size: 1.18rem;
    }

    .pm-flow-item h6 {
        color: #ffffff;
        font-weight: 900;
        margin-bottom: 0.3rem;
    }

    .pm-flow-item p {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.92rem;
        line-height: 1.58;
    }

    .pm-property-note {
        margin-top: 1.6rem;
        border-radius: 20px;
        padding: 1rem 1.1rem;
        background: rgba(251, 191, 36, 0.14);
        border: 1px solid rgba(251, 191, 36, 0.24);
        color: #fff8df;
        line-height: 1.65;
        font-size: 0.94rem;
    }

    .pm-property-form-card {
        border-radius: 34px;
        border: none;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.14);
        overflow: hidden;
    }

    .pm-property-form-header {
        padding: 2rem 2.2rem 1.45rem;
        background: linear-gradient(135deg, #ffffff, #f8fafc);
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-property-form-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.85rem;
        border-radius: 999px;
        background: #ecfdf5;
        color: #0f766e;
        font-size: 0.82rem;
        font-weight: 900;
        margin-bottom: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pm-property-form-header h2 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.55rem;
        letter-spacing: -0.025em;
    }

    .pm-property-form-header p {
        color: #64748b;
        line-height: 1.72;
        margin-bottom: 0;
    }

    .pm-property-form-body {
        padding: 2rem 2.2rem 2.3rem;
    }

    .pm-owner-mini-note {
        background: #ecfdf5;
        color: #115e59;
        border-radius: 22px;
        padding: 1rem 1.15rem;
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        margin-bottom: 1.6rem;
    }

    .pm-owner-mini-note i {
        font-size: 1.15rem;
        margin-top: 0.12rem;
    }

    .pm-owner-mini-note strong {
        font-weight: 900;
    }

    .pm-form-section-label {
        display: flex;
        align-items: center;
        gap: 0.62rem;
        color: #0f766e;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 0.88rem;
        letter-spacing: 0.055em;
        margin: 1.8rem 0 1rem;
    }

    .pm-form-section-label::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(to right, rgba(15, 118, 110, 0.3), transparent);
    }

    .form-label {
        color: #0f172a;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .form-control,
    .form-select {
        border-radius: 16px;
        min-height: 52px;
        border: 1px solid #dbe4ee;
        padding: 0.78rem 1rem;
        color: #0f172a;
        background: #fff;
        box-shadow: none;
    }

    textarea.form-control {
        min-height: 118px;
        resize: vertical;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.12);
    }

    .form-text {
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.55;
        margin-top: 0.36rem;
    }

    .errorlist {
        list-style: none;
        padding-left: 0;
        margin: 0.48rem 0 0;
        color: #b91c1c;
        font-size: 0.88rem;
        font-weight: 700;
    }

    .pm-form-global-errors {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        border-radius: 20px;
        padding: 1rem 1.15rem;
        margin-bottom: 1.4rem;
        font-weight: 700;
    }

    .pm-check-group {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        padding: 1.1rem 1.15rem;
        height: 100%;
    }

    .pm-check-item {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .pm-check-item .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 0.18rem;
        border-radius: 0.36rem;
        border-color: #94a3b8;
    }

    .pm-check-item .form-check-input:checked {
        background-color: #0f766e;
        border-color: #0f766e;
    }

    .pm-check-item label {
        color: #0f172a;
        font-weight: 800;
        line-height: 1.45;
        margin-bottom: 0.2rem;
    }

    .pm-check-help {
        display: block;
        color: #64748b;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .pm-form-submit-wrap {
        border-top: 1px solid #e2e8f0;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .pm-submit-property-btn {
        min-height: 56px;
        border: none;
        border-radius: 999px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        padding: 0.95rem 1.6rem;
        box-shadow: 0 16px 34px rgba(245, 158, 11, 0.22);
    }

    .pm-submit-property-btn:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-cancel-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        border-radius: 999px;
        padding: 0.95rem 1.5rem;
        font-weight: 800;
    }

    .pm-after-submit-note {
        color: #64748b;
        line-height: 1.68;
        font-size: 0.92rem;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    @media (max-width: 991.98px) {
        .pm-property-intro-inner,
        .pm-property-form-header,
        .pm-property-form-body {
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }

        .pm-property-intro-card,
        .pm-property-form-card {
            border-radius: 28px;
        }
    }
</style>
{% endblock %}


{% block content %}
<section class="pm-property-form-page py-5">
    <div class="container pm-property-form-wrapper">

        <div class="row g-4 g-xl-5 align-items-stretch">

            <!-- =====================================================
                 LEFT INTRO PANEL
            ====================================================== -->
            <div class="col-lg-5">
                <div class="pm-property-intro-card">

                    <div class="pm-property-intro-inner">

                        <span class="pm-property-badge">
                            <i class="bi bi-house-add-fill"></i>
                            Add Property
                        </span>

                        <h1>
                            Register the Property You Want Ensolanka to Care For
                        </h1>

                        <p>
                            Add the core property information now. These details will later help us build
                            better maintenance selections, monthly estimate calculations, and reviewed care plans.
                        </p>

                        <div class="pm-property-flow-list">

                            <div class="pm-flow-item">
                                <span class="pm-flow-icon">
                                    <i class="bi bi-geo-alt-fill"></i>
                                </span>
                                <div>
                                    <h6>Location & Property Type</h6>
                                    <p>
                                        Tell us where it is and whether it is a house, land, estate,
                                        villa, building, or mixed property.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-flow-item">
                                <span class="pm-flow-icon">
                                    <i class="bi bi-rulers"></i>
                                </span>
                                <div>
                                    <h6>Size & Complexity</h6>
                                    <p>
                                        Land size, floor area, storeys, buildings, and rooms will later
                                        support monthly maintenance cost estimation.
                                    </p>
                                </div>
                            </div>

                            <div class="pm-flow-item">
                                <span class="pm-flow-icon">
                                    <i class="bi bi-shield-check"></i>
                                </span>
                                <div>
                                    <h6>Condition & Access</h6>
                                    <p>
                                        Share utility status, boundary details, key-holding needs,
                                        and emergency access preferences.
                                    </p>
                                </div>
                            </div>

                        </div>

                        <div class="pm-property-note">
                            <strong>Next after this:</strong>
                            We can build image uploads, a property detail page, service selection,
                            and the monthly maintenance calculator.
                        </div>

                    </div>
                </div>
            </div>


            <!-- =====================================================
                 RIGHT FORM PANEL
            ====================================================== -->
            <div class="col-lg-7">
                <div class="pm-property-form-card">

                    <div class="pm-property-form-header">
                        <span class="pm-property-form-kicker">
                            <i class="bi bi-clipboard2-fill"></i>
                            Managed Property Details
                        </span>

                        <h2>Add a Property for Care</h2>

                        <p>
                            Complete the information below as accurately as possible.
                            Approximate values are acceptable where exact measurements are not currently available.
                        </p>
                    </div>


                    <div class="pm-property-form-body">

                        <div class="pm-owner-mini-note">
                            <i class="bi bi-person-check-fill"></i>
                            <div>
                                Adding property under:
                                <strong>{{ profile.full_name }}</strong>
                                {% if profile.email %}
                                    · {{ profile.email }}
                                {% endif %}
                            </div>
                        </div>


                        {% if form.non_field_errors %}
                            <div class="pm-form-global-errors">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}


                        <form method="post" novalidate>
                            {% csrf_token %}

                            <!-- =====================================================
                                 SECTION 1: PROPERTY IDENTITY
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-house-heart-fill"></i>
                                Property Identity
                            </div>

                            <div class="row g-3">

                                <div class="col-md-12">
                                    <label for="{{ form.property_name.id_for_label }}" class="form-label">
                                        {{ form.property_name.label }}
                                    </label>
                                    {{ form.property_name }}
                                    {% if form.property_name.help_text %}
                                        <div class="form-text">{{ form.property_name.help_text }}</div>
                                    {% endif %}
                                    {{ form.property_name.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.property_category.id_for_label }}" class="form-label">
                                        {{ form.property_category.label }}
                                    </label>
                                    {{ form.property_category }}
                                    {{ form.property_category.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.occupancy_status.id_for_label }}" class="form-label">
                                        {{ form.occupancy_status.label }}
                                    </label>
                                    {{ form.occupancy_status }}
                                    {{ form.occupancy_status.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 2: LOCATION
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-geo-alt-fill"></i>
                                Location Details
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="{{ form.city.id_for_label }}" class="form-label">
                                        {{ form.city.label }}
                                    </label>
                                    {{ form.city }}
                                    {{ form.city.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.district.id_for_label }}" class="form-label">
                                        {{ form.district.label }}
                                    </label>
                                    {{ form.district }}
                                    {{ form.district.errors }}
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.address.id_for_label }}" class="form-label">
                                        {{ form.address.label }}
                                    </label>
                                    {{ form.address }}
                                    {{ form.address.errors }}
                                </div>

                                <div class="col-md-12">
                                    <label for="{{ form.google_map_link.id_for_label }}" class="form-label">
                                        {{ form.google_map_link.label }}
                                    </label>
                                    {{ form.google_map_link }}
                                    {% if form.google_map_link.help_text %}
                                        <div class="form-text">{{ form.google_map_link.help_text }}</div>
                                    {% endif %}
                                    {{ form.google_map_link.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 3: LAND DETAILS
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-map-fill"></i>
                                Land & Outdoor Scale
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="{{ form.land_size.id_for_label }}" class="form-label">
                                        {{ form.land_size.label }}
                                    </label>
                                    {{ form.land_size }}
                                    {% if form.land_size.help_text %}
                                        <div class="form-text">{{ form.land_size.help_text }}</div>
                                    {% endif %}
                                    {{ form.land_size.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.land_size_unit.id_for_label }}" class="form-label">
                                        {{ form.land_size_unit.label }}
                                    </label>
                                    {{ form.land_size_unit }}
                                    {{ form.land_size_unit.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 4: BUILDING DETAILS
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-building-fill"></i>
                                Building Details
                            </div>

                            <div class="row g-3">

                                <div class="col-md-4">
                                    <label for="{{ form.number_of_buildings.id_for_label }}" class="form-label">
                                        {{ form.number_of_buildings.label }}
                                    </label>
                                    {{ form.number_of_buildings }}
                                    {{ form.number_of_buildings.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.total_floor_area.id_for_label }}" class="form-label">
                                        {{ form.total_floor_area.label }}
                                    </label>
                                    {{ form.total_floor_area }}
                                    {% if form.total_floor_area.help_text %}
                                        <div class="form-text">{{ form.total_floor_area.help_text }}</div>
                                    {% endif %}
                                    {{ form.total_floor_area.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.floor_area_unit.id_for_label }}" class="form-label">
                                        {{ form.floor_area_unit.label }}
                                    </label>
                                    {{ form.floor_area_unit }}
                                    {{ form.floor_area_unit.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.number_of_storeys.id_for_label }}" class="form-label">
                                        {{ form.number_of_storeys.label }}
                                    </label>
                                    {{ form.number_of_storeys }}
                                    {{ form.number_of_storeys.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.bedrooms.id_for_label }}" class="form-label">
                                        {{ form.bedrooms.label }}
                                    </label>
                                    {{ form.bedrooms }}
                                    {{ form.bedrooms.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.bathrooms.id_for_label }}" class="form-label">
                                        {{ form.bathrooms.label }}
                                    </label>
                                    {{ form.bathrooms }}
                                    {{ form.bathrooms.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.kitchens.id_for_label }}" class="form-label">
                                        {{ form.kitchens.label }}
                                    </label>
                                    {{ form.kitchens }}
                                    {{ form.kitchens.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.living_rooms.id_for_label }}" class="form-label">
                                        {{ form.living_rooms.label }}
                                    </label>
                                    {{ form.living_rooms }}
                                    {{ form.living_rooms.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label for="{{ form.other_rooms.id_for_label }}" class="form-label">
                                        {{ form.other_rooms.label }}
                                    </label>
                                    {{ form.other_rooms }}
                                    {{ form.other_rooms.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 5: CONDITION
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-clipboard-data-fill"></i>
                                Property Condition
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="{{ form.property_age.id_for_label }}" class="form-label">
                                        {{ form.property_age.label }}
                                    </label>
                                    {{ form.property_age }}
                                    {{ form.property_age.errors }}
                                </div>

                                <div class="col-md-6">
                                    <label for="{{ form.current_condition.id_for_label }}" class="form-label">
                                        {{ form.current_condition.label }}
                                    </label>
                                    {{ form.current_condition }}
                                    {{ form.current_condition.errors }}
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 6: EXTERIOR FEATURES
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-tree-fill"></i>
                                Exterior & Grounds
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.has_boundary_wall_or_fence }}
                                            <div>
                                                <label for="{{ form.has_boundary_wall_or_fence.id_for_label }}">
                                                    {{ form.has_boundary_wall_or_fence.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Useful for security checks and boundary observations.
                                                </span>
                                                {{ form.has_boundary_wall_or_fence.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.has_gate }}
                                            <div>
                                                <label for="{{ form.has_gate.id_for_label }}">
                                                    {{ form.has_gate.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Helps plan access and visible entrance checks.
                                                </span>
                                                {{ form.has_gate.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.has_garden_or_landscape }}
                                            <div>
                                                <label for="{{ form.has_garden_or_landscape.id_for_label }}">
                                                    {{ form.has_garden_or_landscape.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Relevant for garden care and outdoor upkeep estimates.
                                                </span>
                                                {{ form.has_garden_or_landscape.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.needs_grass_cutting }}
                                            <div>
                                                <label for="{{ form.needs_grass_cutting.id_for_label }}">
                                                    {{ form.needs_grass_cutting.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Useful for vacant lands, gardens, and outdoor monthly tasks.
                                                </span>
                                                {{ form.needs_grass_cutting.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 7: UTILITIES
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-lightbulb-fill"></i>
                                Utility Status
                            </div>

                            <div class="row g-3">

                                <div class="col-md-4">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.electricity_active }}
                                            <div>
                                                <label for="{{ form.electricity_active.id_for_label }}">
                                                    {{ form.electricity_active.label }}
                                                </label>
                                                {{ form.electricity_active.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.water_active }}
                                            <div>
                                                <label for="{{ form.water_active.id_for_label }}">
                                                    {{ form.water_active.label }}
                                                </label>
                                                {{ form.water_active.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.internet_active }}
                                            <div>
                                                <label for="{{ form.internet_active.id_for_label }}">
                                                    {{ form.internet_active.label }}
                                                </label>
                                                {{ form.internet_active.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 8: ACCESS & AUTHORIZATION
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-key-fill"></i>
                                Access & Emergency Support
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.needs_key_holding_service }}
                                            <div>
                                                <label for="{{ form.needs_key_holding_service.id_for_label }}">
                                                    {{ form.needs_key_holding_service.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Indicates possible future interest in trusted key custody support.
                                                </span>
                                                {{ form.needs_key_holding_service.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="pm-check-group">
                                        <div class="pm-check-item">
                                            {{ form.allows_emergency_access }}
                                            <div>
                                                <label for="{{ form.allows_emergency_access.id_for_label }}">
                                                    {{ form.allows_emergency_access.label }}
                                                </label>
                                                <span class="pm-check-help">
                                                    Final emergency permissions will later be handled through proper service terms.
                                                </span>
                                                {{ form.allows_emergency_access.errors }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>


                            <!-- =====================================================
                                 SECTION 9: NOTES
                            ====================================================== -->
                            <div class="pm-form-section-label">
                                <i class="bi bi-chat-left-text-fill"></i>
                                Owner Notes
                            </div>

                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label for="{{ form.owner_notes.id_for_label }}" class="form-label">
                                        {{ form.owner_notes.label }}
                                    </label>

                                    {{ form.owner_notes }}

                                    {% if form.owner_notes.help_text %}
                                        <div class="form-text">
                                            {{ form.owner_notes.help_text }}
                                        </div>
                                    {% endif %}

                                    {{ form.owner_notes.errors }}
                                </div>
                            </div>


                            <!-- =====================================================
                                 SUBMIT
                            ====================================================== -->
                            <div class="pm-form-submit-wrap">
                                <div class="row g-3">

                                    <div class="col-md-8">
                                        <button type="submit"
                                                class="btn pm-submit-property-btn w-100">
                                            <i class="bi bi-house-add-fill me-2"></i>
                                            Save Property
                                        </button>
                                    </div>

                                    <div class="col-md-4">
                                        <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                                           class="btn btn-outline-dark pm-cancel-link w-100">
                                            Cancel
                                        </a>
                                    </div>

                                </div>

                                <p class="pm-after-submit-note">
                                    After saving this property, the next development stages will allow image uploads,
                                    property review, maintenance service selection, and calculator-based monthly care estimates.
                                </p>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}