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

{% block title %}Sri Lanka Rental Listings | Guest-Friendly Homes for Long Stays{% endblock %}

{% block content %}

<style>
    .rental-list-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
       ========================= */
    .rental-list-hero {
        position: relative;
        padding: 6rem 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-list-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-list-hero::after {
        content: "";
        position: absolute;
        right: -160px;
        bottom: -190px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

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

    .rental-list-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-list-kicker i {
        color: #fde68a;
    }

    .rental-list-hero h1 {
        color: #fff;
        font-size: clamp(2.4rem, 4.3vw, 4.2rem);
        font-weight: 950;
        line-height: 1.05;
        letter-spacing: -0.05em;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    .rental-list-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        line-height: 1.8;
        max-width: 830px;
        margin-left: auto;
        margin-right: auto;
    }

    .rental-list-hero-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .85rem 1.35rem;
        transition: all .22s ease;
    }

    .rental-list-hero-actions .btn-warning {
        border: none;
        background: linear-gradient(135deg, #facc15, #f59e0b);
        color: #422006;
        box-shadow: 0 18px 36px rgba(250, 204, 21, 0.24);
    }

    .rental-list-hero-actions .btn-warning:hover {
        background: linear-gradient(135deg, #fde047, #f59e0b);
        color: #422006;
        transform: translateY(-2px);
    }

    .rental-list-hero-actions .btn-outline-light {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.48);
        backdrop-filter: blur(8px);
    }

    .rental-list-hero-actions .btn-outline-light:hover {
        background: #fff;
        color: #0f766e;
        border-color: #fff;
        transform: translateY(-2px);
    }

    .rental-hero-mini-stats {
        margin-top: 2rem;
    }

    .rental-hero-mini-stat {
        height: 100%;
        border-radius: 22px;
        padding: 1rem 1.05rem;
        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: .92rem;
        line-height: 1.55;
    }

    .rental-hero-mini-stat strong {
        display: block;
        color: #fde68a;
        font-weight: 950;
        margin-bottom: .25rem;
    }

    /* =========================
       MAIN AREA
       ========================= */
    .rental-list-main {
        position: relative;
        padding: 4rem 0 5rem;
    }

    .premium-panel {
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.09);
    }

    .access-panel {
        position: relative;
        overflow: hidden;
        padding: 1.6rem;
    }

    .access-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 32%),
            radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.12), transparent 34%);
        pointer-events: none;
    }

    .access-panel > * {
        position: relative;
        z-index: 2;
    }

    .access-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 20px;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        box-shadow: 0 18px 34px rgba(15, 118, 110, 0.24);
    }

    .access-panel h5,
    .filter-panel h5,
    .results-heading h5 {
        color: #0f172a;
        font-weight: 950;
        letter-spacing: -0.02em;
    }

    .access-panel p,
    .filter-panel p,
    .results-heading p {
        color: #64748b !important;
        line-height: 1.7;
    }

    .access-panel .btn,
    .filter-panel .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .72rem 1.15rem;
    }

    .access-panel .btn-primary,
    .filter-panel .btn-dark,
    .rental-listing-card .btn-dark {
        border: none;
        background: linear-gradient(135deg, #0f766e, #064e3b);
        box-shadow: 0 16px 30px rgba(15, 118, 110, 0.20);
    }

    .access-panel .btn-primary:hover,
    .filter-panel .btn-dark:hover,
    .rental-listing-card .btn-dark:hover {
        background: linear-gradient(135deg, #0d9488, #065f46);
    }

    .access-panel .btn-outline-dark,
    .filter-panel .btn-outline-secondary {
        border: 2px solid #0f766e;
        color: #0f766e;
        background: transparent;
    }

    .access-panel .btn-outline-dark:hover,
    .filter-panel .btn-outline-secondary:hover {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }

    /* =========================
       FILTERS
       ========================= */
    .filter-panel {
        padding: 1.7rem;
    }

    .filter-title-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .filter-kicker {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .42rem .8rem;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.10);
        border: 1px solid rgba(15, 118, 110, 0.16);
        color: #0f766e;
        font-size: .76rem;
        font-weight: 900;
        letter-spacing: .07em;
        text-transform: uppercase;
        margin-bottom: .65rem;
    }

    .filter-panel .form-label {
        color: #0f172a;
        font-size: .88rem;
        font-weight: 850 !important;
    }

    .filter-panel .form-control,
    .filter-panel .form-select {
        min-height: 48px;
        border-radius: 16px;
        border: 1px solid #cbd5e1;
        background-color: #ffffff;
        color: #0f172a;
        box-shadow: none;
    }

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

    .feature-checks {
        padding: 1rem;
        border-radius: 22px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .feature-checks .form-check {
        padding: .35rem .7rem .35rem 1.75rem;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    }

    .feature-checks .form-check-label {
        color: #334155;
        font-size: .9rem;
        font-weight: 700;
    }

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

    /* =========================
       RESULTS HEADING
       ========================= */
    .results-heading {
        padding: 1.35rem 1.5rem;
        border-radius: 26px;
        background:
            radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 30%),
            #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
    }

    .page-pill {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .55rem .9rem;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.10);
        color: #0f766e;
        font-weight: 850;
        border: 1px solid rgba(15, 118, 110, 0.14);
    }

    /* =========================
       LISTING CARDS
       ========================= */
    .rental-listing-card {
        height: 100%;
        border-radius: 30px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
        transition: all .28s ease;
    }

    .rental-listing-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 36px 88px rgba(15, 23, 42, 0.16);
        border-color: rgba(15, 118, 110, 0.28);
    }

    .rental-card-image-wrap {
        position: relative;
        overflow: hidden;
        height: 235px;
        background: linear-gradient(135deg, #ecfeff, #fef9c3);
    }

    .rental-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

    .rental-listing-card:hover .rental-card-image {
        transform: scale(1.045);
    }

    .rental-card-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 3rem;
        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;
    }

    .rental-price-badge {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        padding: .7rem .95rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
        color: #0f766e;
        font-weight: 950;
        line-height: 1.1;
    }

    .rental-price-badge span {
        display: block;
        color: #64748b;
        font-size: .75rem;
        font-weight: 800;
        margin-top: .18rem;
    }

    .rental-type-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        padding: .45rem .78rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #0f766e;
        border: 1px solid rgba(15, 118, 110, 0.16);
        font-size: .75rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
    }

    .rental-card-body {
        padding: 1.35rem;
    }

    .rental-card-body h5 {
        color: #0f172a;
        font-weight: 950;
        letter-spacing: -0.02em;
        line-height: 1.35;
    }

    .rental-mini-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rental-mini-list li {
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        color: #64748b;
        font-size: .92rem;
        line-height: 1.45;
        margin-bottom: .48rem;
    }

    .rental-mini-list i {
        color: #0f766e;
        margin-top: .12rem;
    }

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

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

    .rental-card-body .text-muted {
        color: #64748b !important;
        line-height: 1.65;
    }

    .rental-listing-card .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: .72rem 1rem;
    }

    .rental-listing-card .btn-outline-primary {
        border: 2px solid #0f766e;
        color: #0f766e;
    }

    .rental-listing-card .btn-outline-primary:hover {
        background: #0f766e;
        color: #fff;
        border-color: #0f766e;
    }

    .empty-rental-results {
        border-radius: 32px;
        padding: 3rem 1.5rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
        text-align: center;
    }

    .empty-rental-results i {
        width: 74px;
        height: 74px;
        border-radius: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #facc15, #0f766e);
        color: #fff;
        font-size: 2rem;
        margin-bottom: 1.2rem;
        box-shadow: 0 20px 38px rgba(15, 118, 110, 0.20);
    }

    /* =========================
       PAGINATION
       ========================= */
    .rental-pagination .page-link {
        border-radius: 999px !important;
        border: 1px solid #dbe4ef;
        color: #0f766e;
        font-weight: 850;
        padding: .62rem .9rem;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    }

    .rental-pagination .page-link:hover {
        background: rgba(15, 118, 110, 0.08);
        border-color: rgba(15, 118, 110, 0.20);
        color: #0f766e;
    }

    .rental-pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #0f766e, #064e3b);
        border-color: #0f766e;
        color: #fff;
        box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
    }

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

        .rental-list-main {
            padding: 3rem 0 4rem;
        }

        .premium-panel {
            border-radius: 28px;
        }
    }

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

        .rental-list-hero h1 {
            font-size: 2.35rem;
        }

        .rental-list-hero .lead {
            font-size: 1rem;
        }

        .access-panel,
        .filter-panel,
        .results-heading {
            padding: 1.2rem;
        }

        .rental-listing-card,
        .premium-panel,
        .empty-rental-results {
            border-radius: 24px;
        }

        .rental-card-image-wrap {
            height: 220px;
        }

        .feature-checks {
            padding: .85rem;
        }

        .feature-checks .form-check {
            width: 100%;
        }
    }
