{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% block meta_tags %}{% endblock %}

    <title>{% block title %}Hired in Sri Lanka | Local Service Partner Portal{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{% static 'expat_life/images/favicon_a.png' %}">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Existing Shared Main Style -->
    <link rel="stylesheet" href="{% static 'expat_life/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'expat_life/css/assistants.css' %}">

    <!-- Cropper JS CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">

    <!-- Cropper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>

    {% block extra_css %}{% endblock %}
</head>

<body>

<!-- =========================================================
     TOP BAR
========================================================= -->
<div class="topbar d-none d-lg-block">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">

            <div class="topbar-left">
                <span>
                    <i class="bi bi-briefcase-fill"></i>
                    Build trusted careers by serving international guests living in Sri Lanka
                </span>
            </div>

            <div class="topbar-right d-flex align-items-center gap-3">
                <a href="{% url 'service_partner_app:about_us_assistants' %}">
                    <i class="bi bi-info-circle-fill me-1"></i> About
                </a>

                <a href="{% url 'service_partner_app:contact_page' %}">
                    <i class="bi bi-envelope-fill me-1"></i> Contact
                </a>

                {% if request.user.is_authenticated and request.user.service_partner_profile %}
                    <a href="{% url 'service_partner_app:service_partner_dashboard' %}">
                        <i class="bi bi-grid-fill me-1"></i> My Dashboard
                    </a>
                {% endif %}
            </div>

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


<!-- =========================================================
     MAIN NAVBAR
========================================================= -->
<nav class="navbar navbar-expand-lg premium-navbar sticky-top">
    <div class="container">

        <!-- BRAND -->
        <a class="navbar-brand premium-brand d-flex align-items-center gap-2"
           href="{% url 'service_partner_app:home_service_partner' %}">

            <span class="brand-logo-circle">
                <img src="{% static 'expat_life/images/ensolanka_logo_a.png' %}"
                     alt="Ensolanka Logo"
                     class="brand-logo-img">
            </span>

            <span class="brand-text-wrap d-flex flex-column">
                <span class="brand-title">Hired in Sri Lanka</span>
                <small class="brand-subtitle">Local Skills. Global Pay</small>
            </span>
        </a>

        <!-- MOBILE TOGGLER -->
        <button class="navbar-toggler premium-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#servicePartnerMainNav"
                aria-controls="servicePartnerMainNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


        <!-- NAV CONTENT -->
        <div class="collapse navbar-collapse" id="servicePartnerMainNav">
            <ul class="navbar-nav ms-auto align-items-lg-center">

                <!-- HOME -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'service_partner_app:home_service_partner' %}">
                        Home
                    </a>
                </li>

                <!-- ABOUT -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'service_partner_app:about_us_assistants' %}">
                        About
                    </a>
                </li>

                <!-- SERVICE PROFILES -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'service_partner_app:public_assistant_list' %}">
                        Browse Service Profiles
                    </a>
                </li>

                <!-- SERVICE PARTNER ACCESS DROPDOWN -->
                <li class="nav-item dropdown">
                    <a class="nav-link premium-nav-link dropdown-toggle"
                       href="#"
                       id="servicePartnerAccessDropdown"
                       role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Partner Access
                    </a>

                    <ul class="dropdown-menu" aria-labelledby="servicePartnerAccessDropdown">

                        {% if request.user.is_authenticated and request.user.service_partner_profile %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:service_partner_dashboard' %}">
                                    My Service Dashboard
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:service_partner_profile_page' %}">
                                    My Service Profile
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:interested_foreigners_list' %}">
                                    Interested Guests
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:service_partner_payment_center' %}">
                                    Payment Center
                                </a>
                            </li>

                        {% else %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:service_partner_register' %}">
                                    Register as Service Partner
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'service_partner_app:service_partner_login' %}">
                                    Service Partner Sign In
                                </a>
                            </li>

                        {% endif %}

                    </ul>
                </li>

                <!-- CONTACT -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'service_partner_app:contact_page' %}">
                        Contact
                    </a>
                </li>


                <!-- AUTHENTICATED USER AREA -->
                {% if request.user.is_authenticated %}

                    {% if request.user.service_partner_profile %}
                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'service_partner_app:service_partner_dashboard' %}">
                                Dashboard
                            </a>
                        </li>

                    {% elif request.user.foreigner_profile %}
                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'expat_life:foreigner_dashboard' %}">
                                Guest Dashboard
                            </a>
                        </li>
                    {% endif %}

                    <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
                        <form method="post" action="{% url 'smart_logout' %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-dark premium-nav-btn">
                                Sign Out
                            </button>
                        </form>
                    </li>

                {% else %}

                    <!-- PUBLIC CTA BUTTONS -->
                    <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
                        <a href="{% url 'service_partner_app:service_partner_login' %}"
                           class="btn btn-outline-dark premium-nav-btn me-2">
                            Partner Sign In
                        </a>

                        <a href="{% url 'service_partner_app:service_partner_register' %}"
                           class="btn btn-warning premium-nav-btn">
                            Join Now
                        </a>
                    </li>

                {% endif %}

            </ul>
        </div>

    </div>
</nav>


<!-- =========================================================
     DJANGO MESSAGES
========================================================= -->
{% if messages %}
<div class="container mt-3">
    {% for message in messages %}
        <div class="alert 
            {% if message.tags %}
                alert-{{ message.tags }}
            {% else %}
                alert-info
            {% endif %}
            shadow-sm rounded-4">
            {{ message }}
        </div>
    {% endfor %}
</div>
{% endif %}


<!-- =========================================================
     PAGE CONTENT
========================================================= -->
{% block content %}{% endblock %}


<!-- =========================================================
     FLOATING SERVICE PARTNER CTA BUTTON
