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

{% block title %}Service Partner Profiles | Local Service Partner Portal{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HERO SECTION
    ========================================================= */
    .service-preview-hero {
        position: relative;
        min-height: 690px;
        padding: 92px 0 88px;
        background:
            linear-gradient(
                110deg,
                rgba(7, 22, 31, 0.98) 0%,
                rgba(10, 45, 53, 0.94) 46%,
                rgba(13, 148, 136, 0.80) 100%
            );
        overflow: hidden;
    }

    .service-preview-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% 72%, rgba(255, 255, 255, 0.12), transparent 30%);
        pointer-events: none;
    }

    .service-preview-hero::after {
        content: "";
        position: absolute;
        right: -120px;
        top: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        filter: blur(2px);
        pointer-events: none;
    }

    .service-preview-hero-inner {
        position: relative;
        z-index: 2;
    }

    .service-preview-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.36);
        color: #ffd453;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .service-preview-title {
        font-size: clamp(2.7rem, 5vw, 4.35rem);
        line-height: 1.08;
        color: #fff;
        font-weight: 900;
    }

    .service-preview-lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.15rem;
        line-height: 1.8;
        max-width: 760px;
    }

    .service-preview-btn {
        border-radius: 999px;
        min-height: 54px;
        padding-left: 1.7rem;
        padding-right: 1.7rem;
        font-weight: 800;
    }

    .service-preview-outline-btn {
        border-color: rgba(255, 255, 255, 0.65);
        color: #fff;
    }

    .service-preview-outline-btn:hover {
        background: #fff;
        color: #0d1f2a;
        border-color: #fff;
    }

    .service-hero-point-grid {
        margin-top: 28px;
    }

    .service-hero-point {
        height: 100%;
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #fff;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        backdrop-filter: blur(10px);
    }

    .service-hero-point i {
        color: #ffc107;
        font-size: 1.2rem;
        margin-top: 2px;
    }

    .service-access-card {
        background: rgba(255, 255, 255, 0.96);
        border-radius: 32px;
        padding: 34px;
        box-shadow: 0 35px 80px rgba(0, 0, 0, 0.30);
        border: 1px solid rgba(255, 255, 255, 0.60);
        position: relative;
        overflow: hidden;
    }

    .service-access-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.10);
        pointer-events: none;
    }

    .service-access-card h4 {
        position: relative;
        color: #0d1f2a;
        font-weight: 900;
    }

    .service-access-card p,
    .service-access-card ul,
    .service-access-card a {
        position: relative;
    }

    .service-access-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #eafff7;
        color: #0d9488;
        font-size: 0.82rem;
        font-weight: 800;
        margin-bottom: 16px;
    }

    .service-access-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #475569;
        line-height: 1.65;
    }

    .service-access-list i {
        color: #0d9488;
        margin-top: 4px;
    }


    /* =========================================================
       STATISTICS
    ========================================================= */
    .service-statistics-section {
        position: relative;
        margin-top: -38px;
        z-index: 3;
    }

    .service-statistics-shell {
        background: #fff;
        border-radius: 30px;
        padding: 24px;
        box-shadow: 0 24px 65px rgba(15, 23, 42, 0.12);
        border: 1px solid #edf2f3;
    }

    .network-preview-alert {
        border-radius: 20px;
        background: linear-gradient(135deg, #effcf9 0%, #f8fffd 100%);
        border: 1px solid rgba(13, 148, 136, 0.18);
        color: #334155;
    }

    .service-stat-card {
        background:
            linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
        border-radius: 24px;
        padding: 28px 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
        border: 1px solid #eef3f4;
        height: 100%;
        transition: 0.25s ease;
    }

    .service-stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.11);
    }

    .service-stat-icon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        margin: 0 auto 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eafff7;
        color: #0d9488;
        font-size: 1.4rem;
    }

    .service-stat-card h3 {
        font-weight: 900;
        color: #0d9488;
        margin-bottom: 6px;
        font-size: 2rem;
    }

    .service-stat-card p {
        font-weight: 600;
    }


    /* =========================================================
       SAMPLE PROFILE WALL
    ========================================================= */
    .sample-wall-section {
        background:
            linear-gradient(180deg, #f5faf9 0%, #eef6f5 100%);
    }

    .sample-profile-strip {
        background: #fff;
        border-radius: 30px;
        padding: 28px;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
        border: 1px solid #edf2f3;
    }

    .sample-profile-track {
        scrollbar-width: thin;
    }

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

    .sample-profile-image {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
        background: #f8f9fa;
        transition: 0.25s ease;
    }

    .sample-profile-item:hover .sample-profile-image {
        transform: translateY(-4px) scale(1.03);
    }

    .sample-profile-name {
        font-size: 0.8rem;
        font-weight: 800;
        margin-top: 10px;
        color: #0d1f2a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* =========================================================
       ACCESS MESSAGE
    ========================================================= */
    .service-access-message-section {
        background: #eef6f5;
    }

    .service-access-message-card {
        background:
            linear-gradient(135deg, #ffffff 0%, #f8fffd 100%);
        border-radius: 28px;
        padding: 30px;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
        border: 1px solid rgba(13, 148, 136, 0.12);
    }

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


    /* =========================================================
       FILTER PANEL
    ========================================================= */
    .service-profiles-section {
        background: #eef6f5;
    }

    .service-filter-card {
        background: #fff;
        border-radius: 30px;
        padding: 30px;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
        border: 1px solid #edf2f3;
    }

    .service-filter-card .form-label {
        color: #0d1f2a;
        font-weight: 800;
    }

    .service-filter-card .form-select,
    .service-filter-card .form-control {
        min-height: 52px;
        border-radius: 16px;
        border: 1px solid #dbe5e7;
        background: #fbfcfd;
        padding-left: 1rem;
    }

    .service-filter-card .form-select:focus,
    .service-filter-card .form-control:focus {
        border-color: #0d9488;
        box-shadow: 0 0 0 0.22rem rgba(13, 148, 136, 0.12);
        background: #fff;
    }

    .premium-filter-btn {
        border-radius: 999px;
        min-height: 48px;
        padding-left: 1.35rem;
        padding-right: 1.35rem;
        font-weight: 800;
    }

    .service-preview-alert {
        border-radius: 24px;
        padding: 20px 22px;
        border: 1px solid rgba(255, 193, 7, 0.32);
        background: linear-gradient(135deg, #fff8e6 0%, #fffdf7 100%);
        color: #475569;
    }


    /* =========================================================
       SUMMARY
    ========================================================= */
    .profile-summary-box {
        background: #fff;
        border-radius: 24px;
        padding: 22px 24px;
        border: 1px solid #edf2f3;
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
    }

    .page-count-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 999px;
        padding: 8px 14px;
        background: #eafff7;
        color: #0d9488;
        font-weight: 800;
        font-size: 0.88rem;
    }


    /* =========================================================
       PROFILE CARDS
    ========================================================= */
    .service-profile-card {
        border-radius: 30px;
        overflow: hidden;
        border: 1px solid #edf2f3;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
        transition: 0.28s ease;
        background: #fff;
    }

    .service-profile-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 30px 72px rgba(15, 23, 42, 0.15);
    }

    .service-profile-image-wrap {
        position: relative;
        height: 300px;
        overflow: hidden;
        background: linear-gradient(135deg, #f4f8f8 0%, #eef6f5 100%);
    }

    .service-profile-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease;
    }

    .service-profile-card:hover .service-profile-image-wrap img {
        transform: scale(1.04);
    }

    .service-profile-image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.44) 100%);
        pointer-events: none;
    }

    .service-image-placeholder {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 3.2rem;
    }

    .service-card-feature-chip {
        position: absolute;
        left: 18px;
        bottom: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #0d1f2a;
        font-size: 0.82rem;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }

    .service-profile-body {
        padding: 28px 26px;
    }

    .service-profile-badge {
        border-radius: 999px;
        padding: 0.48rem 0.78rem;
        font-weight: 800;
        font-size: 0.75rem;
    }

    .service-profile-title {
        color: #0d1f2a;
        font-weight: 900;
        line-height: 1.3;
    }

    .service-profile-meta {
        color: #64748b;
        line-height: 1.7;
    }

    .service-profile-list {
        padding: 16px;
        border-radius: 18px;
        background: #f8fbfb;
        border: 1px solid #e9f0f1;
    }

    .service-profile-list li {
        line-height: 1.65;
    }

    .service-profile-info-alert {
        background: linear-gradient(135deg, #f7fbfb 0%, #ffffff 100%);
        border: 1px solid #e5eeee;
        border-radius: 18px;
        color: #475569;
        line-height: 1.65;
    }

    .service-card-btn {
        border-radius: 999px;
        min-height: 48px;
        font-weight: 800;
    }


    /* =========================================================
       EMPTY STATE
    ========================================================= */
    .empty-profile-card {
        background: #fff;
        border-radius: 30px;
        padding: 48px 28px;
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08);
        border: 1px solid #edf2f3;
    }

    .empty-profile-icon {
        width: 76px;
        height: 76px;
        border-radius: 24px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin: 0 auto 20px;
    }


    /* =========================================================
       PAGINATION
    ========================================================= */
    .pagination .page-link {
        border: 1px solid #dbe5e7;
        color: #0d1f2a;
        min-width: 46px;
        text-align: center;
        transition: all 0.2s ease;
        background: #fff;
        font-weight: 800;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .pagination .page-link:hover {
        background-color: #0d1f2a;
        color: #fff;
        border-color: #0d1f2a;
        transform: translateY(-2px);
    }

    .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #0d9488 0%, #0d1f2a 100%);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 10px 25px rgba(13, 148, 136, 0.25);
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
        .service-preview-hero {
            min-height: auto;
            padding: 72px 0 74px;
        }

        .service-statistics-section {
            margin-top: 0;
            padding-top: 24px;
        }

        .service-access-card,
        .service-filter-card,
        .sample-profile-strip,
        .service-access-message-card {
            padding: 24px;
        }

        .service-profile-image-wrap,
        .service-image-placeholder {
            height: 280px;
        }
    }
