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

{% block title %}{{ profile.display_name|default:profile.full_name }} | Service Partner{% endblock %}

{% block content %}

<style>
    .guest-service-detail-page {
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.07), transparent 28%),
            radial-gradient(circle at 88% 18%, rgba(13, 110, 253, 0.09), transparent 30%),
            linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #eef6ff 100%);
        overflow: hidden;
    }

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

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

    .guest-service-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-service-detail-hero .container {
        position: relative;
        z-index: 2;
    }

    .guest-service-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-service-badge i {
        color: #ffc107;
    }

    .guest-service-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-service-detail-hero .lead {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 1.12rem;
        line-height: 1.85;
    }

    .guest-service-type-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .9rem 1.15rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: #0d6efd;
        font-size: 1.12rem;
        font-weight: 950;
        line-height: 1.2;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.20);
        backdrop-filter: blur(10px);
    }

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

    /* =========================
       IMAGE 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(13, 110, 253, 0.18), transparent 35%),
            #eef6ff;
    }

    .main-profile-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(8, 24, 35, 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(13, 110, 253, 0.16);
        color: #0d6efd;
        font-size: .8rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    }

    .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(13, 110, 253, 0.22), transparent 35%),
            #eef6ff;
        color: #0d6efd;
    }

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

    /* =========================
       SUMMARY CARD
       ========================= */
    .assistant-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(13, 110, 253, 0.10), transparent 32%),
            rgba(255, 255, 255, 0.98);
        border: 1px solid #dbeafe;
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.10);
    }

    .assistant-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 #dbeafe;
        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(13, 110, 253, 0.10);
        color: #0d6efd;
        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 / FORM
       ========================= */
    .guest-interest-card {
        border-radius: 28px;
        padding: 1.25rem;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid #dbeafe;
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08);
    }

    .guest-service-detail-page .form-control {
        border-radius: 18px;
        border: 1px solid #bfdbfe;
        box-shadow: none;
        padding: .9rem 1rem;
    }

    .guest-service-detail-page .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 .22rem rgba(13, 110, 253, 0.12);
    }

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

    .guest-service-detail-page .btn-dark {
        border: none;
        background: linear-gradient(135deg, #0d6efd, #0b3f74);
        box-shadow: 0 16px 30px rgba(13, 110, 253, 0.22);
    }

    .guest-service-detail-page .btn-dark:hover {
        background: linear-gradient(135deg, #0b5ed7, #082f5f);
        transform: translateY(-2px);
    }

    .guest-service-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);
    }

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

    /* =========================
       LOWER SECTION
       ========================= */
    .guest-service-detail-lower-section {
        position: relative;
        padding: 5rem 0;
        background:
            radial-gradient(circle at 8% 20%, rgba(13, 110, 253, 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 #dbeafe;
        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, #0d6efd, #0b3f74);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 30px rgba(13, 110, 253, 0.18);
    }

    .side-info-card {
        position: sticky;
        top: 1rem;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #dbeafe;
        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, #0d1f2a 0%, #0d6efd 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 #dbeafe;
    }

    .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(13, 110, 253, 0.10);
        color: #0d6efd;
    }

    .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-service-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-service-detail-hero {
            padding: 3.5rem 0 3rem;
        }

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

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

        .guest-premium-card.padded,
        .assistant-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;
        }

        .guest-service-type-pill {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
    }
    .assistant-related-actions {
        position: relative;
        overflow: hidden;
        padding: 1.15rem;
        border-radius: 24px;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.72), transparent 36%),
            radial-gradient(circle at 12% 90%, rgba(15, 118, 110, 0.06), transparent 34%),
            linear-gradient(
                135deg,
                rgba(255, 252, 244, 0.78),
                rgba(255, 255, 255, 0.62)
            );
        border: 1px solid rgba(255, 255, 255, 0.48);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

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

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

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

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

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

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

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

                <!-- PROFILE IMAGE -->
                <div class="col-lg-7">
                    <div class="guest-premium-card padded">
                        {% if profile.profile_photo %}
                            <div class="main-profile-image-wrapper">
                                <img src="{{ profile.profile_photo.url }}"
                                     class="profile-detail-image"
                                     alt="{{ profile.full_name }}">

                                <div class="profile-gallery-label">
                                    <i class="bi bi-person-badge-fill"></i>
                                    Service Partner Profile
                                </div>
                            </div>
                        {% else %}
                            <div class="profile-detail-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-person-workspace"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- PROFILE INTRO -->
                <div class="col-lg-5">
                    <span class="guest-service-badge">
                        <i class="bi bi-person-workspace"></i>
                        Local Service Assistant Profile
                    </span>

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

                    <div class="guest-service-type-pill mb-3">
                        <i class="bi bi-briefcase-fill"></i>
                        {{ profile.get_service_type_display }}
                    </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-patch-check-fill"></i>
                                <span>Reviewed 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-compass-fill"></i>
                                <span>Guided support</span>
                            </div>
                        </div>
                    </div>

                    <!-- PROFILE SUMMARY -->
                    <div class="assistant-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-briefcase-fill"></i>
                                <div>
                                    <span>Service Type</span>
                                    <strong>{{ profile.get_service_type_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-map-fill"></i>
                                <div>
                                    <span>District</span>
                                    <strong>{{ profile.district|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-translate"></i>
                                <div>
                                    <span>Languages</span>
                                    <strong>{{ profile.languages_spoken }}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-award-fill"></i>
                                <div>
                                    <span>Experience</span>
                                    <strong>{{ profile.experience_summary|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-card-checklist"></i>
                                <div>
                                    <span>License</span>
                                    <strong>{% if profile.has_license %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-passport-fill"></i>
                                <div>
                                    <span>Passport Ready</span>
                                    <strong>{% if profile.passport_ready %}Yes{% else %}No{% endif %}</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-house-heart-fill"></i>
                                <div>
                                    <span>Live-in Available</span>
                                    <strong>{% if profile.live_in_available %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-clock-history"></i>
                                <div>
                                    <span>Part-time Available</span>
                                    <strong>{% if profile.part_time_available %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>

                            <div class="summary-item">
                                <i class="bi bi-calendar-check-fill"></i>
                                <div>
                                    <span>Full-time Available</span>
                                    <strong>{% if profile.full_time_available %}Yes{% else %}No{% endif %}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- INTEREST / CONFIRMATION LOGIC -->
                    <div class="guest-interest-card">
                        {% if existing_interest %}
                            <div class="alert premium-alert alert-success mb-0">
                                <h6 class="fw-bold mb-2">
                                    <i class="bi bi-check-circle-fill me-1"></i>
                                    Interest Already Submitted
                                </h6>

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

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

                                {% if existing_interest.message %}
                                    <p class="mb-0 mt-2">
                                        <strong>Your Message:</strong> {{ existing_interest.message }}
                                    </p>
                                {% endif %}
                            </div>
                        {% else %}
                            {% if can_notify_interest %}
                                <form method="post" action="{% url 'service_partner_app:express_service_partner_interest' profile.pk %}">
                                    {% csrf_token %}

                                    <div class="mb-3">
                                        <textarea name="message"
                                                  rows="4"
                                                  class="form-control"
                                                  placeholder="Write a short note about the type of help or arrangement you need..."></textarea>
                                    </div>

                                    <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                        <i class="bi bi-send-check-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
                                    local service assistant through the proper 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 request local service
                                    arrangements and allow our team to begin coordination.
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                    <!-- RELATED ASSISTANT ACTIONS -->
                    <div class="assistant-related-actions mt-4">
                        <div class="assistant-related-actions-title">
                            <i class="bi bi-compass-fill"></i>
                            Continue Exploring Assistants
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{% url 'expat_life:my_interested_service_partners' %}"
                            class="btn assistant-secondary-action">
                                <i class="bi bi-bookmark-heart me-2"></i>
                                My Interested
                            </a>

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

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

    <!-- LOWER DETAIL SECTION -->
    <section class="guest-service-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 service partner, background, and support style.
                                </p>
                            </div>
                        </div>

                        <div class="text-muted">
                            {% if profile.about_me %}
                                {{ profile.about_me|linebreaks }}
                            {% else %}
                                {{ profile.short_intro|linebreaks }}
                            {% endif %}
                        </div>
                    </div>

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

                                <div>
                                    <h5 class="fw-bold mb-1">Skills</h5>
                                    <p class="text-muted mb-0">
                                        Review the practical skills and service abilities before moving forward.
                                    </p>
                                </div>
                            </div>

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

                    {% if profile.address %}
                        <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-geo-alt-fill"></i>
                                </div>

                                <div>
                                    <h5 class="fw-bold mb-1">Location Note</h5>
                                    <p class="text-muted mb-0">
                                        Additional location information provided by this service partner.
                                    </p>
                                </div>
                            </div>

                            <div class="text-muted mb-0">
                                {{ profile.address|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 service partner contact details are not displayed here. All communication and arrangement
                                steps are handled through our platform for privacy, safety, and quality control.
                            </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 assistant 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 %}