========================================================= -->
{% if request.user.is_authenticated and request.user.service_partner_profile %}
    <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-speedometer2 me-1"></i>
        My Service Dashboard
    </a>
{% elif not request.user.is_authenticated %}
    <a href="{% url 'service_partner_app:service_partner_register' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-person-workspace me-1"></i>
        Become a Service Partner
    </a>
{% endif %}


<!-- =========================================================
     FOOTER
========================================================= -->
<footer class="premium-footer">

    <div class="footer-main py-5">
        <div class="container">
            <div class="row g-4">

                <!-- BRAND / INTRO -->
                <div class="col-lg-4">
                    <div class="footer-brand-block">

                        <div class="d-flex align-items-center mb-3">
                            <span class="brand-logo-circle footer-logo-circle me-3">
                                <img src="{% static 'expat_life/images/ensolanka_logo_a.png' %}"
                                     alt="Ensolanka Logo"
                                     class="brand-logo-img">
                            </span>

                            <div>
                                <h4 class="footer-brand-title mb-0">Hired in Sri Lanka</h4>
                                <small class="footer-brand-subtitle">
                                    Local Skills. Global Pay
                                </small>
                            </div>
                        </div>

                        <p class="footer-text">
                            A trusted Ensolanka portal that helps skilled local professionals in Sri Lanka
                            present their service profiles and connect with international guests who need
                            reliable local support.
                        </p>
                        <!-- Secure Trust Badge -->
                        <div class="footer-secure-trust-wrap">
                            <div class="footer-secure-trust-badge">
                                <img src="{% static 'expat_life/images/secure_https_badge.png' %}"
                                    alt="Secure HTTPS SSL TLS Protected"
                                    class="footer-secure-trust-img">

                                <div class="footer-secure-trust-text">
                                    <strong>Secure HTTPS Connection</strong>
                                    <span>SSL/TLS encrypted connection protected by a trusted certificate.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- EXPLORE -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Explore</h6>

                    <ul class="footer-links list-unstyled">
                        <li>
                            <a href="{% url 'service_partner_app:home_service_partner' %}">
                                Home
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'service_partner_app:about_us_assistants' %}">
                                About
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'service_partner_app:public_assistant_list' %}">
                                Service Profiles
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'service_partner_app:contact_page' %}">
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>


                <!-- PARTNER JOURNEY -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Partner Journey</h6>

                    <ul class="footer-links list-unstyled">

                        {% if request.user.is_authenticated and request.user.service_partner_profile %}

                            <li>
                                <a href="{% url 'service_partner_app:service_partner_dashboard' %}">
                                    My Dashboard
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'service_partner_app:service_partner_profile_page' %}">
                                    My Profile
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'service_partner_app:interested_foreigners_list' %}">
                                    Interested Guests
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'service_partner_app:service_partner_payment_center' %}">
                                    Payment Center
                                </a>
                            </li>

                        {% else %}

                            <li>
                                <a href="{% url 'service_partner_app:service_partner_register' %}">
                                    Partner Signup
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'service_partner_app:service_partner_login' %}">
                                    Partner Sign In
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'service_partner_app:public_assistant_list' %}">
                                    Browse Profiles
                                </a>
                            </li>

                        {% endif %}

                    </ul>
                </div>


                <!-- LEGAL / POLICIES -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Legal & Policies</h6>

                    <ul class="footer-links list-unstyled">

                        <!--
                            Temporary placeholders.
                            We can replace these with real service_partner_app URL names
                            after creating the Terms, Privacy Policy, Refund & Payment Policy,
                            Disclaimer, Cookie Policy, and FAQ pages.
                        -->

                        <li><a href="{% url 'service_partner_app:terms_page' %}">Terms & Conditions</a></li>
                        <li><a href="{% url 'service_partner_app:privacy_policy_page' %}">Privacy Policy</a></li>
                        <li><a href="{% url 'service_partner_app:refund_payment_policy_page' %}">Refund & Payment Policy</a></li>
                        <li><a href="{% url 'service_partner_app:disclaimer_page' %}">Disclaimer</a></li>
                        <li><a href="{% url 'service_partner_app:cookie_policy_page' %}">Cookie Policy</a></li>
                        <li><a href="{% url 'service_partner_app:faq_page' %}">FAQ</a></li>
                    </ul>
                </div>


                <!-- CTA BLOCK -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Start Your Career Path</h6>

                    <p class="footer-text small">
                        Showcase your skills, improve your visibility, and prepare for guest-service opportunities.
                    </p>

                    <div class="d-grid gap-2">

                        {% if request.user.is_authenticated and request.user.service_partner_profile %}

                            <a href="{% url 'service_partner_app:service_partner_dashboard' %}"
                               class="btn btn-warning btn-sm">
                                My Dashboard
                            </a>

                            <a href="{% url 'service_partner_app:public_assistant_list' %}"
                               class="btn btn-outline-light btn-sm">
                                Browse Profiles
                            </a>

                        {% else %}

                            <a href="{% url 'service_partner_app:service_partner_register' %}"
                               class="btn btn-warning btn-sm">
                                Register Now
                            </a>

                            <a href="{% url 'service_partner_app:public_assistant_list' %}"
                               class="btn btn-outline-light btn-sm">
                                Browse Profiles
                            </a>

                        {% endif %}

                    </div>
                </div>

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


    <!-- FOOTER BOTTOM -->
    <div class="footer-bottom py-3">
        <div class="container">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">

                <small>&copy; 2026 Ensolanka LLC. All rights reserved.</small>

                <small>
                    Designed to support trusted local skills, professional careers, and international guest service opportunities.
                </small>

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

</footer>


<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

{% block extra_js %}{% endblock %}

</body>
</html>