</style>


<!-- =========================================================
     HERO / PREVIEW DASHBOARD
========================================================= -->
<section class="service-preview-hero">
    <div class="container service-preview-hero-inner">
        <div class="row align-items-center g-5">

            <div class="col-lg-7">
                <span class="service-preview-badge mb-4">
                    <i class="bi bi-people-fill"></i>
                    Service Partner Network
                </span>

                <h1 class="service-preview-title mb-4">
                    Preview Public Local Service Partner Profiles
                </h1>

                <p class="service-preview-lead mb-4">
                    See how approved public local service partner profiles are presented inside the
                    Ensolanka local service partner portal. This network is designed for housekeepers,
                    drivers, translators, cleaners, helpers, nurses, caregivers, local assistants,
                    and other reliable service-minded job seekers.
                </p>

                <div class="d-flex flex-wrap gap-3">
                    {% if service_partner_profile %}
                        <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                           class="btn btn-warning btn-lg service-preview-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-warning btn-lg service-preview-btn">
                            <i class="bi bi-person-plus-fill me-2"></i>
                            Sign Up as Service Partner
                        </a>
                    {% endif %}

                    <a href="#service-profile-section"
                       class="btn btn-outline-light btn-lg service-preview-btn service-preview-outline-btn">
                        <i class="bi bi-grid-3x3-gap-fill me-2"></i>
                        View Preview
                    </a>
                </div>

                <div class="row g-3 service-hero-point-grid">
                    <div class="col-sm-6">
                        <div class="service-hero-point">
                            <i class="bi bi-patch-check-fill"></i>
                            <span>Approved public profile showcase</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="service-hero-point">
                            <i class="bi bi-person-workspace"></i>
                            <span>Useful for future Service Partners</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="service-hero-point">
                            <i class="bi bi-stars"></i>
                            <span>Understand profile presentation style</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="service-hero-point">
                            <i class="bi bi-shield-check"></i>
                            <span>Visibility managed through structured access</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="service-access-card">
                    <span class="service-access-pill">
                        <i class="bi bi-eye-fill"></i>
                        Current Access Level
                    </span>

                    <h4 class="mb-3">{{ access_level_label }}</h4>
                    <p class="text-muted mb-4">{{ access_message }}</p>

                    <ul class="list-unstyled service-access-list mb-4">
                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>This page presents approved public service partner profiles only.</span>
                        </li>

                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Public visitors can preview limited profile presentation details.</span>
                        </li>

                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Signed-up partners can better understand how profiles are displayed.</span>
                        </li>

                        <li class="mb-0">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Guest-facing visibility benefits are handled separately inside the Guest App.</span>
                        </li>
                    </ul>

                    {% if service_partner_profile %}
                        <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                           class="btn btn-dark btn-lg w-100 rounded-pill fw-bold">
                            Continue from Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'service_partner_app:service_partner_register' %}"
                           class="btn btn-dark btn-lg w-100 rounded-pill fw-bold">
                            Create Service Partner Profile
                        </a>
                    {% endif %}
                </div>
            </div>

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


