{% extends 'dating_app/base_dating.html' %}
{% load static %}

{% block title %}Guest Profiles | Local Dating Partner Portal{% endblock %}

{% block content %}

<style>
    .guest-profile-page {
        --dating-deep: #2a0d1f;
        --dating-deeper: #1b0714;
        --dating-pink: #c2185b;
        --dating-pink-soft: #fff1f6;
        --dating-pink-mid: #ff4d88;
        --dating-gold: #ffc107;
        --dating-border: rgba(194, 24, 91, 0.12);
        --dating-shadow: 0 18px 45px rgba(42, 13, 31, 0.10);
        --dating-shadow-strong: 0 24px 70px rgba(42, 13, 31, 0.18);

        background: #fff8fb;
    }

    .guest-profile-page .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 7px 15px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        color: #9b1b60;
        border: 1px solid rgba(255, 193, 7, 0.30);
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .guest-profile-page .section-mini-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dating-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    /* =====================================================
       HERO
    ====================================================== */

    .guest-profile-page .guest-preview-hero {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 18%, rgba(255, 193, 7, 0.18), transparent 30%),
            radial-gradient(circle at 85% 10%, rgba(255, 77, 136, 0.16), transparent 34%),
            linear-gradient(135deg, #2a0d1f 0%, #4b1235 48%, #c2185b 100%);
        color: #fff;
    }

    .guest-profile-page .guest-preview-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(42, 13, 31, 0.92), rgba(42, 13, 31, 0.60)),
            radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.10), transparent 35%);
        z-index: 0;
    }

    .guest-profile-page .guest-preview-hero::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -140px;
        top: -120px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.14);
        filter: blur(8px);
        z-index: 0;
    }

    .guest-profile-page .guest-preview-hero .container {
        position: relative;
        z-index: 2;
    }

    .guest-profile-page .guest-preview-hero h1 {
        color: #fff;
        letter-spacing: -0.035em;
        line-height: 1.05;
        text-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    }

    .guest-profile-page .guest-preview-hero .lead,
    .guest-profile-page .guest-preview-hero .text-muted {
        color: rgba(255, 255, 255, 0.78) !important;
    }

    .guest-profile-page .guest-preview-hero .section-mini-title {
        background: rgba(255, 193, 7, 0.18);
        color: var(--dating-gold);
        border-color: rgba(255, 193, 7, 0.36);
    }

    /* =====================================================
       PAGE-SCOPED BUTTONS ONLY
       These will not affect navbar buttons.
    ====================================================== */

    .guest-profile-page .guest-preview-hero .btn,
    .guest-profile-page .guest-access-card .btn,
    .guest-profile-page .detail-card .btn,
    .guest-profile-page .sample-profile-strip + .btn,
    .guest-profile-page #guest-profile-section .btn,
    .guest-profile-page .guest-profile-card .btn {
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.01em;
        transition: all 0.22s ease;
    }

    .guest-profile-page .guest-preview-hero .btn:hover,
    .guest-profile-page .guest-access-card .btn:hover,
    .guest-profile-page .detail-card .btn:hover,
    .guest-profile-page #guest-profile-section .btn:hover,
    .guest-profile-page .guest-profile-card .btn:hover {
        transform: translateY(-2px);
    }

    .guest-profile-page .guest-preview-hero .btn-primary,
    .guest-profile-page .guest-access-card .btn-primary,
    .guest-profile-page #guest-profile-section .btn-primary,
    .guest-profile-page .guest-profile-card .btn-primary {
        background: linear-gradient(135deg, var(--dating-pink-mid), var(--dating-pink));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 14px 28px rgba(194, 24, 91, 0.22);
    }

    .guest-profile-page .guest-preview-hero .btn-primary:hover,
    .guest-profile-page .guest-access-card .btn-primary:hover,
    .guest-profile-page #guest-profile-section .btn-primary:hover,
    .guest-profile-page .guest-profile-card .btn-primary:hover {
        background: linear-gradient(135deg, #ff6b9d, #a4144c);
        border-color: transparent;
        color: #fff;
    }

    .guest-profile-page .guest-preview-hero .btn-dark,
    .guest-profile-page .guest-access-card .btn-dark,
    .guest-profile-page .detail-card .btn-dark,
    .guest-profile-page #guest-profile-section .btn-dark,
    .guest-profile-page .guest-profile-card .btn-dark {
        background: linear-gradient(135deg, var(--dating-deep), #5a153e);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 14px 28px rgba(42, 13, 31, 0.24);
    }

    .guest-profile-page .guest-preview-hero .btn-dark:hover,
    .guest-profile-page .guest-access-card .btn-dark:hover,
    .guest-profile-page .detail-card .btn-dark:hover,
    .guest-profile-page #guest-profile-section .btn-dark:hover,
    .guest-profile-page .guest-profile-card .btn-dark:hover {
        background: linear-gradient(135deg, #1b0714, var(--dating-pink));
        color: #fff;
    }

    .guest-profile-page .guest-preview-hero .btn-outline-dark {
        border-color: rgba(255, 255, 255, 0.55);
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
    }

    .guest-profile-page .guest-preview-hero .btn-outline-dark:hover {
        background: #fff;
        color: var(--dating-deep);
        border-color: #fff;
    }

    .guest-profile-page #guest-profile-section .btn-outline-primary,
    .guest-profile-page .guest-profile-card .btn-outline-primary {
        color: var(--dating-pink);
        border-color: rgba(194, 24, 91, 0.30);
        background: #fff;
    }

    .guest-profile-page #guest-profile-section .btn-outline-primary:hover,
    .guest-profile-page .guest-profile-card .btn-outline-primary:hover {
        color: #fff;
        background: var(--dating-pink);
        border-color: var(--dating-pink);
    }

    .guest-profile-page #guest-profile-section .btn-outline-secondary {
        color: var(--dating-deep);
        border-color: rgba(42, 13, 31, 0.18);
        background: #fff;
    }

    .guest-profile-page #guest-profile-section .btn-outline-secondary:hover {
        color: #fff;
        background: var(--dating-deep);
        border-color: var(--dating-deep);
    }

    /* =====================================================
       CARDS
    ====================================================== */

    .guest-profile-page .guest-access-card,
    .guest-profile-page .detail-card {
        position: relative;
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 28px;
        padding: 30px;
        box-shadow: var(--dating-shadow);
        overflow: hidden;
    }

    .guest-profile-page .guest-access-card::before,
    .guest-profile-page .detail-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: linear-gradient(90deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink));
    }

    .guest-profile-page .guest-access-card h4,
    .guest-profile-page .guest-access-card h5,
    .guest-profile-page .detail-card h5 {
        color: var(--dating-deep);
    }

    .guest-profile-page .guest-access-card ul li {
        color: #4b4450;
    }

    .guest-profile-page .guest-access-card ul li i {
        color: var(--dating-pink) !important;
    }

    .guest-profile-page .guest-preview-hero .guest-access-card {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.26);
        border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .guest-profile-page .guest-preview-hero .guest-access-card .text-muted {
        color: #6c757d !important;
    }

    /* =====================================================
       STATISTICS
    ====================================================== */

    .guest-profile-page section.py-4.bg-white.border-top.border-bottom {
        background: linear-gradient(180deg, #fff 0%, #fff8fb 100%) !important;
        border-color: rgba(194, 24, 91, 0.10) !important;
    }

    .guest-profile-page .guest-stat-card {
        position: relative;
        background:
            radial-gradient(circle at 85% 12%, rgba(255, 193, 7, 0.13), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fff9fc 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 24px;
        padding: 26px 18px;
        box-shadow: 0 14px 34px rgba(42, 13, 31, 0.08);
        height: 100%;
        transition: all 0.24s ease;
        overflow: hidden;
    }

    .guest-profile-page .guest-stat-card::after {
        content: "";
        position: absolute;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        right: -26px;
        bottom: -26px;
        background: rgba(194, 24, 91, 0.08);
    }

    .guest-profile-page .guest-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 44px rgba(42, 13, 31, 0.13);
    }

    .guest-profile-page .guest-stat-card h3 {
        font-weight: 900;
        color: var(--dating-pink);
        margin-bottom: 6px;
        letter-spacing: -0.03em;
    }

    .guest-profile-page .guest-stat-card p {
        font-weight: 600;
        color: #6d6070 !important;
    }

    .guest-profile-page .alert.alert-light {
        background: #fffaf0;
        border-color: rgba(255, 193, 7, 0.28) !important;
        color: #5f4211;
    }

    /* =====================================================
       LIGHT BACKGROUNDS
    ====================================================== */

    .guest-profile-page section.py-5.bg-light,
    .guest-profile-page section.pb-4.bg-light,
    .guest-profile-page section#guest-profile-section.bg-light {
        background:
            radial-gradient(circle at 8% 12%, rgba(255, 193, 7, 0.14), transparent 24%),
            radial-gradient(circle at 92% 15%, rgba(194, 24, 91, 0.10), transparent 28%),
            linear-gradient(180deg, #fff8fb 0%, #f9f2f7 100%) !important;
    }

    /* =====================================================
       SAMPLE PROFILE WALL
    ====================================================== */

    .guest-profile-page .sample-profile-strip {
        background: linear-gradient(180deg, #fff 0%, #fff9fc 100%);
        border: 1px solid rgba(194, 24, 91, 0.10);
        border-radius: 28px;
        padding: 24px;
        box-shadow: var(--dating-shadow);
    }

    .guest-profile-page .sample-profile-item {
        width: 92px;
        text-align: center;
        flex: 0 0 auto;
    }

    .guest-profile-page .sample-profile-image {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #fff;
        outline: 2px solid rgba(194, 24, 91, 0.18);
        box-shadow: 0 12px 24px rgba(42, 13, 31, 0.18);
        background: #fff1f6;
        color: var(--dating-pink);
        transition: all 0.22s ease;
    }

    .guest-profile-page .sample-profile-item:hover .sample-profile-image {
        transform: translateY(-3px) scale(1.04);
        outline-color: rgba(255, 193, 7, 0.65);
    }

    .guest-profile-page .sample-profile-name {
        font-size: 0.78rem;
        font-weight: 800;
        margin-top: 10px;
        color: var(--dating-deep);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .guest-profile-page .sample-profile-strip .overflow-auto::-webkit-scrollbar {
        height: 8px;
    }

    .guest-profile-page .sample-profile-strip .overflow-auto::-webkit-scrollbar-track {
        background: #fff1f6;
        border-radius: 999px;
    }

    .guest-profile-page .sample-profile-strip .overflow-auto::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--dating-pink-mid), var(--dating-pink));
        border-radius: 999px;
    }

    /* =====================================================
       FILTER FORM
    ====================================================== */

    .guest-profile-page .form-label {
        color: var(--dating-deep);
        font-size: 0.86rem;
    }

    .guest-profile-page .form-select,
    .guest-profile-page .form-control {
        border-radius: 16px;
        border: 1px solid rgba(42, 13, 31, 0.14);
        padding: 0.72rem 0.95rem;
        color: var(--dating-deep);
        background-color: #fff;
        box-shadow: 0 8px 18px rgba(42, 13, 31, 0.035);
    }

    .guest-profile-page .form-select:focus,
    .guest-profile-page .form-control:focus {
        border-color: rgba(194, 24, 91, 0.55);
        box-shadow: 0 0 0 0.22rem rgba(194, 24, 91, 0.12);
    }

    .guest-profile-page .alert-warning {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255, 241, 246, 0.95));
        color: #5d3c03;
        border: 1px solid rgba(255, 193, 7, 0.26) !important;
        box-shadow: 0 12px 28px rgba(120, 80, 10, 0.08);
    }

    /* =====================================================
       GUEST PROFILE CARDS
    ====================================================== */

    .guest-profile-page .guest-profile-card {
        position: relative;
        border-radius: 28px;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(194, 24, 91, 0.10) !important;
        box-shadow: var(--dating-shadow);
        transition: all 0.25s ease;
    }

    .guest-profile-page .guest-profile-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--dating-shadow-strong);
    }

    .guest-profile-page .guest-profile-card .card-img-top {
        border-bottom: 1px solid rgba(194, 24, 91, 0.10);
    }

    .guest-profile-page .guest-profile-card .bg-white {
        background:
            radial-gradient(circle at 50% 35%, rgba(255, 193, 7, 0.18), transparent 32%),
            linear-gradient(135deg, #fff1f6, #fff) !important;
        color: var(--dating-pink);
    }

    .guest-profile-page .guest-profile-card .card-body {
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
    }

    .guest-profile-page .guest-profile-card h5 {
        color: var(--dating-deep);
        letter-spacing: -0.015em;
    }

    .guest-profile-page .guest-profile-card hr {
        border-color: rgba(194, 24, 91, 0.13);
        opacity: 1;
    }

    .guest-profile-page .guest-profile-card ul li {
        color: #554c58;
        font-weight: 600;
    }

    .guest-profile-page .guest-profile-card ul li i.text-primary,
    .guest-profile-page .guest-profile-card ul li i.text-success,
    .guest-profile-page .guest-profile-card ul li i.text-info,
    .guest-profile-page .guest-profile-card ul li i.text-secondary {
        color: var(--dating-pink) !important;
    }

    .guest-profile-page .guest-profile-card .badge {
        border-radius: 999px;
        padding: 0.45rem 0.70rem;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    .guest-profile-page .guest-profile-card .badge.bg-warning {
        background: linear-gradient(135deg, var(--dating-gold), #ffdc5c) !important;
        color: #3d2700 !important;
        box-shadow: 0 8px 16px rgba(255, 193, 7, 0.22);
    }

    .guest-profile-page .guest-profile-card .badge.bg-dark {
        background: linear-gradient(135deg, var(--dating-deep), #5a153e) !important;
        color: #fff !important;
    }

    .guest-profile-page .guest-profile-card .alert-light {
        background: linear-gradient(135deg, #fff9fc 0%, #fffdf5 100%);
        border: 1px solid rgba(194, 24, 91, 0.12) !important;
        color: #625564;
    }

    /* =====================================================
       PAGINATION
    ====================================================== */

    .guest-profile-page .pagination {
        --bs-pagination-border-color: rgba(194, 24, 91, 0.16);
        --bs-pagination-color: var(--dating-deep);
        --bs-pagination-hover-color: #fff;
        --bs-pagination-hover-bg: var(--dating-pink);
        --bs-pagination-hover-border-color: var(--dating-pink);
        --bs-pagination-focus-box-shadow: 0 0 0 0.22rem rgba(194, 24, 91, 0.12);
        --bs-pagination-active-bg: var(--dating-pink);
        --bs-pagination-active-border-color: var(--dating-pink);
    }

    .guest-profile-page .page-link {
        font-weight: 800;
        background: #fff;
        box-shadow: 0 8px 18px rgba(42, 13, 31, 0.06);
    }

    .guest-profile-page .page-item.active .page-link {
        background: linear-gradient(135deg, var(--dating-pink-mid), var(--dating-pink));
        border-color: transparent;
        box-shadow: 0 12px 24px rgba(194, 24, 91, 0.22);
    }

    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 991.98px) {
        .guest-profile-page .guest-preview-hero h1 {
            font-size: 2.35rem;
        }

        .guest-profile-page .guest-access-card,
        .guest-profile-page .detail-card {
            border-radius: 24px;
            padding: 24px;
        }
    }

    @media (max-width: 767.98px) {
        .guest-profile-page .guest-preview-hero h1 {
            font-size: 2rem;
        }

        .guest-profile-page .guest-preview-hero .btn-lg {
            width: 100%;
        }

        .guest-profile-page .guest-stat-card {
            padding: 22px 14px;
        }

        .guest-profile-page .sample-profile-strip {
            padding: 18px;
        }

        .guest-profile-page .guest-profile-card {
            border-radius: 24px;
        }
    }

    @media (max-width: 420px) {
        .guest-profile-page .guest-access-card,
        .guest-profile-page .detail-card {
            padding: 20px;
        }

        .guest-profile-page .sample-profile-item {
            width: 82px;
        }

        .guest-profile-page .sample-profile-image {
            width: 62px;
            height: 62px;
        }
    }

    .guest-list-visit-stage {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;

        width: 100%;
        padding: 0.62rem 0.78rem;
        border-radius: 14px;

        font-size: 0.82rem;
        font-weight: 900;
        line-height: 1.2;

        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .guest-list-visit-stage i {
        font-size: 0.95rem;
    }

    .guest-list-visit-stage-planning {
        background: #f1f5f9;
        color: #334155;
    }

    .guest-list-visit-stage-confirmed {
        background: #dcfce7;
        color: #166534;
        border-color: rgba(22, 101, 52, 0.16);
    }

    .guest-list-visit-stage-on_the_way {
        background: #fef3c7;
        color: #92400e;
        border-color: rgba(146, 64, 14, 0.16);
    }

    .guest-list-visit-stage-arrived {
        background: #dbeafe;
        color: #1d4ed8;
        border-color: rgba(29, 78, 216, 0.16);
    }

    .guest-list-visit-stage-completed {
        background: #e5e7eb;
        color: #111827;
    }
</style>

<div class="guest-profile-page">
    <!-- HERO / PUBLIC DASHBOARD -->
    <section class="guest-preview-hero py-5">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-7">
                    <span class="section-mini-title">Guest Profile Network</span>
                    <h1 class="display-5 fw-bold mt-3 mb-3">
                        Discover International Guests Interested in Sri Lanka
                    </h1>

                    <p class="lead text-muted mb-4">
                        Preview guest profile opportunities connected with Sri Lanka lifestyle, long stays,
                        remote work, relocation, and meaningful local connections. Join as a local dating partner
                        to view more profiles and move through a safer, guided connection process.
                    </p>

                    <div class="d-flex flex-wrap gap-3">
                        {% if dating_profile %}
                            <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-dark btn-lg px-4">
                                My Dating Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'dating_app:partner_register' %}" class="btn btn-primary btn-lg px-4">
                                Sign Up to View More
                            </a>
                        {% endif %}

                        <a href="#guest-profile-section" class="btn btn-outline-dark btn-lg px-4">
                            View Preview
                        </a>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="guest-access-card">
                        <h4 class="fw-bold mb-3">{{ access_level_label }}</h4>
                        <p class="text-muted mb-4">{{ access_message }}</p>

                        <ul class="list-unstyled mb-4">
                            <li class="mb-3">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Public visitors see selected sample guest profiles.
                            </li>

                            <li class="mb-3">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Signed-up dating partners can preview featured guests.
                            </li>

                            <li class="mb-3">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Approved partners can view more public guest profiles.
                            </li>

                            <li class="mb-0">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                Featured and confirmed partners can unlock stronger connection advantages.
                            </li>
                        </ul>

                        {% if dating_profile %}
                            <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-dark w-100">
                                Continue from Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'dating_app:partner_register' %}" class="btn btn-primary w-100">
                                Create Local Dating Partner Profile
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- STATISTICS -->
    <section class="py-4 bg-white border-top border-bottom">
        <div class="container">
            {% if use_marketing_stats %}
                <div class="alert alert-light border rounded-4 mb-4">
                    <strong>Growing network preview:</strong>
                    The platform is still growing, so public numbers are presented as profile-opportunity indicators rather than exact database totals.
                </div>
            {% endif %}

            <div class="row g-3">
                <div class="col-6 col-lg-3">
                    <div class="guest-stat-card text-center">
                        <h3>{{ display_total_guests }}+</h3>
                        <p class="mb-0 text-muted">Guest Profile Opportunities</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="guest-stat-card text-center">
                        <h3>{{ display_featured_guests }}+</h3>
                        <p class="mb-0 text-muted">Featured Guest Previews</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="guest-stat-card text-center">
                        <h3>{{ display_confirmed_guests }}+</h3>
                        <p class="mb-0 text-muted">Confirmed / Serious Guests</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="guest-stat-card text-center">
                        {% if is_featured_dating_partner %}
                            <h3>Private+</h3>
                        {% else %}
                            <h3>Featured</h3>
                        {% endif %}
                        <p class="mb-0 text-muted">Access Upgrade Path</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SAMPLE PROFILE WALL -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end mb-4">
                <div>
                    <span class="section-mini-title">Profile Preview</span>
                    <h2 class="fw-bold mt-2 mb-2">Sample Guest Profiles</h2>
                    <p class="text-muted mb-0">
                        A quick visual preview of guest profiles available through the local dating partner portal.
                    </p>
                </div>

                {% if not dating_profile %}
                    <div class="mt-3 mt-lg-0">
                        <a href="{% url 'dating_app:partner_register' %}" class="btn btn-primary">
                            Sign Up to View More
                        </a>
                    </div>
                {% endif %}
            </div>

            <div class="sample-profile-strip">
                <div class="d-flex gap-3 overflow-auto pb-2">
                {% for profile in sample_profiles %}
                    <div class="sample-profile-item">

                        <div class="sample-profile-image-wrap">
                            {% if profile.profile_image %}
                                <img src="{{ profile.profile_image.url }}"
                                    alt="Guest profile"
                                    class="sample-profile-image">
                            {% else %}
                                <div class="sample-profile-image d-inline-flex align-items-center justify-content-center">
                                    <i class="bi bi-person-badge text-muted"></i>
                                </div>
                            {% endif %}
                        </div>

                        <div class="sample-profile-name">
                            {% if dating_profile %}
                                {{ profile.lead.full_name|default:profile.user.get_full_name|default:"Guest" }}
                            {% else %}
                                Guest
                            {% endif %}
                        </div>

                    </div>
                {% empty %}
                    {% for i in "123456789012" %}
                        <div class="sample-profile-item">
                            <div class="sample-profile-image d-inline-flex align-items-center justify-content-center">
                                <i class="bi bi-person-badge text-muted"></i>
                            </div>
                            <div class="sample-profile-name">Guest</div>
                        </div>
                    {% endfor %}
                {% endfor %}
                </div>
            </div>
        </div>
    </section>

    <!-- ACCESS MESSAGE -->
    <section class="pb-4 bg-light">
        <div class="container">
            <div class="guest-access-card">
                <div class="row align-items-center g-3">
                    <div class="col-lg-8">
                        <h5 class="fw-bold mb-2">Your Current Access</h5>

                        {% if not dating_profile %}
                            <p class="text-muted mb-0">
                                You are viewing a public preview. Sign up as a local dating partner to see more guest profile opportunities.
                            </p>
                        {% elif not is_approved_dating_partner %}
                            <p class="text-muted mb-0">
                                Your dating partner profile is registered but not approved yet. You can preview featured guest profiles while waiting for approval.
                            </p>
                        {% elif can_view_private_guest_profiles %}
                            <p class="text-muted mb-0">
                                Your featured/permission-enabled dating partner profile can access public and private approved guest profiles.
                            </p>
                        {% elif is_approved_dating_partner %}
                            <p class="text-muted mb-0">
                                Your approved dating partner profile can view public guest profiles. Featured status can unlock wider profile access.
                            </p>
                        {% endif %}
                    </div>

                    <div class="col-lg-4 text-lg-end">
                        {% if dating_profile %}
                            <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-dark">
                                My Dating Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'dating_app:partner_register' %}" class="btn btn-primary">
                                Sign Up as Dating Partner
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="guest-profile-section" class="pb-5 bg-light">
        <div class="container">

            <!-- Filter Box -->
            {% if dating_profile %}
                <div class="row g-4 mb-4">
                    <div class="col-12">
                        <div class="detail-card">
                            <form method="get">
                                <div class="row g-3 align-items-end">

                                    <div class="col-md-6 col-lg-4">
                                        <label class="form-label fw-semibold">Nationality</label>
                                        <select name="nationality" class="form-select">
                                            <option value="">All Nationalities</option>
                                            {% for value, label in nationality_choices %}
                                                <option value="{{ value }}" {% if selected_nationality == value %}selected{% endif %}>
                                                    {{ label }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="col-md-6 col-lg-3">
                                        <label class="form-label fw-semibold">Gender</label>
                                        <select name="gender" class="form-select">
                                            <option value="">All Genders</option>
                                            {% for value, label in gender_choices %}
                                                <option value="{{ value }}" {% if selected_gender == value %}selected{% endif %}>
                                                    {{ label }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="col-md-6 col-lg-3">
                                        <label class="form-label fw-semibold">Monthly Budget</label>
                                        <select name="monthly_budget" class="form-select">
                                            <option value="">Any Budget</option>
                                            {% for value, label in budget_choices %}
                                                <option value="{{ value }}" {% if selected_budget == value %}selected{% endif %}>
                                                    {{ label }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="col-md-6 col-lg-2">
                                        <button type="submit" class="btn btn-dark w-100">
                                            Filter
                                        </button>
                                    </div>

                                    <div class="col-12 d-flex flex-wrap gap-2">
                                        <a href="{% url 'dating_app:public_foreigners_list' %}" class="btn btn-outline-secondary">
                                            Reset Filters
                                        </a>

                                        <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-outline-primary ms-md-auto">
                                            My Dating Dashboard
                                        </a>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-warning rounded-4 border-0 mb-4">
                    <strong>Sign up required for deeper access:</strong>
                    Public users can preview selected sample profiles only. Create a local dating partner profile to unlock more guest profile previews.
                </div>
            {% endif %}

            <!-- Result Summary -->
            <div class="row mb-3">
                <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                    <div>
                        <h5 class="fw-bold mb-1">
                            {% if can_view_private_guest_profiles %}
                                Public + Private Guest Profiles
                            {% elif is_approved_dating_partner %}
                                Public Guest Profiles
                            {% elif dating_profile %}
                                Featured Guest Preview
                            {% else %}
                                Limited Public Preview
                            {% endif %}
                        </h5>

                        {% if total_results > 0 %}
                            <p class="text-muted mb-0">
                                Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_results }} guest profile{{ total_results|pluralize }}
                            </p>
                        {% else %}
                            <p class="text-muted mb-0">
                                No guest profiles found for the selected filters.
                            </p>
                        {% endif %}
                    </div>

                    {% if page_obj.paginator.num_pages > 1 %}
                        <div class="text-muted small">
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Guest Profiles -->
            <div class="row g-4">
                {% for profile in profiles %}
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100 border-0 shadow-sm guest-profile-card">

                            {% if profile.profile_image %}
                                <img
                                    src="{{ profile.profile_image.url }}"
                                    class="card-img-top"
                                    style="height: 280px; object-fit: cover;"
                                    alt="{{ profile.lead.full_name|default:'Guest profile' }}"
                                >
                            {% else %}
                                <div class="bg-white d-flex align-items-center justify-content-center" style="height: 280px;">
                                    <i class="bi bi-person-badge fs-1 text-muted"></i>
                                </div>
                            {% endif %}

                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                    <div>
                                        <h5 class="fw-bold mb-1">
                                            {% if dating_profile %}
                                                {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                                            {% else %}
                                                International Guest
                                            {% endif %}
                                        </h5>

                                        <p class="text-muted small mb-0">
                                            {{ profile.lead.nationality|default:"International" }}
                                            {% if profile.lead.country %}
                                                | {{ profile.lead.country }}
                                            {% endif %}
                                        </p>
                                    </div>

                                    <div class="d-flex flex-column align-items-end gap-1">
                                        {% if profile.is_featured %}
                                            <span class="badge bg-warning text-dark">
                                                Featured
                                            </span>
                                        {% endif %}

                                        {% if not profile.is_public %}
                                            <span class="badge bg-dark">
                                                Private
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                {% if request.user.is_authenticated and is_approved_dating_partner %}
                                    <div class="guest-list-visit-stage guest-list-visit-stage-{{ profile.visit_stage }} mb-3">
                                        {% if profile.visit_stage == 'planning' %}
                                            <i class="bi bi-calendar-heart"></i>
                                        {% elif profile.visit_stage == 'confirmed' %}
                                            <i class="bi bi-patch-check-fill"></i>
                                        {% elif profile.visit_stage == 'on_the_way' %}
                                            <i class="bi bi-airplane-engines-fill"></i>
                                        {% elif profile.visit_stage == 'arrived' %}
                                            <i class="bi bi-geo-alt-fill"></i>
                                        {% elif profile.visit_stage == 'completed' %}
                                            <i class="bi bi-check-circle-fill"></i>
                                        {% else %}
                                            <i class="bi bi-info-circle-fill"></i>
                                        {% endif %}

                                        <span>{{ profile.get_visit_stage_display }}</span>
                                    </div>
                                {% endif %}

                                <hr>

                                <ul class="list-unstyled small mb-3">
                                    {% if profile.lead.gender %}
                                        <li class="mb-2">
                                            <i class="bi bi-person-fill text-primary me-2"></i>
                                            {{ profile.lead.get_gender_display }}
                                        </li>
                                    {% endif %}

                                    {% if dating_profile and profile.lead.monthly_budget %}
                                        <li class="mb-2">
                                            <i class="bi bi-cash-coin text-success me-2"></i>
                                            {{ profile.lead.get_monthly_budget_display }}
                                        </li>
                                    {% endif %}

                                    {% if dating_profile and profile.lead.expected_arrival_date %}
                                        <li class="mb-2">
                                            <i class="bi bi-calendar-check text-info me-2"></i>
                                            Expected arrival: {{ profile.lead.expected_arrival_date }}
                                        </li>
                                    {% endif %}

                                    {% if dating_profile and profile.lead.duration_of_stay %}
                                        <li class="mb-2">
                                            <i class="bi bi-clock-fill text-secondary me-2"></i>
                                            {{ profile.lead.duration_of_stay }}
                                        </li>
                                    {% endif %}
                                </ul>

                                {% if dating_profile and profile.lead.message %}
                                    <p class="text-muted small mb-3">
                                        {{ profile.lead.message|truncatechars:120 }}
                                    </p>
                                {% else %}
                                    <p class="text-muted small mb-3">
                                        Guest contact details are protected. Sign up or continue through the dating partner process to unlock more access.
                                    </p>
                                {% endif %}

                                <div class="alert alert-light border rounded-3 small mb-3">
                                    {% if can_connect_with_guests %}
                                        You can express interest or connect according to the mutual-interest workflow.
                                    {% elif is_approved_dating_partner %}
                                        You can view guest details. Confirmation is required before connection actions.
                                    {% elif dating_profile %}
                                        Approval is required before viewing full guest details.
                                    {% else %}
                                        Sign up as a local dating partner to view more guest profile information.
                                    {% endif %}
                                </div>

                                <div class="d-grid gap-2">
                                    {% if show_guest_profile_detail_link %}
                                        <a href="{% url 'dating_app:public_foreigner_detail' profile.pk %}" class="btn btn-dark">
                                            View Guest Profile
                                        </a>
                                    {% elif dating_profile %}
                                        <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-outline-primary">
                                            Await Approval
                                        </a>
                                    {% else %}
                                        <a href="{% url 'dating_app:partner_register' %}" class="btn btn-outline-primary">
                                            Sign Up to View More
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-12">
                        <div class="detail-card text-center">
                            <h5 class="fw-bold mb-2">No guest profiles found</h5>
                            <p class="text-muted mb-4">
                                No approved guest profiles match your selected filters.
                            </p>

                            {% if dating_profile %}
                                <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-dark">
                                    My Dating Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'dating_app:partner_register' %}" class="btn btn-primary">
                                    Become a Local Dating Partner
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

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

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

                                    <li class="page-item">
                                        <a class="page-link rounded-pill 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">
                                            <span class="page-link rounded-pill 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 rounded-pill 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 rounded-pill 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 rounded-pill 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 %}