{% extends 'service_partner_app/base_service_partner.html' %}
{% load static %}

{% block title %}
    {% if show_full_service_profile_preview %}
        {{ profile.display_name|default:profile.full_name }} | Service Partner Profile Preview
    {% else %}
        Service Partner Profile Preview
    {% endif %}
{% endblock %}

{% block content %}

<style>
    /* =========================================================
       PAGE ROOT
    ========================================================= */
    .assistant-detail-page {
        background: #eef6f5;
    }


    /* =========================================================
       HERO SECTION
    ========================================================= */
    .assistant-detail-hero {
        position: relative;
        padding: 78px 0 70px;
        background:
            linear-gradient(
                110deg,
                rgba(7, 22, 31, 0.98) 0%,
                rgba(10, 45, 53, 0.94) 48%,
                rgba(13, 148, 136, 0.80) 100%
            );
        overflow: hidden;
    }

    .assistant-detail-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 193, 7, 0.22), transparent 28%),
            radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.11), transparent 28%);
        pointer-events: none;
    }

    .assistant-detail-hero::after {
        content: "";
        position: absolute;
        top: -120px;
        right: -95px;
        width: 390px;
        height: 390px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.055);
        pointer-events: none;
    }

    .assistant-detail-hero-inner {
        position: relative;
        z-index: 2;
    }

    .preview-alert-premium {
        border: 1px solid rgba(255, 193, 7, 0.34);
        border-radius: 24px;
        padding: 20px 22px;
        background:
            linear-gradient(135deg, rgba(255, 248, 230, 0.97) 0%, rgba(255, 253, 247, 0.98) 100%);
        color: #475569;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
    }

    .preview-alert-premium strong {
        color: #0d1f2a;
    }

    .preview-alert-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: #fff0c2;
        color: #b7791f;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }


    /* =========================================================
       MAIN IMAGE CARD
    ========================================================= */
    .profile-showcase-card {
        position: relative;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 36px;
        padding: 18px;
        box-shadow: 0 36px 86px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.66);
        overflow: hidden;
    }

    .profile-showcase-card::before {
        content: "";
        position: absolute;
        left: -60px;
        bottom: -80px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.08);
        pointer-events: none;
    }

    .main-profile-image-wrapper {
        position: relative;
        z-index: 2;
        border-radius: 28px;
        overflow: hidden;
        background: #f8fafc;
    }

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

    .profile-showcase-card:hover .profile-detail-image {
        transform: scale(1.03);
    }

    .profile-detail-placeholder {
        min-height: 540px;
        border-radius: 28px;
        background:
            linear-gradient(135deg, #f8fbfb 0%, #edf6f5 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 4rem;
    }

    .profile-image-chip {
        position: absolute;
        left: 24px;
        bottom: 24px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #0d1f2a;
        font-weight: 900;
        font-size: 0.84rem;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    }


    /* =========================================================
       RIGHT HERO PROFILE PANEL
    ========================================================= */
    .profile-preview-panel {
        height: 100%;
        background: rgba(255, 255, 255, 0.97);
        border-radius: 36px;
        padding: 34px;
        box-shadow: 0 36px 86px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.66);
        position: relative;
        overflow: hidden;
    }

    .profile-preview-panel::before {
        content: "";
        position: absolute;
        top: -65px;
        right: -65px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.10);
        pointer-events: none;
    }

    .profile-preview-panel-inner {
        position: relative;
        z-index: 2;
    }

    .service-preview-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 800;
        background: #eafff7;
        color: #0d9488;
        border: 1px solid rgba(13, 148, 136, 0.18);
    }

    .profile-status-badge-row .badge {
        border-radius: 999px;
        padding: 0.56rem 0.82rem;
        font-weight: 800;
        font-size: 0.76rem;
    }

    .profile-preview-title {
        color: #0d1f2a;
        font-size: clamp(2rem, 3.3vw, 3rem);
        line-height: 1.15;
        font-weight: 900;
    }

    .profile-service-category {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 17px;
        border-radius: 999px;
        background:
            linear-gradient(135deg, #0d1f2a 0%, #0d9488 100%);
        color: #fff;
        font-size: 0.98rem;
        font-weight: 900;
        box-shadow: 0 16px 34px rgba(13, 148, 136, 0.20);
    }

    .profile-preview-intro {
        color: #64748b;
        line-height: 1.85;
        font-size: 1.05rem;
    }


    /* =========================================================
       SUMMARY BOX
    ========================================================= */
    .assistant-summary-box {
        background: #f8fbfb;
        border-radius: 28px;
        border: 1px solid #e7eeee;
        padding: 22px;
        margin-bottom: 24px;
    }

    .assistant-summary-title {
        color: #0d1f2a;
        font-weight: 900;
        margin-bottom: 18px;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 13px 0;
        border-top: 1px dashed #dfe9eb;
    }

    .summary-row:first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .summary-label {
        color: #64748b;
        font-size: 0.88rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .summary-value {
        color: #0d1f2a;
        font-weight: 800;
        text-align: right;
        line-height: 1.55;
    }

    .boolean-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .boolean-yes {
        background: #e6fcf5;
        color: #087f5b;
    }

    .boolean-no {
        background: #f1f5f9;
        color: #64748b;
    }

    .hidden-details-alert {
        border-radius: 20px;
        border: 1px solid rgba(13, 148, 136, 0.18);
        background:
            linear-gradient(135deg, #effcf9 0%, #f8fffd 100%);
        color: #475569;
        font-weight: 650;
    }


    /* =========================================================
       BUTTONS AND FOOTNOTE
    ========================================================= */
    .profile-action-btn {
        min-height: 54px;
        border-radius: 999px;
        font-weight: 900;
    }

    .profile-preview-note {
        padding: 16px 18px;
        border-radius: 20px;
        background: #f8fbfb;
        border: 1px solid #e7eeee;
        color: #64748b;
        line-height: 1.75;
    }


    /* =========================================================
       LOWER SECTION
    ========================================================= */
    .assistant-detail-lower-section {
        position: relative;
        background:
            linear-gradient(180deg, #f5faf9 0%, #eef6f5 100%);
        padding: 70px 0 84px;
    }

    .premium-detail-card {
        background: #fff;
        border-radius: 32px;
        padding: 32px;
        box-shadow: 0 22px 56px rgba(15, 23, 42, 0.09);
        border: 1px solid #edf2f3;
        margin-bottom: 28px;
        position: relative;
        overflow: hidden;
    }

    .premium-detail-card::before {
        content: "";
        position: absolute;
        top: -72px;
        right: -72px;
        width: 185px;
        height: 185px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.06);
        pointer-events: none;
    }

    .premium-detail-inner {
        position: relative;
        z-index: 2;
    }

    .detail-card-heading {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 22px;
    }

    .detail-card-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .detail-card-heading h3,
    .detail-card-heading h4,
    .detail-card-heading h5 {
        color: #0d1f2a;
        font-weight: 900;
        margin-bottom: 5px;
    }

    .detail-card-heading p {
        margin-bottom: 0;
        color: #64748b;
        line-height: 1.7;
    }

    .detail-text-body {
        color: #64748b;
        line-height: 1.9;
    }

    .hidden-profile-card {
        background:
            linear-gradient(135deg, #ffffff 0%, #f8fffd 100%);
        border: 1px solid rgba(13, 148, 136, 0.12);
    }

    .hidden-profile-btn {
        border-radius: 999px;
        min-height: 50px;
        font-weight: 900;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }


    /* =========================================================
       SIDEBAR CARDS
    ========================================================= */
    .contact-form-card {
        background: #fff;
        border-radius: 32px;
        overflow: hidden;
        box-shadow: 0 22px 56px rgba(15, 23, 42, 0.10);
        border: 1px solid #edf2f3;
        margin-bottom: 28px;
    }

    .contact-form-header {
        padding: 26px 28px 22px;
        background:
            linear-gradient(135deg, #0d1f2a 0%, #0d9488 100%);
        color: #fff;
    }

    .contact-form-header h4 {
        color: #fff;
        font-weight: 900;
    }

    .contact-form-header p {
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.7;
    }

    .contact-form-body {
        padding: 26px 28px 30px;
    }

    .sidebar-status-row {
        padding: 15px 0;
        border-bottom: 1px dashed #dfe9eb;
    }

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

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

    .sidebar-status-label {
        display: block;
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 5px;
    }

    .sidebar-status-value {
        color: #0d1f2a;
        font-weight: 800;
        line-height: 1.65;
    }

    .sidebar-value-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 800;
    }

    .sidebar-success {
        background: #e6fcf5;
        color: #087f5b;
    }

    .sidebar-warning {
        background: #fff7e6;
        color: #b7791f;
    }

    .sidebar-muted {
        background: #f1f5f9;
        color: #64748b;
    }

    .partner-tip-list li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 11px 0;
        color: #475569;
        line-height: 1.7;
        border-bottom: 1px dashed #dfe9eb;
    }

    .partner-tip-list li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .partner-tip-list i {
        color: #0d9488;
        margin-top: 4px;
        flex-shrink: 0;
    }

    .sidebar-primary-btn {
        min-height: 50px;
        border-radius: 999px;
        font-weight: 900;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
        .assistant-detail-hero {
            padding: 64px 0 60px;
        }

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

        .profile-preview-panel,
        .profile-showcase-card,
        .premium-detail-card,
        .contact-form-body {
            padding: 24px;
        }

        .contact-form-header {
            padding: 24px;
        }

        .summary-row {
            flex-direction: column;
            gap: 5px;
        }

        .summary-value {
            text-align: left;
        }
    }
</style>


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

    <!-- =========================================================
         HERO
    ========================================================= -->
    <section class="assistant-detail-hero">
        <div class="container assistant-detail-hero-inner">

            {% if is_public_limited_preview %}
                <div class="preview-alert-premium mb-5">
                    <div class="d-flex flex-column flex-md-row align-items-start gap-3">
                        <div class="preview-alert-icon">
                            <i class="bi bi-eye-slash-fill"></i>
                        </div>

                        <div>
                            <strong>Limited public preview:</strong>
                            Public visitors can see only basic featured service partner profile information.
                            Sign up as a service partner to understand how approved profiles are presented to international guests.
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="row g-5 align-items-stretch">

                <!-- LEFT PROFILE IMAGE -->
                <div class="col-lg-7">
                    <div class="profile-showcase-card h-100">
                        {% if profile.profile_photo %}
                            <div class="main-profile-image-wrapper">
                                <img src="{{ profile.profile_photo.url }}"
                                     class="profile-detail-image"
                                     alt="{% if show_full_service_profile_preview %}{{ profile.display_name|default:profile.full_name }}{% else %}Service partner profile{% endif %}">
                                <span class="profile-image-chip">
                                    <i class="bi bi-person-workspace"></i>
                                    Service Partner Preview
                                </span>
                            </div>
                        {% else %}
                            <div class="profile-detail-placeholder">
                                <i class="bi bi-person-workspace"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>


                <!-- RIGHT PROFILE INTRO -->
                <div class="col-lg-5">
                    <div class="profile-preview-panel">
                        <div class="profile-preview-panel-inner">

                            <span class="service-preview-badge mb-3">
                                <i class="bi bi-person-vcard-fill"></i>
                                Service Partner Profile Preview
                            </span>

                            <div class="profile-status-badge-row d-flex flex-wrap gap-2 mb-3">
                                {% if profile.is_featured %}
                                    <span class="badge bg-warning text-dark">
                                        <i class="bi bi-star-fill me-1"></i>
                                        Featured Profile
                                    </span>
                                {% endif %}

                                {% if not profile.is_public %}
                                    <span class="badge bg-dark">
                                        <i class="bi bi-shield-lock-fill me-1"></i>
                                        Private Profile
                                    </span>
                                {% endif %}
                            </div>

                            {% if show_full_service_profile_preview %}
                                <h1 class="profile-preview-title mb-3">
                                    {{ profile.display_name|default:profile.full_name }}
                                </h1>
                            {% else %}
                                <h1 class="profile-preview-title mb-3">
                                    Service Partner Profile
                                </h1>
                            {% endif %}

                            <div class="profile-service-category mb-4">
                                <i class="bi bi-briefcase-fill"></i>
                                {{ profile.get_service_type_display|default:"Service Partner" }}
                            </div>

                            {% if show_full_service_profile_preview %}
                                <p class="profile-preview-intro mb-4">
                                    {{ profile.short_intro|default:"Approved local service partner profile available inside the trusted service partner network." }}
                                </p>
                            {% else %}
                                <p class="profile-preview-intro mb-4">
                                    This is a limited profile preview. Sign up as a service partner to understand how full profile details are presented.
                                </p>
                            {% endif %}

                            <div class="assistant-summary-box">
                                <h6 class="assistant-summary-title">Profile Summary</h6>

                                <div class="summary-row">
                                    <span class="summary-label">Service Type</span>
                                    <span class="summary-value">
                                        {{ profile.get_service_type_display|default:"Not specified" }}
                                    </span>
                                </div>

                                <div class="summary-row">
                                    <span class="summary-label">City</span>
                                    <span class="summary-value">
                                        {{ profile.city|default:"Not specified" }}
                                    </span>
                                </div>

                                <div class="summary-row">
                                    <span class="summary-label">District</span>
                                    <span class="summary-value">
                                        {{ profile.district|default:"Not specified" }}
                                    </span>
                                </div>

                                {% if show_full_service_profile_preview %}
                                    <div class="summary-row">
                                        <span class="summary-label">Country</span>
                                        <span class="summary-value">
                                            {{ profile.country|default:"Not specified" }}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Languages</span>
                                        <span class="summary-value">
                                            {{ profile.languages_spoken|default:"Not specified" }}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Experience</span>
                                        <span class="summary-value">
                                            {{ profile.experience_summary|default:"Not specified" }}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Education</span>
                                        <span class="summary-value">
                                            {{ profile.education|default:"Not specified" }}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">License</span>
                                        <span class="summary-value">
                                            {% if profile.has_license %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Passport Ready</span>
                                        <span class="summary-value">
                                            {% if profile.passport_ready %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Willing to Relocate</span>
                                        <span class="summary-value">
                                            {% if profile.willing_to_relocate %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Live-in Available</span>
                                        <span class="summary-value">
                                            {% if profile.live_in_available %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Part-time Available</span>
                                        <span class="summary-value">
                                            {% if profile.part_time_available %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>

                                    <div class="summary-row">
                                        <span class="summary-label">Full-time Available</span>
                                        <span class="summary-value">
                                            {% if profile.full_time_available %}
                                                <span class="boolean-pill boolean-yes">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Yes
                                                </span>
                                            {% else %}
                                                <span class="boolean-pill boolean-no">
                                                    <i class="bi bi-dash-circle-fill"></i>
                                                    No
                                                </span>
                                            {% endif %}
                                        </span>
                                    </div>
                                {% else %}
                                    <div class="alert hidden-details-alert mt-3 mb-0">
                                        More profile details are hidden in public preview mode.
                                    </div>
                                {% endif %}
                            </div>

                            <div class="d-grid gap-2 mt-4">
                                {% if service_partner_profile %}
                                    <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                                       class="btn btn-dark btn-lg profile-action-btn">
                                        <i class="bi bi-speedometer2 me-2"></i>
                                        My Service Dashboard
                                    </a>
                                {% else %}
                                    <a href="{% url 'service_partner_app:service_partner_register' %}"
                                       class="btn btn-dark btn-lg profile-action-btn">
                                        <i class="bi bi-person-plus-fill me-2"></i>
                                        Sign Up as Service Partner
                                    </a>
                                {% endif %}

                                <a href="{% url 'service_partner_app:public_assistant_list' %}"
                                   class="btn btn-outline-secondary btn-lg profile-action-btn">
                                    <i class="bi bi-arrow-left me-2"></i>
                                    Back to Service Partner Profiles
                                </a>
                            </div>

                            <div class="profile-preview-note small mt-4">
                                This is a service-partner-side preview. Guest contact, hiring requests,
                                and arrangement workflows are handled separately through the platform.
                            </div>

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

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


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

                <!-- LEFT MAIN CONTENT -->
                <div class="col-lg-8">

                    {% if show_full_service_profile_preview %}

                        <div class="premium-detail-card">
                            <div class="premium-detail-inner">
                                <div class="detail-card-heading">
                                    <div class="detail-card-icon">
                                        <i class="bi bi-person-lines-fill"></i>
                                    </div>

                                    <div>
                                        <h3>About</h3>
                                        <p>Professional profile overview and personal service description.</p>
                                    </div>
                                </div>

                                <div class="detail-text-body">
                                    {% if profile.about_me %}
                                        {{ profile.about_me|linebreaks }}
                                    {% elif profile.short_intro %}
                                        {{ profile.short_intro|linebreaks }}
                                    {% else %}
                                        No detailed profile description provided.
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        {% if profile.skills %}
                            <div class="premium-detail-card">
                                <div class="premium-detail-inner">
                                    <div class="detail-card-heading">
                                        <div class="detail-card-icon">
                                            <i class="bi bi-tools"></i>
                                        </div>

                                        <div>
                                            <h5>Skills</h5>
                                            <p>Key strengths and service capabilities shared through the profile.</p>
                                        </div>
                                    </div>

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

                        {% if profile.address and show_private_service_profile_preview %}
                            <div class="premium-detail-card">
                                <div class="premium-detail-inner">
                                    <div class="detail-card-heading">
                                        <div class="detail-card-icon">
                                            <i class="bi bi-geo-alt-fill"></i>
                                        </div>

                                        <div>
                                            <h5>Location Note</h5>
                                            <p>Additional address information visible under the current access level.</p>
                                        </div>
                                    </div>

                                    <div class="detail-text-body mb-0">
                                        {{ profile.address|linebreaks }}
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                    {% else %}

                        <div class="premium-detail-card hidden-profile-card">
                            <div class="premium-detail-inner">
                                <div class="detail-card-heading">
                                    <div class="detail-card-icon">
                                        <i class="bi bi-eye-slash-fill"></i>
                                    </div>

                                    <div>
                                        <h3>More Profile Details Are Hidden</h3>
                                        <p>Public viewers receive only a carefully limited profile preview.</p>
                                    </div>
                                </div>

                                <p class="detail-text-body mb-4">
                                    Public visitors can see only a limited profile preview.
                                    Sign up as a service partner to understand how approved profiles are presented,
                                    how featured visibility works, and how the platform supports local job seekers.
                                </p>

                                <a href="{% url 'service_partner_app:service_partner_register' %}"
                                   class="btn btn-dark hidden-profile-btn">
                                    <i class="bi bi-person-plus-fill me-2"></i>
                                    Become a Service Partner
                                </a>
                            </div>
                        </div>

                    {% endif %}


                    <div class="premium-detail-card">
                        <div class="premium-detail-inner">
                            <div class="detail-card-heading">
                                <div class="detail-card-icon">
                                    <i class="bi bi-mortarboard-fill"></i>
                                </div>

                                <div>
                                    <h4>Training & Professional Growth</h4>
                                    <p>Strengthen your profile and service readiness over time.</p>
                                </div>
                            </div>

                            <p class="detail-text-body mb-0">
                                Service partners may improve their opportunities through better communication,
                                English language ability, guest-handling skills, punctuality, presentation,
                                and professional conduct. Ensolanka can support training guidance for serious service partners.
                            </p>
                        </div>
                    </div>


                    <div class="premium-detail-card">
                        <div class="premium-detail-inner">
                            <div class="detail-card-heading">
                                <div class="detail-card-icon">
                                    <i class="bi bi-shield-check"></i>
                                </div>

                                <div>
                                    <h4>Trust & Safety Notice</h4>
                                    <p>Professional presentation with stronger privacy and process protection.</p>
                                </div>
                            </div>

                            <p class="detail-text-body mb-0">
                                This platform is designed to present local service partners professionally while protecting privacy,
                                maintaining quality control, and reducing unsafe or unverified arrangements.
                                Direct guest arrangements should follow the platform process.
                            </p>
                        </div>
                    </div>

                </div>


                <!-- RIGHT SIDEBAR -->
                <div class="col-lg-4">

                    <div class="contact-form-card">
                        <div class="contact-form-header">
                            <h4 class="mb-2">Partner-Side Preview</h4>
                            <p class="mb-0">
                                This page helps service partners understand how approved profiles appear inside the platform.
                            </p>
                        </div>

                        <div class="contact-form-body">

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Profile Status</span>
                                <div class="sidebar-status-value">
                                    {% if profile.status == 'approved' %}
                                        <span class="sidebar-value-pill sidebar-success">
                                            <i class="bi bi-check-circle-fill"></i>
                                            Approved
                                        </span>
                                    {% else %}
                                        <span class="sidebar-value-pill sidebar-warning">
                                            <i class="bi bi-hourglass-split"></i>
                                            {{ profile.get_status_display }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Profile Visibility</span>
                                <div class="sidebar-status-value">
                                    {% if profile.is_public %}
                                        <span class="sidebar-value-pill sidebar-success">
                                            <i class="bi bi-eye-fill"></i>
                                            Public Profile
                                        </span>
                                    {% else %}
                                        <span class="sidebar-value-pill sidebar-muted">
                                            <i class="bi bi-shield-lock-fill"></i>
                                            Private Profile
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Featured Status</span>
                                <div class="sidebar-status-value">
                                    {% if profile.is_featured %}
                                        <span class="sidebar-value-pill sidebar-warning">
                                            <i class="bi bi-star-fill"></i>
                                            Featured Profile
                                        </span>
                                    {% else %}
                                        <span class="sidebar-value-pill sidebar-muted">
                                            <i class="bi bi-person"></i>
                                            Normal Profile
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Your Access</span>
                                <div class="sidebar-status-value">
                                    {% if is_approved_service_partner %}
                                        <span class="sidebar-value-pill sidebar-success">
                                            <i class="bi bi-person-check-fill"></i>
                                            Approved Service Partner
                                        </span>
                                    {% elif is_service_partner_authenticated %}
                                        <span class="sidebar-value-pill sidebar-warning">
                                            <i class="bi bi-hourglass-split"></i>
                                            Approval Pending
                                        </span>
                                    {% else %}
                                        <span class="sidebar-value-pill sidebar-muted">
                                            <i class="bi bi-eye-slash-fill"></i>
                                            Public Limited Preview
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Private Profile Access</span>
                                <div class="sidebar-status-value">
                                    {% if can_view_private_service_profiles %}
                                        <span class="sidebar-value-pill sidebar-success">
                                            <i class="bi bi-unlock-fill"></i>
                                            Private Preview Enabled
                                        </span>
                                    {% elif is_approved_service_partner %}
                                        <span class="sidebar-value-pill sidebar-warning">
                                            <i class="bi bi-eye-fill"></i>
                                            Public Profiles Only
                                        </span>
                                    {% elif is_service_partner_authenticated %}
                                        <span class="sidebar-value-pill sidebar-warning">
                                            <i class="bi bi-clock-history"></i>
                                            After Approval / Access
                                        </span>
                                    {% else %}
                                        <span class="sidebar-value-pill sidebar-muted">
                                            <i class="bi bi-lock-fill"></i>
                                            Not Available Publicly
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="sidebar-status-row">
                                <span class="sidebar-status-label">Process</span>
                                <div class="sidebar-status-value">
                                    Create your service partner profile, complete review,
                                    improve your visibility, and prepare for suitable
                                    international guest-service opportunities.
                                </div>
                            </div>

                        </div>
                    </div>


                    <div class="contact-form-card">
                        <div class="contact-form-header">
                            <h4 class="mb-2">For Service Partners</h4>
                            <p class="mb-0">
                                Build a strong, genuine, and professional profile to improve your chance
                                of being noticed by international guests.
                            </p>
                        </div>

                        <div class="contact-form-body">
                            <ul class="list-unstyled partner-tip-list mb-4">
                                <li>
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Use a clear and professional profile photo.</span>
                                </li>

                                <li>
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Explain your service type and experience honestly.</span>
                                </li>

                                <li>
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Add language ability and previous work experience.</span>
                                </li>

                                <li>
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Mention overseas or foreign-client experience if available.</span>
                                </li>

                                <li>
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Consider featured visibility if you are serious.</span>
                                </li>
                            </ul>

                            {% if service_partner_profile %}
                                <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                                   class="btn btn-dark w-100 sidebar-primary-btn">
                                    <i class="bi bi-speedometer2 me-2"></i>
                                    Manage My Service Profile
                                </a>
                            {% else %}
                                <a href="{% url 'service_partner_app:service_partner_register' %}"
                                   class="btn btn-dark w-100 sidebar-primary-btn">
                                    <i class="bi bi-person-plus-fill me-2"></i>
                                    Create My Service Profile
                                </a>
                            {% endif %}
                        </div>
                    </div>

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

</div>

{% endblock %}