<!-- =========================================================
     STATISTICS
========================================================= -->
<section class="service-statistics-section pb-5">
    <div class="container">
        <div class="service-statistics-shell">

            {% if use_marketing_stats %}
                <div class="alert network-preview-alert mb-4">
                    <strong>Growing network preview:</strong>
                    Public numbers are presented as profile-opportunity indicators while the service partner network grows.
                </div>
            {% endif %}

            <div class="row g-3">
                <div class="col-6 col-lg-3">
                    <div class="service-stat-card text-center">
                        <div class="service-stat-icon">
                            <i class="bi bi-diagram-3-fill"></i>
                        </div>
                        <h3>{{ display_total_profiles }}+</h3>
                        <p class="mb-0 text-muted">Service Profile Opportunities</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="service-stat-card text-center">
                        <div class="service-stat-icon">
                            <i class="bi bi-person-check-fill"></i>
                        </div>
                        <h3>{{ real_public_profiles }}</h3>
                        <p class="mb-0 text-muted">Approved Public Profiles</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="service-stat-card text-center">
                        <div class="service-stat-icon">
                            <i class="bi bi-award-fill"></i>
                        </div>
                        <h3>{{ display_serious_profiles }}+</h3>
                        <p class="mb-0 text-muted">Approved / Serious Partners</p>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="service-stat-card text-center">
                        <div class="service-stat-icon">
                            <i class="bi bi-eye-fill"></i>
                        </div>
                        <h3>Public</h3>
                        <p class="mb-0 text-muted">Preview Scope on This Page</p>
                    </div>
                </div>
            </div>

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


