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

{% block title %}{{ profile.display_name|default:profile.full_name }} | Dating Profile{% endblock %}

{% block content %}

<style>
    .guest-dating-detail-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.08), transparent 28%),
            radial-gradient(circle at 90% 16%, rgba(194, 24, 91, 0.08), transparent 30%),
            linear-gradient(180deg, #fff7fb 0%, #ffffff 46%, #fff1f6 100%);
        overflow: hidden;
    }

    /* =========================
       HERO
       ========================= */
    .guest-dating-detail-hero {
        position: relative;
        padding: 5.7rem 0 4.7rem;
        background-color: #2a0d1f;
        color: #fff;
        overflow: hidden;
    }

    .guest-dating-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(36, 9, 27, 0.94) 0%,
                rgba(36, 9, 27, 0.82) 42%,
                rgba(36, 9, 27, 0.58) 72%,
                rgba(36, 9, 27, 0.42) 100%
            ),
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.18), transparent 28%),
            radial-gradient(circle at bottom right, rgba(194, 24, 91, 0.22), transparent 35%),
            url("{% static 'expat_life/images/dating_partners_details.webp' %}") center center / cover no-repeat;
        transform: scale(1.02);
        z-index: 0;
    }

    .guest-dating-detail-hero::after {
        content: "";
        position: absolute;
        right: -150px;
        bottom: -180px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
        z-index: 1;
    }

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

    .guest-dating-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.36);
        padding: .55rem 1rem;
        border-radius: 999px;
        font-weight: 850;
        font-size: .82rem;
        letter-spacing: .055em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        backdrop-filter: blur(8px);
    }

    .guest-dating-badge i {
        color: #ffd166;
    }

    .guest-dating-detail-hero h1 {
        color: #fff;
        font-size: clamp(2.45rem, 4.5vw, 4.4rem);
        font-weight: 950;
        line-height: 1.04;
        letter-spacing: -0.055em;
    }

    .guest-dating-detail-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 1.12rem;
        line-height: 1.85;
    }

    .guest-age-badge {
        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: #c2185b;
        font-size: 2rem;
        font-weight: 950;
        line-height: 1;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.20);
        backdrop-filter: blur(10px);
    }

    .guest-age-badge span {
        color: #64748b;
        font-size: .92rem;
        font-weight: 850;
        padding-bottom: .18rem;
    }

    .guest-hero-point {
        height: 100%;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .95rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(8px);
        line-height: 1.5;
        font-weight: 650;
    }

    .guest-hero-point i {
        color: #ffc107;
        font-size: 1.2rem;
    }

    /* =========================
       GALLERY CARD
       ========================= */
    .guest-premium-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.30);
        overflow: hidden;
        backdrop-filter: blur(14px);
    }

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

    .main-profile-image-wrapper {
        position: relative;
        border-radius: 28px;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.16), transparent 35%),
            radial-gradient(circle at bottom right, rgba(194, 24, 91, 0.18), transparent 35%),
            #fff1f6;
    }

    .main-profile-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(36, 9, 27, 0.28));
        pointer-events: none;
    }

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

    .profile-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(194, 24, 91, 0.16);
        color: #c2185b;
        font-size: .8rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    }

    .partner-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;
    }

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

    .profile-detail-placeholder {
        min-height: 540px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.18), transparent 35%),
            radial-gradient(circle at bottom right, rgba(194, 24, 91, 0.22), transparent 35%),
            #fff1f6;
        color: #c2185b;
    }

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

    /* =========================
       SUMMARY CARD
       ========================= */
    .partner-summary-box {
        position: relative;
        overflow: hidden;
        padding: 1.55rem;
        border-radius: 30px;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.10), transparent 30%),
            radial-gradient(circle at bottom right, rgba(194, 24, 91, 0.10), transparent 32%),
            rgba(255, 255, 255, 0.98);
        border: 1px solid #f1dce7;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
    }

    .partner-summary-box 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 #f1dce7;
        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(194, 24, 91, 0.10);
        color: #c2185b;
        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;
    }

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

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

    .guest-dating-detail-page .btn-dark {
        border: none;
        background: linear-gradient(135deg, #c2185b, #7c3aed);
        box-shadow: 0 16px 30px rgba(194, 24, 91, 0.22);
    }

    .guest-dating-detail-page .btn-dark:hover {
        background: linear-gradient(135deg, #db2777, #8b5cf6);
        transform: translateY(-2px);
    }

    .guest-dating-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(34, 197, 94, 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(255, 193, 7, 0.18), transparent 30%),
            #fffbeb;
        color: #92400e;
        border: 1px solid rgba(245, 158, 11, 0.20);
    }

    /* =========================
       LOWER SECTION
       ========================= */
    .guest-dating-detail-lower-section {
        position: relative;
        padding: 5rem 0;
        background:
            radial-gradient(circle at 8% 20%, rgba(194, 24, 91, 0.06), transparent 26%),
            radial-gradient(circle at 92% 82%, rgba(255, 193, 7, 0.07), transparent 28%),
            #ffffff;
    }

    .content-card {
        padding: 1.7rem;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #f1dce7;
        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, #c2185b, #7c3aed);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 30px rgba(194, 24, 91, 0.18);
    }

    .side-info-card {
        position: sticky;
        top: 1rem;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #f1dce7;
        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(255, 193, 7, 0.16), transparent 32%),
            linear-gradient(135deg, #2a0d1f 0%, #c2185b 100%);
        color: #fff;
    }

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

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

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

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

    .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(194, 24, 91, 0.10);
        color: #c2185b;
    }

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

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

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

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

    .status-pill.warning {
        background: #fffbeb;
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.20);
    }

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

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

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

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

        .guest-dating-detail-hero h1 {
            font-size: 2.35rem;
        }

        .guest-premium-card,
        .partner-summary-box,
        .content-card,
        .side-info-card {
            border-radius: 24px;
        }

        .guest-premium-card.padded,
        .partner-summary-box,
        .content-card,
        .side-info-header,
        .side-info-body {
            padding: 1.2rem;
        }

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

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

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

        .guest-age-badge {
            font-size: 1.65rem;
            width: 100%;
            justify-content: center;
        }
    }
    .dating-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);
    }

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

    .dating-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;
    }

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

    .dating-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;
    }

    .dating-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) {
        .dating-related-actions .btn {
            width: 100%;
        }
    }
