{% extends 'expat_life/base.html' %}
{% load static %}

{% block title %}{{ listing.title }} | Sri Lanka Rental Property{% endblock %}

{% block content %}

<style>
    .rental-detail-page {
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 28%),
            radial-gradient(circle at 90% 16%, rgba(20, 184, 166, 0.09), transparent 30%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f0fdfa 100%);
        overflow: hidden;
    }

    /* =========================
       HERO / TOP SECTION
       ========================= */
    .rental-detail-hero {
        position: relative;
        padding: 5.5rem 0 4.5rem;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 32%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.20), transparent 35%),
            linear-gradient(135deg, rgba(5, 46, 37, 0.96), rgba(15, 118, 110, 0.90)),
            url("{% static 'expat_life/images/rentals_hero.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

    .rental-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 35%),
            radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.12), transparent 28%);
        pointer-events: none;
    }

    .rental-detail-hero::after {
        content: "";
        position: absolute;
        right: -170px;
        bottom: -210px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .rental-detail-hero .container {
        position: relative;
        z-index: 2;
    }

    .rental-detail-kicker {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ccfbf1;
        font-size: .78rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .rental-detail-kicker i {
        color: #fde68a;
    }

    .rental-detail-hero h1 {
        color: #fff;
        font-size: clamp(2.25rem, 4vw, 4rem);
        font-weight: 950;
        line-height: 1.06;
        letter-spacing: -0.05em;
    }

    .rental-detail-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        line-height: 1.8;
    }

    .rental-detail-price {
        display: inline-flex;
        align-items: flex-end;
        gap: .35rem;
        padding: .85rem 1.15rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: #0f766e;
        font-size: 2rem;
        font-weight: 950;
        line-height: 1;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.20);
        backdrop-filter: blur(10px);
    }

    .rental-detail-price span {
        color: #64748b;
        font-size: .92rem;
        font-weight: 850;
        padding-bottom: .18rem;
    }

    .rental-hero-trust-row {
        margin-top: 1.6rem;
    }

    .rental-hero-trust-item {
        height: 100%;
        border-radius: 20px;
        padding: .9rem 1rem;
        background: rgba(255, 255, 255, 0.13);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.86);
        font-size: .9rem;
        line-height: 1.55;
    }

    .rental-hero-trust-item strong {
        display: block;
        color: #fde68a;
        font-weight: 950;
        margin-bottom: .2rem;
    }

    /* =========================
       PREMIUM CARDS
       ========================= */
    .premium-detail-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 28px 72px rgba(15, 23, 42, 0.13);
        overflow: hidden;
    }

    .premium-detail-card.padded {
        padding: 1.55rem;
    }

    .gallery-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(14px);
    }

    .main-rental-image-wrapper {
        position: relative;
        border-radius: 28px;
        overflow: hidden;
        background: linear-gradient(135deg, #ecfeff, #fef9c3);
    }

    .main-rental-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.24));
        pointer-events: none;
    }

    .package-detail-image {
        display: block;
        width: 100%;
        height: 520px;
        object-fit: cover;
    }

    .rental-gallery-label {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .55rem .85rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #0f766e;
        font-size: .8rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    }

    .rental-thumb-image {
        height: 100px;
        width: 100%;
        object-fit: cover;
        cursor: pointer;
        border-radius: 18px;
        border: 3px solid #ffffff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
        transition: transform 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
    }

    .rental-thumb-image:hover {
        transform: translateY(-3px) scale(1.025);
        opacity: 0.92;
        border-color: #facc15;
    }

    .package-detail-placeholder {
        min-height: 520px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 35%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.22), transparent 35%),
            #f8fafc;
        color: #0f766e;
    }

    .package-detail-placeholder i {
        font-size: 4rem;
    }

    /* =========================
       SUMMARY CARD
       ========================= */
    .property-summary-card {
        position: relative;
        overflow: hidden;
        padding: 1.55rem;
        border-radius: 30px;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 30%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.10), transparent 32%),
            rgba(255, 255, 255, 0.98);
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
    }

    .property-summary-card h6,
    .content-card h3,
    .content-card h5,
    .side-info-card h4 {
        color: #0f172a;
        font-weight: 950;
        letter-spacing: -0.02em;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .summary-item {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .85rem .9rem;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    }

    .summary-item i {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e;
        font-size: .95rem;
    }

    .summary-item span {
        display: block;
        color: #64748b;
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .1rem;
    }

    .summary-item strong {
        color: #0f172a;
        font-weight: 900;
    }

    .rental-feature-badges {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .rental-feature-badges .badge {
        padding: .55rem .75rem;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.10) !important;
        border: 1px solid rgba(15, 118, 110, 0.16);
        color: #0f766e !important;
        font-weight: 850;
    }

    /* =========================
       CTA / ALERTS
       ========================= */
    .rental-interest-card {
        border-radius: 28px;
        padding: 1.25rem;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid #e2e8f0;
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08);
    }

    .rental-detail-page .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .82rem 1.15rem;
        transition: all .22s ease;
    }

    .rental-detail-page .btn-dark {
        border: none;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        box-shadow: 0 16px 30px rgba(15, 118, 110, 0.22);
    }

    .rental-detail-page .btn-dark:hover {
        background: linear-gradient(135deg, #0d9488, #065f46);
        transform: translateY(-2px);
    }

    .rental-detail-page .btn-secondary {
        border: none;
        background: #94a3b8;
        color: #fff;
    }

    .premium-alert {
        border: none;
        border-radius: 24px;
        padding: 1.1rem 1.2rem;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    }

    .premium-alert.alert-success {
        background:
            radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 30%),
            #ecfdf5;
        color: #065f46;
        border: 1px solid rgba(16, 185, 129, 0.18);
    }

    .premium-alert.alert-warning {
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 30%),
            #fffbeb;
        color: #92400e;
        border: 1px solid rgba(245, 158, 11, 0.20);
    }

    .premium-alert .text-muted {
        color: rgba(15, 23, 42, 0.62) !important;
    }

    .rental-interest-note {
        color: rgba(255, 255, 255, 0.84);
        line-height: 1.65;
    }

    /* =========================
       LOWER SECTION
       ========================= */
    .rental-detail-lower-section {
        position: relative;
        padding: 5rem 0;
        background:
            radial-gradient(circle at 8% 20%, rgba(20, 184, 166, 0.07), transparent 26%),
            radial-gradient(circle at 92% 78%, rgba(250, 204, 21, 0.07), transparent 28%),
            #ffffff;
    }

    .content-card {
        padding: 1.7rem;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
    }

    .content-card .text-muted {
        color: #64748b !important;
        line-height: 1.85;
    }

    .content-title-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 17px;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 30px rgba(15, 118, 110, 0.18);
    }

    .side-info-card {
        position: sticky;
        top: 1rem;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
        overflow: hidden;
    }

    .side-info-header {
        position: relative;
        padding: 1.6rem;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.13), transparent 34%),
            linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
    }

    .side-info-header h4 {
        color: #fff;
    }

    .side-info-header p {
        color: rgba(255, 255, 255, 0.82) !important;
        line-height: 1.65;
    }

    .side-info-body {
        padding: 1.6rem;
    }

    .info-row {
        display: flex;
        gap: .8rem;
        padding: .95rem 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .info-row:first-child {
        padding-top: 0;
    }

    .info-row i {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e;
    }

    .info-row strong {
        color: #0f172a;
        font-weight: 900;
    }

    .info-row span {
        color: #64748b;
        line-height: 1.55;
    }

    .availability-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .42rem .75rem;
        border-radius: 999px;
        font-size: .82rem;
        font-weight: 850;
    }

    .availability-pill.available {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid rgba(16, 185, 129, 0.18);
    }

    .availability-pill.unavailable {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.18);
    }

    @media (max-width: 991.98px) {
        .rental-detail-hero {
            padding: 4.5rem 0 3.8rem;
        }

        .package-detail-image,
        .package-detail-placeholder {
            height: auto;
            min-height: 380px;
        }

        .side-info-card {
            position: relative;
            top: auto;
        }
    }

    @media (max-width: 575.98px) {
        .rental-detail-hero {
            padding: 3.5rem 0 3rem;
        }

        .rental-detail-hero h1 {
            font-size: 2.25rem;
        }

        .premium-detail-card,
        .content-card,
        .side-info-card,
        .property-summary-card {
            border-radius: 24px;
        }

        .premium-detail-card.padded,
        .property-summary-card,
        .content-card,
        .side-info-header,
        .side-info-body {
            padding: 1.2rem;
        }

        .main-rental-image-wrapper,
        .package-detail-placeholder {
            border-radius: 22px;
        }

        .package-detail-image {
            height: 340px;
        }

        .rental-thumb-image {
            height: 82px;
            border-radius: 14px;
        }

        .rental-detail-price {
            font-size: 1.65rem;
            width: 100%;
            justify-content: center;
        }
    }

    .rental-related-actions {
        position: relative;
        overflow: hidden;
        padding: 1.15rem;
        border-radius: 24px;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.80), transparent 36%),
            radial-gradient(circle at 14% 86%, rgba(255, 193, 7, 0.07), transparent 34%),
            linear-gradient(
                135deg,
                rgba(255, 252, 244, 0.86),
                rgba(248, 251, 255, 0.68)
            );
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow:
            0 16px 34px rgba(15, 23, 42, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .rental-related-actions::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, #ffc107, #0f766e, #0d6efd);
    }

    .rental-related-actions-title {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        color: #102033;
        font-weight: 950;
        letter-spacing: -0.015em;
        margin-bottom: 0.9rem;
    }

    .rental-related-actions-title i {
        color: #0f766e;
    }

    .rental-secondary-action {
        position: relative;
        z-index: 2;
        border-radius: 999px;
        padding: 0.75rem 1.15rem;
        font-weight: 850;
        color: #07131c;
        background: #ffffff;
        border: 1px solid rgba(7, 19, 28, 0.18);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
        transition: all 0.22s ease;
    }

    .rental-secondary-action:hover {
        background: linear-gradient(135deg, #07131c, #0d6efd);
        border-color: transparent;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(13, 110, 253, 0.18);
    }

    @media (max-width: 575.98px) {
        .rental-related-actions .btn {
            width: 100%;
        }
    }
</style>

<div class="rental-detail-page">

    <!-- HERO / TOP DETAIL SECTION -->
    <section class="rental-detail-hero">
        <div class="container">
            <div class="row g-5 align-items-start">

                <!-- IMAGE GALLERY -->
                <div class="col-lg-7">
                    <div class="premium-detail-card gallery-card padded">
                        {% if all_images %}
                            <div class="main-rental-image-wrapper mb-3">
                                <img id="mainRentalImage"
                                     src="{{ all_images.0.image.url }}"
                                     class="package-detail-image"
                                     alt="{{ listing.title }}">

                                <div class="rental-gallery-label">
                                    <i class="bi bi-images"></i>
                                    Property Gallery
                                </div>
                            </div>

                            {% if all_images|length > 1 %}
                                <div class="row g-3">
                                    {% for img in all_images %}
                                        <div class="col-4 col-md-3">
                                            <img src="{{ img.image.url }}"
                                                 class="rental-thumb-image"
                                                 alt="{{ img.caption|default:listing.title }}"
                                                 onclick="document.getElementById('mainRentalImage').src='{{ img.image.url }}'">
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="package-detail-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-house-heart-fill"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- PROPERTY INTRO -->
                <div class="col-lg-5">
                    <span class="rental-detail-kicker">
                        <i class="bi bi-house-check-fill"></i>
                        {% if listing.visibility == 'private' %}Private Rental Property{% else %}Rental Property{% endif %}
                    </span>

                    <h1 class="fw-bold mb-3">{{ listing.title }}</h1>

                    <div class="rental-detail-price mb-3">
                        ${{ listing.monthly_rent_usd }}<span>/month</span>
                    </div>

                    <p class="lead mb-4">{{ listing.short_description }}</p>

                    <div class="row g-3 rental-hero-trust-row mb-4">
                        <div class="col-sm-4">
                            <div class="rental-hero-trust-item">
                                <strong>Reviewed</strong>
                                Listing quality checked.
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="rental-hero-trust-item">
                                <strong>Guest-Friendly</strong>
                                Long-stay focused.
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="rental-hero-trust-item">
                                <strong>Guided</strong>
                                Platform-assisted process.
                            </div>
                        </div>
                    </div>

                    <!-- PROPERTY SUMMARY -->
                    <div class="property-summary-card mb-4">
                        <h6 class="fw-bold mb-3">Property Summary</h6>

                        <div class="summary-grid">
                            <div class="summary-item">
                                <i class="bi bi-geo-alt-fill"></i>
                                <div>
                                    <span>Location</span>
                                    <strong>{{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-house-door-fill"></i>
                                <div>
                                    <span>Property Type</span>
                                    <strong>{{ listing.get_property_type_display }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-door-open-fill"></i>
                                <div>
                                    <span>Bedrooms / Bathrooms</span>
                                    <strong>{{ listing.bedrooms }} bedroom{{ listing.bedrooms|pluralize }} · {{ listing.bathrooms }} bathroom{{ listing.bathrooms|pluralize }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-people-fill"></i>
                                <div>
                                    <span>Max Occupants</span>
                                    <strong>{{ listing.max_occupants }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-lamp-fill"></i>
                                <div>
                                    <span>Furnishing</span>
                                    <strong>{{ listing.get_furnishing_display }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-shield-lock-fill"></i>
                                <div>
                                    <span>Security Deposit</span>
                                    <strong>${{ listing.security_deposit_usd }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- FEATURES -->
                    <div class="rental-feature-badges mb-4">
                        {% if listing.has_wifi %}<span class="badge"><i class="bi bi-wifi me-1"></i>Wi-Fi</span>{% endif %}
                        {% if listing.has_ac %}<span class="badge"><i class="bi bi-snow me-1"></i>A/C</span>{% endif %}
                        {% if listing.has_kitchen %}<span class="badge"><i class="bi bi-cup-hot-fill me-1"></i>Kitchen</span>{% endif %}
                        {% if listing.has_parking %}<span class="badge"><i class="bi bi-car-front-fill me-1"></i>Parking</span>{% endif %}
                        {% if listing.near_beach %}<span class="badge"><i class="bi bi-water me-1"></i>Near Beach</span>{% endif %}
                        {% if listing.suitable_for_remote_work %}<span class="badge"><i class="bi bi-laptop-fill me-1"></i>Remote Work Friendly</span>{% endif %}
                    </div>

                    <!-- INTEREST / CONFIRMATION LOGIC -->
                    <div class="rental-interest-card">
                        {% if is_final_selected %}
                            <div class="alert premium-alert alert-success mb-0">
                                <h6 class="fw-bold mb-2">
                                    <i class="bi bi-check-circle-fill me-1"></i>
                                    Final Property Selected
                                </h6>
                                <p class="mb-2">
                                    This property is currently marked as your final selected rental property.
                                </p>
                                <p class="mb-0 small text-muted">
                                    If you later choose another interested property as your final property, this selection will be updated automatically.
                                </p>
                            </div>
                        {% elif existing_interest %}
                            <div class="alert premium-alert alert-success mb-0">
                                <h6 class="fw-bold mb-2">
                                    <i class="bi bi-heart-fill me-1"></i>
                                    Interest Already Submitted
                                </h6>
                                <p class="mb-0">
                                    You have already marked interest in this property. You can continue reviewing it from your Interested Properties list and make it your final property later if you wish.
                                </p>
                            </div>
                        {% else %}
                            {% if can_notify_interest %}
                                <form method="post" action="{% url 'rental_app:notify_rental_interest' listing.slug %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                        <i class="bi bi-send-check-fill me-2"></i>
                                        Select & Notify Interest
                                    </button>
                                </form>

                                <div class="small text-muted">
                                    By selecting this property, you notify our team that you want to move forward with review,
                                    coordination, and possible negotiation with the rental owner.
                                </div>
                            {% else %}
                                <button type="button" class="btn btn-secondary btn-lg w-100 mb-3" disabled>
                                    <i class="bi bi-lock-fill me-2"></i>
                                    Select & Notify Interest
                                </button>

                                <div class="alert premium-alert alert-warning mb-0">
                                    <strong>Confirmation required.</strong><br>
                                    You need to complete the confirmation payment before you can notify interest, move toward
                                    pre-booking, and allow our team to begin coordination and negotiation with the rental owner.
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                    <!-- RELATED RENTAL ACTIONS -->
                    <div class="rental-related-actions mt-4">
                        <div class="rental-related-actions-title">
                            <i class="bi bi-compass-fill"></i>
                            Continue Exploring Properties
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{% url 'expat_life:my_interested_properties' %}"
                            class="btn rental-secondary-action">
                                <i class="bi bi-house-heart me-2"></i>
                                Interested Properties
                            </a>

                            <a href="{% url 'expat_life:public_rental_list' %}"
                            class="btn rental-secondary-action">
                                <i class="bi bi-search me-2"></i>
                                Browse All
                            </a>
                        </div>
                    </div>
                </div>

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

    <!-- LOWER DETAIL SECTION -->
    <section class="rental-detail-lower-section">
        <div class="container">
            <div class="row g-4 align-items-start">

                <!-- DESCRIPTION CONTENT -->
                <div class="col-lg-8">
                    <div class="content-card mb-4">
                        <div class="d-flex gap-3 align-items-start mb-3">
                            <div class="content-title-icon">
                                <i class="bi bi-file-text-fill"></i>
                            </div>

                            <div>
                                <h3 class="fw-bold mb-1">Property Description</h3>
                                <p class="text-muted mb-0">
                                    A closer look at this rental home, living experience, and suitability for your Sri Lanka stay.
                                </p>
                            </div>
                        </div>

                        <div class="text-muted">
                            {{ listing.full_description|linebreaks }}
                        </div>
                    </div>

                    {% if listing.house_rules %}
                        <div class="content-card mb-4">
                            <div class="d-flex gap-3 align-items-start mb-3">
                                <div class="content-title-icon">
                                    <i class="bi bi-clipboard-check-fill"></i>
                                </div>

                                <div>
                                    <h5 class="fw-bold mb-1">House Rules</h5>
                                    <p class="text-muted mb-0">
                                        Please review the owner’s living rules and expectations before moving forward.
                                    </p>
                                </div>
                            </div>

                            <div class="text-muted mb-0">
                                {{ listing.house_rules|linebreaks }}
                            </div>
                        </div>
                    {% endif %}
                </div>

                <!-- SIDE INFO CARD -->
                <div class="col-lg-4">
                    <div class="side-info-card">
                        <div class="side-info-header">
                            <h4 class="fw-bold mb-2">Important Note</h4>
                            <p class="text-muted mb-0">
                                Direct rental owner contact details are not displayed here. All communication and negotiation are handled through our platform.
                            </p>
                        </div>

                        <div class="side-info-body">
                            <div class="info-row">
                                <i class="bi bi-calendar-check-fill"></i>
                                <div>
                                    <strong>Availability</strong><br>
                                    {% if listing.is_available %}
                                        <span class="availability-pill available">
                                            <i class="bi bi-check-circle-fill"></i>
                                            Available
                                        </span>
                                    {% else %}
                                        <span class="availability-pill unavailable">
                                            <i class="bi bi-x-circle-fill"></i>
                                            Not Available
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            {% if listing.available_from %}
                                <div class="info-row">
                                    <i class="bi bi-calendar-event-fill"></i>
                                    <div>
                                        <strong>Available From</strong><br>
                                        <span>{{ listing.available_from }}</span>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="info-row">
                                <i class="bi bi-eye-fill"></i>
                                <div>
                                    <strong>Listing Access</strong><br>
                                    <span>
                                        {% if listing.visibility == 'private' %}
                                            Private for confirmed Guests
                                        {% else %}
                                            Public listing
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="info-row">
                                <i class="bi bi-compass-fill"></i>
                                <div>
                                    <strong>Process</strong><br>
                                    <span>
                                        Browse property details, confirm your interest, and our team will assist with the next practical steps.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

</div>

{% endblock %}