<!-- =========================================================
     SAMPLE PROFILE WALL
========================================================= -->
<section class="py-5 sample-wall-section">
    <div class="container">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end mb-4">
            <div>
                <span class="section-mini-title">Profile Preview</span>
                <h2 class="fw-bold mt-2 mb-2">Sample Public Service Partner Profiles</h2>
                <p class="text-muted mb-0">
                    A quick visual preview of approved public local service partner profiles available inside the service partner portal.
                </p>
            </div>

            {% if not service_partner_profile %}
                <div class="mt-3 mt-lg-0">
                    <a href="{% url 'service_partner_app:service_partner_register' %}"
                       class="btn btn-dark rounded-pill px-4 fw-bold">
                        Sign Up to View More
                    </a>
                </div>
            {% endif %}
        </div>

        <div class="sample-profile-strip">
            <div class="d-flex gap-4 overflow-auto pb-2 sample-profile-track">
                {% for profile in sample_profiles %}
                    <div class="sample-profile-item">
                        {% if profile.profile_photo %}
                            <img src="{{ profile.profile_photo.url }}"
                                 alt="Service partner profile"
                                 class="sample-profile-image">
                        {% else %}
                            <div class="sample-profile-image d-inline-flex align-items-center justify-content-center">
                                <i class="bi bi-person-workspace text-muted"></i>
                            </div>
                        {% endif %}

                        <div class="sample-profile-name">
                            {% if service_partner_profile %}
                                {{ profile.display_name|default:profile.full_name|default:"Partner" }}
                            {% else %}
                                Partner
                            {% endif %}
                        </div>
                    </div>
                {% empty %}
                    {% for i in "123456789012" %}
                        <div class="sample-profile-item">
                            <div class="sample-profile-image d-inline-flex align-items-center justify-content-center">
                                <i class="bi bi-person-workspace text-muted"></i>
                            </div>
                            <div class="sample-profile-name">Partner</div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
</section>


<!-- =========================================================
     ACCESS MESSAGE