</style>

<div class="guest-dating-detail-page">

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

                <!-- PROFILE GALLERY -->
                <div class="col-lg-7">
                    <div class="guest-premium-card padded">
                        {% if profile.profile_photo or additional_photos %}
                            <div class="main-profile-image-wrapper mb-3">
                                {% if profile.profile_photo %}
                                    <img id="mainPartnerImage"
                                         src="{{ profile.profile_photo.url }}"
                                         class="profile-detail-image"
                                         alt="{{ profile.full_name }}">
                                {% elif additional_photos %}
                                    <img id="mainPartnerImage"
                                         src="{{ additional_photos.0.image.url }}"
                                         class="profile-detail-image"
                                         alt="{{ profile.full_name }}">
                                {% else %}
                                    <img id="mainPartnerImage"
                                         src="{% static 'expat_life/images/default-profile.jpg' %}"
                                         class="profile-detail-image"
                                         alt="Profile">
                                {% endif %}

                                <div class="profile-gallery-label">
                                    <i class="bi bi-images"></i>
                                    Profile Gallery
                                </div>
                            </div>

                            {% if profile.profile_photo or additional_photos %}
                                <div class="row g-3">
                                    {% if profile.profile_photo %}
                                        <div class="col-4 col-md-3">
                                            <img src="{{ profile.profile_photo.url }}"
                                                 class="partner-thumb-image"
                                                 alt="{{ profile.full_name }}"
                                                 onclick="document.getElementById('mainPartnerImage').src='{{ profile.profile_photo.url }}'">
                                        </div>
                                    {% endif %}

                                    {% for photo in additional_photos %}
                                        <div class="col-4 col-md-3">
                                            <img src="{{ photo.image.url }}"
                                                 class="partner-thumb-image"
                                                 alt="{{ photo.caption|default:profile.full_name }}"
                                                 onclick="document.getElementById('mainPartnerImage').src='{{ photo.image.url }}'">
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="profile-detail-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-person-heart"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- PROFILE INTRO -->
                <div class="col-lg-5">
                    <span class="guest-dating-badge">
                        <i class="bi bi-heart-fill"></i>
                        Dating Partner Profile
                    </span>

                    <h1 class="fw-bold mb-3">
                        {{ profile.display_name|default:profile.full_name }}
                    </h1>

                    <div class="guest-age-badge mb-3">
                        {{ profile.age }}<span>years old</span>
                    </div>

                    <p class="lead mb-4">
                        {{ profile.short_intro }}
                    </p>

                    <div class="row g-3 mb-4">
                        <div class="col-sm-4">
                            <div class="guest-hero-point">
                                <i class="bi bi-person-check-fill"></i>
                                <span>Approved profile</span>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="guest-hero-point">
                                <i class="bi bi-shield-lock-fill"></i>
                                <span>Protected contact</span>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="guest-hero-point">
                                <i class="bi bi-chat-heart-fill"></i>
                                <span>Guided process</span>
                            </div>
                        </div>
                    </div>

                    <!-- PROFILE SUMMARY -->
                    <div class="partner-summary-box mb-4">
                        <h6 class="fw-bold mb-3">Profile Summary</h6>

                        <div class="summary-grid">
                            <div class="summary-item">
                                <i class="bi bi-heart-arrow"></i>
                                <div>
                                    <span>Relationship Goal</span>
                                    <strong>{{ profile.get_relationship_goal_display }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-geo-alt-fill"></i>
                                <div>
                                    <span>City</span>
                                    <strong>{{ profile.city|default:"Not specified" }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-globe-asia-australia"></i>
                                <div>
                                    <span>Country</span>
                                    <strong>{{ profile.country }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-briefcase-fill"></i>
                                <div>
                                    <span>Profession</span>
                                    <strong>{{ profile.profession|default:"Not specified" }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-stars"></i>
                                <div>
                                    <span>Religion</span>
                                    <strong>{{ profile.religion|default:"Not specified" }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-mortarboard-fill"></i>
                                <div>
                                    <span>Education</span>
                                    <strong>{{ profile.education|default:"Not specified" }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-translate"></i>
                                <div>
                                    <span>Languages</span>
                                    <strong>{{ profile.languages_spoken }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-airplane-fill"></i>
                                <div>
                                    <span>Willing to Relocate</span>
                                    <strong>{% if profile.willing_to_relocate %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-camera-video-fill"></i>
                                <div>
                                    <span>Video Call Ready</span>
                                    <strong>{% if profile.willing_video_call %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- INTEREST / CONFIRMATION LOGIC -->
                    <div class="guest-interest-card">

                        {% if existing_interest %}

                            {% if interest_is_withdrawn %}

                                <div class="alert premium-alert alert-secondary mb-3">
                                    <h6 class="fw-bold mb-2">
                                        <i class="bi bi-x-circle-fill me-1"></i>
                                        Interest Cancelled
                                    </h6>

                                    <p class="mb-2">
                                        You previously cancelled your interest in this dating partner profile.
                                    </p>

                                    <p class="mb-0">
                                        <strong>Status:</strong> {{ existing_interest.get_status_display }}
                                    </p>
                                </div>

                                {% if can_notify_interest %}
                                    <form method="post" action="{% url 'dating_app:express_dating_interest' profile.pk %}">
                                        {% csrf_token %}

                                        <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                            <i class="bi bi-arrow-repeat me-2"></i>
                                            Express Interest Again
                                        </button>
                                    </form>

                                    <div class="small text-muted">
                                        If you changed your mind again, you can submit your interest once more and our team can continue
                                        the review and coordination process.
                                    </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>
                                        Express Interest Again
                                    </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 express interest again.
                                    </div>
                                {% endif %}

                            {% else %}

                                <div class="alert premium-alert alert-success mb-3">
                                    <h6 class="fw-bold mb-2">
                                        <i class="bi bi-heart-fill me-1"></i>
                                        Interest Already Submitted
                                    </h6>

                                    <p class="mb-2">
                                        You have already expressed interest in this dating partner. Our team can continue
                                        the review and coordination process.
                                    </p>

                                    <p class="mb-0">
                                        <strong>Status:</strong> {{ existing_interest.get_status_display }}
                                    </p>
                                </div>

                                {% if interest_is_active %}
                                    <form method="post"
                                        action="{% url 'dating_app:withdraw_dating_interest' profile.pk %}"
                                        onsubmit="return confirm('Are you sure you want to cancel your interest in this dating partner?');">
                                        {% csrf_token %}

                                        <button type="submit" class="btn btn-outline-danger btn-lg w-100">
                                            <i class="bi bi-x-circle-fill me-2"></i>
                                            Cancel Interest
                                        </button>
                                    </form>

                                    <div class="small text-muted mt-2">
                                        Use this option only if you have changed your mind. Our team will stop treating this
                                        profile as one of your active dating interests.
                                    </div>
                                {% endif %}

                            {% endif %}

                        {% else %}

                            {% if can_notify_interest %}

                                <form method="post" action="{% url 'dating_app:express_dating_interest' profile.pk %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                        <i class="bi bi-send-heart-fill me-2"></i>
                                        Express Interest
                                    </button>
                                </form>

                                <div class="small text-muted">
                                    By expressing interest, you notify our team that you want to move forward with this
                                    dating partner profile through the proper review and coordination process.
                                </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>
                                    Express Interest
                                </button>

                                <div class="alert premium-alert alert-warning mb-0">
                                    <strong>Confirmation required.</strong><br>
                                    You need to complete the $100 confirmation payment before you can express interest
                                    in dating partners and allow our team to begin the next coordination steps.
                                </div>

                            {% endif %}

                        {% endif %}

                    </div>
                    <!-- RELATED DATING ACTIONS -->
                    <div class="dating-related-actions mt-4">
                        <div class="dating-related-actions-title">
                            <i class="bi bi-compass-fill"></i>
                            Continue Exploring Dating Profiles
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{% url 'expat_life:my_interested_dating_profiles' %}"
                               class="btn dating-secondary-action">
                                <i class="bi bi-heart-fill me-2"></i>
                                Interested Profiles
                            </a>

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

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

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

                <!-- MAIN 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-person-lines-fill"></i>
                            </div>

                            <div>
                                <h3 class="fw-bold mb-1">About</h3>
                                <p class="text-muted mb-0">
                                    Learn more about this profile, personal story, and relationship outlook.
                                </p>
                            </div>
                        </div>

                        <div class="text-muted">
                            {{ profile.about_me|linebreaks }}
                        </div>
                    </div>

                    {% if profile.hobbies %}
                        <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-flower1"></i>
                                </div>

                                <div>
                                    <h5 class="fw-bold mb-1">Hobbies & Interests</h5>
                                    <p class="text-muted mb-0">
                                        A few lifestyle interests that may help you understand compatibility.
                                    </p>
                                </div>
                            </div>

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

                    {% if profile.expectations %}
                        <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-chat-heart-fill"></i>
                                </div>

                                <div>
                                    <h5 class="fw-bold mb-1">Relationship Expectations</h5>
                                    <p class="text-muted mb-0">
                                        Review the expectations before expressing interest or moving forward.
                                    </p>
                                </div>
                            </div>

                            <div class="text-muted mb-0">
                                {{ profile.expectations|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 dating partner contact details are not displayed here. All communication and
                                next-step coordination are handled through our platform for privacy and safety.
                            </p>
                        </div>

                        <div class="side-info-body">
                            <div class="info-row">
                                <i class="bi bi-patch-check-fill"></i>
                                <div>
                                    <strong>Profile Status</strong><br>
                                    {% if profile.status == 'approved' %}
                                        <span class="status-pill success">
                                            <i class="bi bi-check-circle-fill"></i>
                                            Approved
                                        </span>
                                    {% else %}
                                        <span class="status-pill warning">
                                            <i class="bi bi-exclamation-circle-fill"></i>
                                            {{ profile.get_status_display }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="info-row">
                                <i class="bi bi-eye-fill"></i>
                                <div>
                                    <strong>Profile Access</strong><br>
                                    <span>Public profile for approved Guest users</span>
                                </div>
                            </div>

                            <div class="info-row">
                                <i class="bi bi-person-check-fill"></i>
                                <div>
                                    <strong>Your Access</strong><br>
                                    {% if is_confirmed_foreigner %}
                                        <span class="status-pill success">
                                            <i class="bi bi-check-circle-fill"></i>
                                            Confirmed Guest
                                        </span>
                                    {% else %}
                                        <span class="status-pill warning">
                                            <i class="bi bi-exclamation-circle-fill"></i>
                                            Approved but not yet confirmed
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="info-row">
                                <i class="bi bi-compass-fill"></i>
                                <div>
                                    <strong>Process</strong><br>
                                    <span>
                                        Review the dating partner profile, complete confirmation if required, express
                                        your interest, and our team will guide the next practical steps carefully and privately.
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

</div>

{% endblock %}