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

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


{% block extra_css %}
<style>
    /* =========================================================
       PROPERTY MANAGER DASHBOARD
    ========================================================= */

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

    .pm-dashboard-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        background:
            linear-gradient(135deg, rgba(15, 118, 110, 0.98), rgba(17, 94, 89, 0.98));
        color: #ffffff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .pm-dashboard-hero::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -90px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .pm-dashboard-hero::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -80px;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.12);
    }

    .pm-dashboard-hero-inner {
        position: relative;
        z-index: 2;
        padding: 2.5rem 2.4rem;
    }

    .pm-dashboard-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fef3c7;
        font-size: 0.86rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

    .pm-dashboard-title {
        font-size: clamp(2rem, 4vw, 3.15rem);
        line-height: 1.08;
        font-weight: 800;
        margin-bottom: 0.85rem;
    }

    .pm-dashboard-text {
        max-width: 770px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.03rem;
        line-height: 1.75;
        margin-bottom: 1.5rem;
    }

    .pm-dashboard-action-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .pm-btn-primary {
        border-radius: 999px;
        padding: 0.85rem 1.45rem;
        font-weight: 800;
        border: none;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        box-shadow: 0 16px 30px rgba(217, 119, 6, 0.22);
    }

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

    .pm-btn-outline-light {
        border-radius: 999px;
        padding: 0.85rem 1.45rem;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.36);
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
    }

    .pm-btn-outline-light:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.18);
    }

    .pm-profile-mini-card {
        height: 100%;
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
        border: 1px solid rgba(226, 232, 240, 0.9);
        padding: 1.6rem;
    }

    .pm-profile-top {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.2rem;
    }

    .pm-profile-avatar {
        width: 86px;
        height: 86px;
        min-width: 86px;
        border-radius: 28px;
        object-fit: cover;
        border: 4px solid #ffffff;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
        background: #f8fafc;
    }

    .pm-profile-name {
        color: #0f172a;
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 0.2rem;
    }

    .pm-profile-label {
        color: #0f766e;
        font-size: 0.92rem;
        font-weight: 700;
        margin-bottom: 0;
    }

    .pm-profile-meta {
        display: grid;
        gap: 0.8rem;
        margin-top: 1.2rem;
    }

    .pm-profile-meta-item {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        color: #475569;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .pm-profile-meta-item i {
        color: #0f766e;
        font-size: 1rem;
        margin-top: 0.08rem;
    }

    .pm-status-row {
        margin-top: 1.2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .pm-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.38rem;
        padding: 0.42rem 0.78rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .pm-status-pill.approved {
        background: #dcfce7;
        color: #166534;
    }

    .pm-status-pill.verified {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .pm-status-pill.pending {
        background: #fef3c7;
        color: #92400e;
    }

    /* Signup Success Panels */
    .pm-success-panel {
        border-radius: 30px;
        border: none;
        overflow: hidden;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    }

    .pm-success-panel.new-account {
        background:
            linear-gradient(135deg, #fffbeb, #fef3c7);
        border: 1px solid rgba(217, 119, 6, 0.18);
    }

    .pm-success-panel.extension {
        background:
            linear-gradient(135deg, #ecfdf5, #d1fae5);
        border: 1px solid rgba(15, 118, 110, 0.18);
    }

    .pm-success-inner {
        padding: 1.7rem 1.8rem;
    }

    .pm-success-heading {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        margin-bottom: 1rem;
    }

    .pm-success-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        background: rgba(255, 255, 255, 0.72);
    }

    .pm-success-panel.new-account .pm-success-icon {
        color: #b45309;
    }

    .pm-success-panel.extension .pm-success-icon {
        color: #0f766e;
    }

    .pm-success-title {
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 0.25rem;
    }

    .pm-success-copy {
        color: #475569;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .pm-credential-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .pm-credential-box {
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.86);
        padding: 1rem;
    }

    .pm-credential-label {
        display: block;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.35rem;
    }

    .pm-credential-value {
        color: #0f172a;
        font-weight: 800;
        word-break: break-word;
        margin-bottom: 0;
    }

    .pm-security-note {
        margin-top: 1.15rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.85);
        padding: 0.95rem 1rem;
        color: #475569;
        line-height: 1.65;
        font-size: 0.92rem;
    }

    /* Stats */
    .pm-stat-card {
        height: 100%;
        border-radius: 28px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        padding: 1.45rem 1.35rem;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
        transition: all 0.2s ease;
    }

    .pm-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
    }

    .pm-stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        color: #0f766e;
        background: #ecfdf5;
        margin-bottom: 1rem;
    }

    .pm-stat-icon.gold {
        color: #b45309;
        background: #fef3c7;
    }

    .pm-stat-icon.blue {
        color: #1d4ed8;
        background: #dbeafe;
    }

    .pm-stat-icon.slate {
        color: #334155;
        background: #e2e8f0;
    }

    .pm-stat-number {
        color: #0f172a;
        font-size: 2rem;
        line-height: 1;
        font-weight: 900;
        margin-bottom: 0.42rem;
    }

    .pm-stat-title {
        color: #334155;
        font-size: 0.95rem;
        font-weight: 800;
        margin-bottom: 0.25rem;
    }

    .pm-stat-copy {
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.55;
        margin-bottom: 0;
    }

    /* Dashboard Sections */
    .pm-section-card {
        border-radius: 32px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.09);
        overflow: hidden;
    }

    .pm-section-header {
        padding: 1.65rem 1.8rem 1.2rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .pm-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f766e;
        font-size: 0.83rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.45rem;
    }

    .pm-section-title {
        color: #0f172a;
        font-size: 1.5rem;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .pm-section-text {
        color: #64748b;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .pm-section-body {
        padding: 1.8rem;
    }

    /* Empty State */
    .pm-empty-state {
        text-align: center;
        border-radius: 30px;
        padding: 2.6rem 1.5rem;
        background:
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        border: 1px dashed rgba(15, 118, 110, 0.32);
    }

    .pm-empty-icon {
        width: 92px;
        height: 92px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 32px;
        color: #0f766e;
        background: rgba(255, 255, 255, 0.85);
        font-size: 2.35rem;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
        margin-bottom: 1.2rem;
    }

    .pm-empty-state h3 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.65rem;
    }

    .pm-empty-state p {
        color: #64748b;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.7;
        margin-bottom: 1.35rem;
    }

    /* Property Cards */
    .pm-property-card {
        height: 100%;
        border-radius: 28px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
        transition: all 0.2s ease;
    }

    .pm-property-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
    }

    .pm-property-image-wrap {
        height: 190px;
        background:
            linear-gradient(135deg, #e2e8f0, #f8fafc);
        position: relative;
    }

    .pm-property-image {
        width: 100%;
        height: 190px;
        object-fit: cover;
        display: block;
    }

    .pm-property-placeholder {
        height: 190px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 2.5rem;
    }

    .pm-property-status-badge {
        position: absolute;
        top: 14px;
        right: 14px;
        border-radius: 999px;
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
    }

    .pm-property-status-badge.approved {
        color: #166534;
        background: rgba(220, 252, 231, 0.92);
    }

    .pm-property-status-badge.pending {
        color: #92400e;
        background: rgba(254, 243, 199, 0.94);
    }

    .pm-property-body {
        padding: 1.25rem 1.25rem 1.35rem;
    }

    .pm-property-title {
        color: #0f172a;
        font-size: 1.16rem;
        font-weight: 900;
        margin-bottom: 0.45rem;
    }

    .pm-property-subtitle {
        color: #0f766e;
        font-size: 0.9rem;
        font-weight: 800;
        margin-bottom: 0.9rem;
    }

    .pm-property-meta {
        display: grid;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .pm-property-meta-item {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .pm-property-meta-item i {
        color: #0f766e;
        margin-top: 0.1rem;
    }

    .pm-property-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding-top: 0.85rem;
        border-top: 1px solid #e2e8f0;
    }

    .pm-small-btn {
        border-radius: 999px;
        font-weight: 800;
        font-size: 0.84rem;
        padding: 0.55rem 0.9rem;
    }

    /* Feature Cards */
    .pm-next-card {
        height: 100%;
        border-radius: 28px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        padding: 1.45rem;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    }

    .pm-next-icon {
        width: 54px;
        height: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        color: #0f766e;
        background: #ecfdf5;
        font-size: 1.35rem;
        margin-bottom: 1rem;
    }

    .pm-next-card h5 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.55rem;
    }

    .pm-next-card p {
        color: #64748b;
        line-height: 1.65;
        font-size: 0.94rem;
        margin-bottom: 0;
    }

    @media (max-width: 991.98px) {
        .pm-dashboard-hero-inner {
            padding: 1.8rem 1.45rem;
        }

        .pm-credential-grid {
            grid-template-columns: 1fr;
        }

        .pm-section-header,
        .pm-section-body {
            padding-left: 1.35rem;
            padding-right: 1.35rem;
        }
    }
</style>
{% endblock %}


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

        <!-- =====================================================
             SIGNUP SUCCESS NOTICE
        ====================================================== -->
        {% if just_signed_up %}

            {% if username and password %}
                <!-- Brand-new account created -->
                <div class="pm-success-panel new-account mb-4">
                    <div class="pm-success-inner">

                        <div class="pm-success-heading">
                            <span class="pm-success-icon">
                                <i class="bi bi-person-check-fill"></i>
                            </span>

                            <div>
                                <h2 class="pm-success-title">
                                    Welcome! Your Property Care Account Is Ready.
                                </h2>

                                <p class="pm-success-copy">
                                    Your account has been created successfully. Please save the login details below.
                                    You can use them later to sign in and manage your property care journey.
                                </p>
                            </div>
                        </div>

                        <div class="pm-credential-grid">

                            <div class="pm-credential-box">
                                <span class="pm-credential-label">Username</span>
                                <p class="pm-credential-value">{{ username }}</p>
                            </div>

                            <div class="pm-credential-box">
                                <span class="pm-credential-label">Temporary Password</span>
                                <p class="pm-credential-value">{{ password }}</p>
                            </div>

                            <div class="pm-credential-box">
                                <span class="pm-credential-label">Account Email</span>
                                <p class="pm-credential-value">{{ new_account_email }}</p>
                            </div>

                        </div>

                        <div class="pm-security-note">
                            <i class="bi bi-shield-lock-fill me-2"></i>
                            For your security, keep these details safely. You may later add a password-change
                            flow just like the other user journeys in the platform.
                        </div>

                    </div>
                </div>

            {% else %}
                <!-- Existing user extended access -->
                <div class="pm-success-panel extension mb-4">
                    <div class="pm-success-inner">

                        <div class="pm-success-heading mb-0">
                            <span class="pm-success-icon">
                                <i class="bi bi-link-45deg"></i>
                            </span>

                            <div>
                                <h2 class="pm-success-title">
                                    Property Care Access Added Successfully.
                                </h2>

                                <p class="pm-success-copy">
                                    Your existing Ensolanka account now includes access to
                                    <strong>{{ account_role|default:"Property Care" }}</strong>.
                                    No new login was created. You can continue using your existing username and password.
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            {% endif %}

        {% endif %}


        <!-- =====================================================
             DASHBOARD HERO + PROFILE PANEL
        ====================================================== -->
        <div class="row g-4 align-items-stretch mb-4">

            <div class="col-lg-8">
                <div class="pm-dashboard-hero h-100">
                    <div class="pm-dashboard-hero-inner">

                        <span class="pm-dashboard-badge">
                            <i class="bi bi-house-gear-fill"></i>
                            Property Care Dashboard
                        </span>

                        <h1 class="pm-dashboard-title">
                            Welcome, {{ profile.full_name }}
                        </h1>

                        <p class="pm-dashboard-text">
                            This is your Home in Sri Lanka owner space. From here, you will register properties,
                            request maintenance support, review service progress, receive inspection updates,
                            and later work with monthly care estimates and payment plans.
                        </p>

                        <div class="pm-dashboard-action-wrap">
                            <a href="{% url 'property_manager_app:managed_property_create' %}"
                                class="btn pm-btn-primary">
                                <i class="bi bi-house-add-fill me-2"></i>
                                Add Property
                            </a>

                            <a href="{% url 'property_manager_app:managed_property_list' %}"
                                class="btn pm-btn-outline-light">
                                <i class="bi bi-houses-fill me-2"></i>
                                My Properties
                            </a>

                            <a href="{% url 'property_manager_app:property_manager_profile_page' %}"
                                class="btn pm-btn-outline-light">
                                <i class="bi bi-person-badge-fill me-2"></i>
                                My Profile
                            </a>

                            <a href="{% url 'property_manager_app:property_care_calculator_page' %}"
                                class="btn pm-btn-outline-light">
                                <i class="bi bi-calculator-fill me-2"></i>
                                Cost Calculator
                            </a>

                            <a href="{% url 'property_manager_app:property_care_payment_center' %}"
                                class="btn pm-btn-primary">
                                <i class="bi bi-credit-card-2-front-fill me-2"></i>
                                Payment Center
                            </a>

                            <a href="{% url 'property_manager_app:property_care_payment_center' %}"
                                class="btn pm-btn-outline-light">
                                <i class="bi bi-wallet2 me-2"></i>
                                Top Up Wallet
                            </a>
                        </div>

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


            <div class="col-lg-4">
                <div class="pm-profile-mini-card">

                    <div class="pm-profile-top">

                        {% if profile.profile_image %}
                            <img src="{{ profile.profile_image.url }}"
                                 alt="{{ profile.full_name }}"
                                 class="pm-profile-avatar">
                        {% else %}
                            <img src="{% static default_profile_image %}"
                                 alt="Default Profile"
                                 class="pm-profile-avatar">
                        {% endif %}

                        <div>
                            <h3 class="pm-profile-name">
                                {{ profile.full_name }}
                            </h3>

                            <p class="pm-profile-label">
                                Property Care Owner
                            </p>
                        </div>
                    </div>

                    <div class="pm-profile-meta">

                        <div class="pm-profile-meta-item">
                            <i class="bi bi-envelope-fill"></i>
                            <span>{{ profile.email }}</span>
                        </div>

                        {% if profile.whatsapp_number %}
                            <div class="pm-profile-meta-item">
                                <i class="bi bi-whatsapp"></i>
                                <span>{{ profile.whatsapp_number }}</span>
                            </div>
                        {% endif %}

                        {% if profile.current_country or profile.current_city %}
                            <div class="pm-profile-meta-item">
                                <i class="bi bi-geo-alt-fill"></i>
                                <span>
                                    {% if profile.current_city %}
                                        {{ profile.current_city }}
                                    {% endif %}
                                    {% if profile.current_city and profile.current_country %}, {% endif %}
                                    {% if profile.current_country %}
                                        {{ profile.current_country }}
                                    {% endif %}
                                </span>
                            </div>
                        {% endif %}

                        <div class="pm-profile-meta-item">
                            <i class="bi bi-person-badge-fill"></i>
                            <span>{{ profile.get_client_type_display }}</span>
                        </div>

                    </div>

                    <div class="pm-status-row">

                        {% if profile.is_approved %}
                            <span class="pm-status-pill approved">
                                <i class="bi bi-check-circle-fill"></i>
                                Approved
                            </span>
                        {% else %}
                            <span class="pm-status-pill pending">
                                <i class="bi bi-hourglass-split"></i>
                                Pending
                            </span>
                        {% endif %}

                        {% if profile.is_identity_verified %}
                            <span class="pm-status-pill verified">
                                <i class="bi bi-patch-check-fill"></i>
                                Verified
                            </span>
                        {% else %}
                            <span class="pm-status-pill pending">
                                <i class="bi bi-shield-exclamation"></i>
                                Verification Pending
                            </span>
                        {% endif %}

                    </div>

                </div>
            </div>

        </div>


        <!-- =====================================================
             STATS
        ====================================================== -->
        <div class="row g-4 mb-4">

            <div class="col-sm-6 col-xl-3">
                <div class="pm-stat-card">
                    <span class="pm-stat-icon">
                        <i class="bi bi-buildings-fill"></i>
                    </span>

                    <div class="pm-stat-number">{{ total_properties }}</div>
                    <div class="pm-stat-title">Total Properties</div>
                    <p class="pm-stat-copy">
                        Properties you have registered for care or review.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-stat-card">
                    <span class="pm-stat-icon blue">
                        <i class="bi bi-check-circle-fill"></i>
                    </span>

                    <div class="pm-stat-number">{{ approved_properties }}</div>
                    <div class="pm-stat-title">Approved</div>
                    <p class="pm-stat-copy">
                        Properties already approved for the care process.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-stat-card">
                    <span class="pm-stat-icon gold">
                        <i class="bi bi-hourglass-split"></i>
                    </span>

                    <div class="pm-stat-number">{{ pending_properties }}</div>
                    <div class="pm-stat-title">Pending Review</div>
                    <p class="pm-stat-copy">
                        Properties awaiting Ensolanka review or next approval step.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-stat-card">
                    <span class="pm-stat-icon slate">
                        <i class="bi bi-house-check-fill"></i>
                    </span>

                    <div class="pm-stat-number">{{ active_properties }}</div>
                    <div class="pm-stat-title">Active Records</div>
                    <p class="pm-stat-copy">
                        Property records currently active in your dashboard.
                    </p>
                </div>
            </div>

        </div>

        <!-- =====================================================
             EXPAND YOUR ENSOLANKA ACCOUNT
        ====================================================== -->
        <div class="pm-section-card mb-4">

            <div class="pm-section-header">
                <div>
                    <span class="pm-section-kicker">
                        <i class="bi bi-link-45deg"></i>
                        Connected Ensolanka Access
                    </span>

                    <h2 class="pm-section-title">
                        Expand Your Account
                    </h2>

                    <p class="pm-section-text">
                        Use your existing Home in Sri Lanka Property Care account to activate related
                        Ensolanka services without creating a new login.
                    </p>
                </div>
            </div>

            <div class="pm-section-body">
                <div class="row g-4">

                    <!-- Rental Owner Access -->
                    <div class="col-lg-6">
                        <div class="pm-next-card h-100">

                            <span class="pm-next-icon">
                                <i class="bi bi-buildings-fill"></i>
                            </span>

                            <h5>
                                Rental Owner Access
                            </h5>

                            {% if has_rental_owner_profile %}
                                <p class="mb-4">
                                    Your Rental Owner profile is already active. Open your rental dashboard
                                    to manage rental listings and reach international guests.
                                </p>

                                <a href="{% url 'rental_app:rental_owner_dashboard' %}"
                                   class="btn btn-outline-dark rounded-pill fw-bold">
                                    <i class="bi bi-arrow-right-circle-fill me-2"></i>
                                    Open Rental Dashboard
                                </a>
                            {% else %}
                                <p class="mb-4">
                                    Activate Rental Owner access using your existing Property Care profile details.
                                    You can then create and manage rental listings from the same Ensolanka account.
                                </p>

                                <form method="post"
                                      action="{% url 'property_manager_app:activate_rental_owner_from_property_manager' %}">
                                    {% csrf_token %}

                                    <button type="submit"
                                            class="btn pm-btn-primary">
                                        <i class="bi bi-person-plus-fill me-2"></i>
                                        Activate Rental Owner Access
                                    </button>
                                </form>
                            {% endif %}

                        </div>
                    </div>

                    <!-- Affiliate Access -->
                    <div class="col-lg-6">
                        <div class="pm-next-card h-100">

                            <span class="pm-next-icon">
                                <i class="bi bi-globe2"></i>
                            </span>

                            <h5>
                                Affiliate Access
                            </h5>

                            {% if has_affiliate_profile %}
                                <p class="mb-4">
                                    Your Affiliate profile is already active. Open your Affiliate Dashboard
                                    to access your ambassador resources, referral tools, and earning opportunities.
                                </p>

                                <a href="{% url 'affiliates_app:affiliate_dashboard' %}"
                                class="btn btn-outline-dark rounded-pill fw-bold">
                                    <i class="bi bi-arrow-right-circle-fill me-2"></i>
                                    Open Affiliate Dashboard
                                </a>
                            {% else %}
                                <p class="mb-4">
                                    Activate Ensolanka Global Ambassador access using your existing Property Care
                                    account details and begin promoting Sri Lanka while exploring earning opportunities.
                                </p>

                                <form method="post"
                                    action="{% url 'property_manager_app:activate_affiliate_from_property_manager' %}">
                                    {% csrf_token %}

                                    <button type="submit"
                                            class="btn pm-btn-primary">
                                        <i class="bi bi-person-plus-fill me-2"></i>
                                        Activate Affiliate Access
                                    </button>
                                </form>
                            {% endif %}

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- =====================================================
             PROPERTY LIST SECTION
        ====================================================== -->
        <div class="pm-section-card mb-4">

            <div class="pm-section-header">
                <div>
                    <span class="pm-section-kicker">
                        <i class="bi bi-houses-fill"></i>
                        Managed Properties
                    </span>

                    <h2 class="pm-section-title">
                        Your Property Care Portfolio
                    </h2>

                    <p class="pm-section-text">
                        Add the houses, lands, villas, estates, or buildings you want Ensolanka to inspect,
                        maintain, or help manage while you are away.
                    </p>
                </div>

                <div>
                    <a href="{% url 'property_manager_app:managed_property_create' %}"
                       class="btn pm-btn-primary">
                        <i class="bi bi-plus-circle-fill me-2"></i>
                        Add Property
                    </a>
                </div>
            </div>


            <div class="pm-section-body">

                {% if properties %}

                    <div class="row g-4">

                        {% for property in properties %}
                            <div class="col-md-6 col-xl-4">
                                <div class="pm-property-card">

                                    <div class="pm-property-image-wrap">

                                        {% with first_image=property.images.first %}
                                            {% if first_image %}
                                                <img src="{{ first_image.image.url }}"
                                                     alt="{{ property.property_name }}"
                                                     class="pm-property-image">
                                            {% else %}
                                                <div class="pm-property-placeholder">
                                                    <i class="bi bi-house-heart-fill"></i>
                                                </div>
                                            {% endif %}
                                        {% endwith %}

                                        {% if property.is_approved %}
                                            <span class="pm-status-pill approved">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Approved
                                            </span>

                                        {% elif property.is_submitted_for_review %}
                                            <span class="pm-status-pill pending">
                                                <i class="bi bi-hourglass-split"></i>
                                                Submitted for Review
                                            </span>

                                        {% else %}
                                            <span class="pm-status-pill pending">
                                                <i class="bi bi-pencil-square"></i>
                                                Draft — Not Submitted
                                            </span>
                                        {% endif %}

                                    </div>


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

                                        <h3 class="pm-property-title">
                                            {{ property.property_name }}
                                        </h3>

                                        <div class="pm-property-subtitle">
                                            {{ property.get_property_category_display }}
                                        </div>

                                        <div class="pm-property-meta">

                                            {% if property.city or property.district %}
                                                <div class="pm-property-meta-item">
                                                    <i class="bi bi-geo-alt-fill"></i>
                                                    <span>
                                                        {% if property.city %}
                                                            {{ property.city }}
                                                        {% endif %}
                                                        {% if property.city and property.district %}, {% endif %}
                                                        {% if property.district %}
                                                            {{ property.district }}
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            {% endif %}

                                            <div class="pm-property-meta-item">
                                                <i class="bi bi-person-home"></i>
                                                <span>
                                                    {{ property.get_occupancy_status_display }}
                                                </span>
                                            </div>

                                            <div class="pm-property-meta-item">
                                                <i class="bi bi-bar-chart-fill"></i>
                                                <span>
                                                    Current condition:
                                                    {{ property.get_current_condition_display }}
                                                </span>
                                            </div>

                                        </div>

                                        <div class="pm-property-actions">
                                            <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                                            class="btn btn-outline-dark pm-small-btn">
                                                View
                                            </a>

                                            <a href="{% url 'property_manager_app:managed_property_update' property.pk %}"
                                            class="btn btn-outline-primary pm-small-btn">
                                                Edit
                                            </a>
                                            <a href="{% url 'property_manager_app:managed_property_image_upload' property.pk %}"
                                                class="btn btn-outline-secondary pm-card-btn">
                                                Images
                                            </a>
                                            <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                                                class="btn btn-outline-success pm-small-btn">
                                                Services
                                            </a>

                                            <a href="{% url 'property_manager_app:managed_property_estimate' property.pk %}"
                                                class="btn btn-outline-success pm-small-btn">
                                                Estimate
                                            </a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                    </div>

                {% else %}

                    <div class="pm-empty-state">

                        <div class="pm-empty-icon">
                            <i class="bi bi-house-add-fill"></i>
                        </div>

                        <h3>No properties added yet</h3>

                        <p>
                            Your owner profile is ready. The next step is to register your first Sri Lankan
                            property so Ensolanka can understand the location, land size, building details,
                            and the type of ongoing care you may need.
                        </p>

                        <a href="{% url 'property_manager_app:managed_property_create' %}"
                           class="btn pm-btn-primary">
                            <i class="bi bi-plus-circle-fill me-2"></i>
                            Add Your First Property
                        </a>

                    </div>

                {% endif %}

            </div>
        </div>


        <!-- =====================================================
             WHAT COMES NEXT
        ====================================================== -->
        <div class="row g-4">

            <div class="col-md-6 col-xl-3">
                <div class="pm-next-card">
                    <span class="pm-next-icon">
                        <i class="bi bi-house-add-fill"></i>
                    </span>

                    <h5>Add Property</h5>

                    <p>
                        Register land, houses, villas, estates, or buildings with location,
                        size, rooms, and condition information.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-next-card">
                    <span class="pm-next-icon">
                        <i class="bi bi-ui-checks-grid"></i>
                    </span>

                    <h5>Select Services</h5>

                    <p>
                        Choose inspection, cleaning, garden maintenance, bill handling,
                        emergency support, and other property care needs.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-next-card">
                    <span class="pm-next-icon">
                        <i class="bi bi-calculator-fill"></i>
                    </span>

                    <h5>Get Estimate</h5>

                    <p>
                        A future monthly care calculator will provide provisional cost estimates
                        based on property size and selected service scope.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-next-card">
                    <span class="pm-next-icon">
                        <i class="bi bi-camera-fill"></i>
                    </span>

                    <h5>Track Reports</h5>

                    <p>
                        Later, your dashboard can display property inspection notes,
                        photos, maintenance progress, and service updates.
                    </p>
                </div>
            </div>

        </div>

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