========================================================= -->
<section class="pb-4 service-access-message-section">
    <div class="container">
        <div class="service-access-message-card">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <div class="d-flex align-items-start gap-3">
                        <div class="service-access-message-icon">
                            <i class="bi bi-unlock-fill"></i>
                        </div>

                        <div>
                            <h5 class="fw-bold mb-2">Your Current Access</h5>

                            {% if not service_partner_profile %}
                                <p class="text-muted mb-0">
                                    You are viewing a public preview of approved public local service partner profiles.
                                    Sign up as a service partner to create your own profile and better understand how approved profiles are presented.
                                </p>
                            {% elif not is_approved_service_partner %}
                                <p class="text-muted mb-0">
                                    Your service partner profile is registered but not approved yet.
                                    You can preview approved public service partner profiles while waiting for approval.
                                </p>
                            {% elif is_approved_service_partner %}
                                <p class="text-muted mb-0">
                                    Your approved service partner profile can view approved public local service partner profiles.
                                    Guest-facing visibility and promotional benefits are handled separately in the Guest App.
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 text-lg-end">
                    {% if service_partner_profile %}
                        <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                           class="btn btn-dark btn-lg rounded-pill px-4 fw-bold">
                            My Service Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'service_partner_app:service_partner_register' %}"
                           class="btn btn-warning btn-lg rounded-pill px-4 fw-bold">
                            Become a Service Partner
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>


<!-- =========================================================
     PROFILE LISTING / FILTERS