</style>

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

    <!-- HERO -->
    <section class="rental-list-hero">
        <div class="container text-center">
            <span class="rental-list-kicker">
                <i class="bi bi-house-heart-fill"></i>
                Rental Listings
            </span>

            <h1 class="fw-bold mb-3">
                Explore Guest-Friendly Rental Homes in Sri Lanka
            </h1>

            <p class="lead mb-4">
                Browse approved apartments, annexes, villas, guesthouses, and private homes designed for
                Guests, digital nomads, retirees, and long-stay visitors planning a smoother Sri Lanka lifestyle.
            </p>

            <div class="d-flex flex-wrap justify-content-center gap-3 rental-list-hero-actions">
                <a href="#rental-listings" class="btn btn-warning btn-lg">
                    Browse Listings
                </a>

                {% if is_foreigner_user %}
                    <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-light btn-lg">
                        My Guest Dashboard
                    </a>
                {% else %}
                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-light btn-lg">
                        Free Guest Signup
                    </a>
                {% endif %}
            </div>

            <div class="row g-3 justify-content-center rental-hero-mini-stats">
                <div class="col-md-4 col-lg-3">
                    <div class="rental-hero-mini-stat">
                        <strong>Approved Listings</strong>
                        Reviewed rental options for better trust and clarity.
                    </div>
                </div>

                <div class="col-md-4 col-lg-3">
                    <div class="rental-hero-mini-stat">
                        <strong>Guest-Oriented</strong>
                        Suitable for relocation, remote work, retirement, and long stays.
                    </div>
                </div>

                <div class="col-md-4 col-lg-3">
                    <div class="rental-hero-mini-stat">
                        <strong>Guided Access</strong>
                        More details unlock as your Guest profile progresses.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- MAIN CONTENT -->
    <section id="rental-listings" class="rental-list-main">
        <div class="container">

            <!-- ACCESS LEVELS -->
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="premium-panel access-panel">
                        <div class="row align-items-center g-4">
                            <div class="col-lg-8">
                                <div class="d-flex gap-3 align-items-start">
                                    <div class="access-icon">
                                        <i class="bi bi-shield-check"></i>
                                    </div>

                                    <div>
                                        <h5 class="fw-bold mb-2">Access Levels for Rental Details</h5>
                                        <p class="text-muted mb-0">
                                            Public visitors can preview limited rental information. Registered Guests can unlock
                                            more details. Confirmed Guests can access full details, and eligible confirmed Guests
                                            can also notify interest in suitable properties.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 text-lg-end">
                                {% if not request.user.is_authenticated %}
                                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-primary">
                                        Free Guest Signup
                                    </a>
                                {% elif is_foreigner_authenticated and not is_confirmed_foreigner %}
                                    <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-primary">
                                        Complete Confirmation
                                    </a>
                                {% elif can_view_private_listings %}
                                    <a href="{% url 'rental_app:private_rental_list' %}" class="btn btn-outline-dark">
                                        View Private Listings
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FILTER BOX -->
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="premium-panel filter-panel">
                        <form method="get">
                            <div class="filter-title-row">
                                <div>
                                    <span class="filter-kicker">
                                        <i class="bi bi-sliders"></i>
                                        Smart Search
                                    </span>
                                    <h5 class="fw-bold mb-1">Find a Rental That Matches Your Lifestyle</h5>
                                    <p class="text-muted mb-0">
                                        Filter by city, type, furnishing, rent range, bedrooms, and living features.
                                    </p>
                                </div>

                                <div class="d-flex flex-wrap gap-2">
                                    <button type="submit" class="btn btn-dark">
                                        <i class="bi bi-search me-1"></i>
                                        Apply Filters
                                    </button>
                                    <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-outline-secondary">
                                        Reset
                                    </a>
                                </div>
                            </div>

                            <div class="row g-3 align-items-end">
                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">City</label>
                                    <select name="city" class="form-select">
                                        <option value="">All Cities</option>
                                        {% for value, label in city_choices %}
                                            <option value="{{ value }}" {% if selected_city == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Property Type</label>
                                    <select name="property_type" class="form-select">
                                        <option value="">All Types</option>
                                        {% for value, label in property_type_choices %}
                                            <option value="{{ value }}" {% if selected_property_type == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Furnishing</label>
                                    <select name="furnishing" class="form-select">
                                        <option value="">Any Furnishing</option>
                                        {% for value, label in furnishing_choices %}
                                            <option value="{{ value }}" {% if selected_furnishing == value %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Bedrooms</label>
                                    <select name="bedrooms" class="form-select">
                                        <option value="">Any</option>
                                        <option value="1" {% if selected_bedrooms == '1' %}selected{% endif %}>1+</option>
                                        <option value="2" {% if selected_bedrooms == '2' %}selected{% endif %}>2+</option>
                                        <option value="3" {% if selected_bedrooms == '3' %}selected{% endif %}>3+</option>
                                        <option value="4" {% if selected_bedrooms == '4' %}selected{% endif %}>4+</option>
                                    </select>
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Min Rent (USD)</label>
                                    <input type="number"
                                           name="min_rent"
                                           value="{{ selected_min_rent }}"
                                           class="form-control"
                                           placeholder="e.g. 300">
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Max Rent (USD)</label>
                                    <input type="number"
                                           name="max_rent"
                                           value="{{ selected_max_rent }}"
                                           class="form-control"
                                           placeholder="e.g. 1500">
                                </div>

                                <div class="col-md-12 col-lg-6">
                                    <label class="form-label fw-semibold d-block mb-2">Features</label>
                                    <div class="feature-checks">
                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="has_wifi" id="has_wifi" value="1" {% if request.GET.has_wifi %}checked{% endif %}>
                                                <label class="form-check-label" for="has_wifi">Wi-Fi</label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="has_ac" id="has_ac" value="1" {% if request.GET.has_ac %}checked{% endif %}>
                                                <label class="form-check-label" for="has_ac">A/C</label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="has_kitchen" id="has_kitchen" value="1" {% if request.GET.has_kitchen %}checked{% endif %}>
                                                <label class="form-check-label" for="has_kitchen">Kitchen</label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="has_parking" id="has_parking" value="1" {% if request.GET.has_parking %}checked{% endif %}>
                                                <label class="form-check-label" for="has_parking">Parking</label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="near_beach" id="near_beach" value="1" {% if request.GET.near_beach %}checked{% endif %}>
                                                <label class="form-check-label" for="near_beach">Near Beach</label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="suitable_for_remote_work" id="suitable_for_remote_work" value="1" {% if request.GET.suitable_for_remote_work %}checked{% endif %}>
                                                <label class="form-check-label" for="suitable_for_remote_work">Remote Work Friendly</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2 d-lg-none">
                                    <button type="submit" class="btn btn-dark">
                                        <i class="bi bi-search me-1"></i>
                                        Apply Filters
                                    </button>
                                    <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-outline-secondary">
                                        Reset
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- RESULTS HEADING -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="results-heading d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                        <div>
                            <h5 class="fw-bold mb-1">Available Rental Listings</h5>
                            <p class="text-muted mb-0">
                                Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_results }} result{{ total_results|pluralize }}
                            </p>
                        </div>

                        {% if page_obj.paginator.num_pages > 1 %}
                            <div class="page-pill">
                                <i class="bi bi-layers"></i>
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- LISTINGS -->
            <div class="row g-4">
                {% for listing in listings %}
                    <div class="col-md-6 col-xl-3">
                        <div class="rental-listing-card">

                            <div class="rental-card-image-wrap">
                                {% if listing.images.first %}
                                    <img src="{{ listing.images.first.image.url }}"
                                         class="rental-card-image"
                                         alt="{{ listing.title }}">
                                {% else %}
                                    <div class="rental-card-placeholder">
                                        <i class="bi bi-house-heart-fill"></i>
                                    </div>
                                {% endif %}

                                {% if listing.property_type %}
                                    <div class="rental-type-badge">
                                        {{ listing.get_property_type_display }}
                                    </div>
                                {% endif %}

                                <div class="rental-price-badge">
                                    ${{ listing.monthly_rent_usd }}
                                    <span>per month</span>
                                </div>
                            </div>

                            <div class="rental-card-body d-flex flex-column">
                                {% if is_foreigner_authenticated %}
                                    <h5 class="fw-bold mb-3">{{ listing.title }}</h5>
                                {% else %}
                                    <h5 class="fw-bold mb-3">Guest-Friendly Rental Preview</h5>
                                {% endif %}

                                <ul class="rental-mini-list mb-3">
                                    <li>
                                        <i class="bi bi-geo-alt-fill"></i>
                                        <span>
                                            {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}
                                        </span>
                                    </li>

                                    {% if listing.property_type %}
                                        <li>
                                            <i class="bi bi-house-door-fill"></i>
                                            <span>{{ listing.get_property_type_display }}</span>
                                        </li>
                                    {% endif %}

                                    {% if listing.bedrooms %}
                                        <li>
                                            <i class="bi bi-door-open-fill"></i>
                                            <span>{{ listing.bedrooms }} bedroom{{ listing.bedrooms|pluralize }}</span>
                                        </li>
                                    {% endif %}
                                </ul>

                                <div class="rental-feature-badges mb-3">
                                    {% if listing.has_wifi %}<span class="badge">Wi-Fi</span>{% endif %}
                                    {% if listing.has_ac %}<span class="badge">A/C</span>{% endif %}
                                    {% if listing.has_kitchen %}<span class="badge">Kitchen</span>{% endif %}
                                    {% if listing.has_parking %}<span class="badge">Parking</span>{% endif %}
                                    {% if listing.near_beach %}<span class="badge">Near Beach</span>{% endif %}
                                    {% if listing.suitable_for_remote_work %}<span class="badge">Remote Work</span>{% endif %}
                                </div>

                                <div class="mt-auto">
                                    {% if is_foreigner_authenticated %}
                                        <div class="d-grid">
                                            <a href="{% url 'expat_life:rental_detail' listing.slug %}" class="btn btn-dark">
                                                View Property
                                            </a>
                                        </div>
                                    {% else %}
                                        {% if is_foreigner_user %}
                                            <p class="text-muted small mb-3">
                                                Open your dashboard to continue viewing rental options and manage your guided access.
                                            </p>

                                            <div class="d-grid">
                                                <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-primary">
                                                    Go to Dashboard
                                                </a>
                                            </div>
                                        {% else %}
                                            <p class="text-muted small mb-3">
                                                Sign up as a Guest to unlock more property details and guided rental access.
                                            </p>

                                            <div class="d-grid">
                                                <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary">
                                                    Sign Up to View More
                                                </a>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-12">
                        <div class="empty-rental-results">
                            <i class="bi bi-house-x-fill"></i>
                            <h5 class="fw-bold mb-2">No rentals found for the selected filters</h5>
                            <p class="text-muted mb-4">
                                Try changing the city, rent range, property type, or selected features to discover more available homes.
                            </p>
                            <a href="{% url 'expat_life:public_rental_list' %}" class="btn btn-dark rounded-pill px-4">
                                Reset Filters
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- PAGINATION -->
            {% if page_obj.paginator.num_pages > 1 %}
                <div class="row mt-5">
                    <div class="col-12">
                        <nav aria-label="Rental listing pagination" class="rental-pagination">
                            <ul class="pagination justify-content-center flex-wrap gap-2">

                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page=1">
                                            First
                                        </a>
                                    </li>

                                    <li class="page-item">
                                        <a class="page-link px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.previous_page_number }}">
                                            Previous
                                        </a>
                                    </li>
                                {% endif %}

                                {% for num in page_obj.paginator.page_range %}
                                    {% if num == page_obj.number %}
                                        <li class="page-item active" aria-current="page">
                                            <span class="page-link px-3">{{ num }}</span>
                                        </li>
                                    {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                                        <li class="page-item">
                                            <a class="page-link px-3"
                                               href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}">
                                                {{ num }}
                                            </a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.next_page_number }}">
                                            Next
                                        </a>
                                    </li>

                                    <li class="page-item">
                                        <a class="page-link px-3"
                                           href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.paginator.num_pages }}">
                                            Last
                                        </a>
                                    </li>
                                {% endif %}

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

        </div>
    </section>

</div>

{% endblock %}