========================================================= -->
<section id="service-profile-section" class="pb-5 service-profiles-section">
    <div class="container">

        <!-- FILTER BOX -->
        {% if service_partner_profile %}
            <div class="row g-4 mb-4">
                <div class="col-12">
                    <div class="service-filter-card">
                        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end mb-4 gap-3">
                            <div>
                                <span class="section-mini-title">Refine Preview</span>
                                <h3 class="fw-bold mt-2 mb-1">Filter Public Service Profiles</h3>
                                <p class="text-muted mb-0">
                                    Search profiles by service type, city, or keyword.
                                </p>
                            </div>
                        </div>

                        <form method="get">
                            <div class="row g-3 align-items-end">

                                <div class="col-md-4">
                                    <label class="form-label">Service Type</label>
                                    <select name="service_type" class="form-select">
                                        <option value="">All Service Types</option>
                                        {% for value, label in service_type_choices %}
                                            <option value="{{ value }}" {% if selected_service_type == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">City</label>
                                    <select name="city" class="form-select">
                                        <option value="">All Cities</option>
                                        {% for value, label in city_choices %}
                                            <option value="{{ value }}" {% if selected_city == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Keyword</label>
                                    <input type="text"
                                           name="q"
                                           value="{{ search_query }}"
                                           class="form-control"
                                           placeholder="Search by skills, language, service...">
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2 mt-3">
                                    <button class="btn btn-dark premium-filter-btn" type="submit">
                                        <i class="bi bi-funnel-fill me-2"></i>
                                        Apply Filters
                                    </button>

                                    <a href="{% url 'service_partner_app:public_assistant_list' %}"
                                       class="btn btn-outline-secondary premium-filter-btn">
                                        Reset
                                    </a>

                                    <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                                       class="btn btn-outline-primary premium-filter-btn ms-md-auto">
                                        My Service Dashboard
                                    </a>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="service-preview-alert mb-4">
                <strong>Public preview:</strong>
                You can browse approved public local service partner profiles in a limited presentation.
                Create a service partner profile to better understand how profiles are presented and manage your own profile.
            </div>
        {% endif %}


        <!-- SUMMARY -->
        <div class="profile-summary-box mb-4">
            <div class="row align-items-center g-3">
                <div class="col-md-8">
                    <h5 class="fw-bold mb-1">
                        {% if is_approved_service_partner %}
                            Approved Public Service Partner Profiles
                        {% elif service_partner_profile %}
                            Public Service Partner Profile Preview
                        {% else %}
                            Limited Public Service Partner Preview
                        {% endif %}
                    </h5>

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

                <div class="col-md-4 text-md-end">
                    {% if page_obj.paginator.num_pages > 1 %}
                        <span class="page-count-pill">
                            <i class="bi bi-files"></i>
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>


        <!-- PROFILE CARDS -->
        <div class="row g-4">
            {% for profile in profiles %}
                <div class="col-md-6 col-lg-4">
                    <div class="service-profile-card h-100">

                        <div class="service-profile-image-wrap">
                            {% if profile.profile_photo %}
                                <img src="{{ profile.profile_photo.url }}"
                                     alt="{{ profile.display_name|default:profile.full_name|default:'Service partner profile' }}">
                            {% else %}
                                <div class="service-image-placeholder">
                                    <i class="bi bi-person-workspace"></i>
                                </div>
                            {% endif %}

                            <div class="service-card-feature-chip">
                                <i class="bi bi-eye-fill"></i>
                                Public Preview
                            </div>
                        </div>

                        <div class="service-profile-body d-flex flex-column h-100">
                            <div class="mb-3 d-flex flex-wrap gap-2">
                                {% if profile.service_type %}
                                    <span class="badge bg-dark service-profile-badge">
                                        {{ profile.get_service_type_display }}
                                    </span>
                                {% endif %}

                                <span class="badge bg-info text-dark service-profile-badge">
                                    Public Profile
                                </span>
                            </div>

                            <h5 class="service-profile-title mb-2">
                                {% if service_partner_profile %}
                                    {{ profile.display_name|default:profile.full_name }}
                                {% else %}
                                    Service Partner Profile
                                {% endif %}
                            </h5>

                            <p class="service-profile-meta mb-2">
                                <i class="bi bi-geo-alt-fill me-1"></i>
                                {{ profile.city|default:"Location not specified" }}
                                {% if profile.district %}, {{ profile.district }}{% endif %}
                            </p>

                            {% if service_partner_profile and profile.short_intro %}
                                <p class="text-muted small mb-3">
                                    {{ profile.short_intro|truncatechars:120 }}
                                </p>
                            {% else %}
                                <p class="text-muted small mb-3">
                                    Public preview only. Sign up or continue through the service partner process
                                    to view more profile presentation details.
                                </p>
                            {% endif %}

                            <ul class="list-unstyled small text-muted mb-4 service-profile-list">
                                {% if profile.languages_spoken %}
                                    <li class="mb-2">
                                        <strong>Languages:</strong>
                                        {% if service_partner_profile %}
                                            {{ profile.languages_spoken }}
                                        {% else %}
                                            Available after signup
                                        {% endif %}
                                    </li>
                                {% endif %}

                                {% if service_partner_profile and profile.experience_summary %}
                                    <li class="mb-2">
                                        <strong>Experience:</strong>
                                        {{ profile.experience_summary|truncatechars:60 }}
                                    </li>
                                {% endif %}

                                {% if service_partner_profile and profile.education %}
                                    <li>
                                        <strong>Education:</strong> {{ profile.education }}
                                    </li>
                                {% endif %}
                            </ul>

                            <div class="alert service-profile-info-alert small mb-4">
                                {% if is_approved_service_partner %}
                                    This is a service-partner-side preview of a public profile.
                                    Guest contact and hiring workflows are handled separately.
                                {% elif service_partner_profile %}
                                    Your profile approval is required before viewing more service profile details.
                                {% else %}
                                    Sign up as a service partner to view more profile examples and create your own profile.
                                {% endif %}
                            </div>

                            <div class="mt-auto d-grid gap-2">
                                {% if show_service_profile_detail_link %}
                                    <a href="{% url 'service_partner_app:public_assistant_detail' profile.pk %}"
                                       class="btn btn-dark service-card-btn">
                                        View Profile Preview
                                    </a>
                                {% elif service_partner_profile %}
                                    <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                                       class="btn btn-outline-primary service-card-btn">
                                        Await Approval
                                    </a>
                                {% else %}
                                    <a href="{% url 'service_partner_app:service_partner_register' %}"
                                       class="btn btn-outline-primary service-card-btn">
                                        Sign Up to View More
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-profile-card text-center">
                        <div class="empty-profile-icon">
                            <i class="bi bi-search"></i>
                        </div>

                        <h5 class="fw-bold mb-2">No service partner profiles found</h5>
                        <p class="text-muted mb-4">
                            No approved public service partner profiles match your selected filters.
                        </p>

                        {% if service_partner_profile %}
                            <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                               class="btn btn-dark btn-lg rounded-pill px-4 fw-bold">
                                My Service Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'service_partner_app:service_partner_register' %}"
                               class="btn btn-warning btn-lg rounded-pill px-4 fw-bold">
                                Become a Service Partner
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>


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

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

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

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

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

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

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

    </div>
</section>

{% endblock %}