{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block title %}Partner with Ensolanka{% endblock %}</title>

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

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

    <!-- Reusing the same shared global stylesheet for now -->
    <link rel="stylesheet" href="{% static 'expat_life/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'expat_life/css/affiliates.css' %}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
    <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-globe2"></i>
                    Global affiliate partners promoting the Sri Lanka lifestyle opportunity
                </span>
            </div>

            <div class="topbar-right d-flex align-items-center gap-3">
                <a href="{% url 'affiliates_app:contact_page_aff' %}">
                    <i class="bi bi-envelope-fill me-1"></i>
                    Contact
                </a>

                {% if request.user.is_authenticated %}
                    <a href="{% url 'affiliates_app:affiliate_dashboard' %}">
                        <i class="bi bi-speedometer2 me-1"></i>
                        Dashboard
                    </a>
                {% else %}
                    <a href="{% url 'affiliates_app:affiliate_login' %}">
                        <i class="bi bi-box-arrow-in-right me-1"></i>
                        Sign In
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>


<!-- 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 'affiliates_app:home_affiliates' %}">

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

            <span class="brand-text-wrap d-flex flex-column">
                <span class="brand-title">Partner with Ensolanka</span>
                <small class="brand-subtitle">Grow Together. Earn Together.</small>
            </span>
        </a>


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


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

                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'affiliates_app:home_affiliates' %}">
                        Home
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'affiliates_app:about_us_aff' %}">
                        About
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'affiliates_app:home_affiliates' %}#affiliate-earnings">
                        Earnings
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'affiliates_app:marketing_resources' %}">
                        Resources
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'affiliates_app:contact_page_aff' %}">
                        Contact
                    </a>
                </li>


                {% if request.user.is_authenticated %}

                    <!-- AFFILIATE ACCOUNT DROPDOWN -->
                    <li class="nav-item dropdown">
                        <a class="nav-link premium-nav-link dropdown-toggle"
                           href="#"
                           id="affiliateAccountDropdown"
                           role="button"
                           data-bs-toggle="dropdown"
                           aria-expanded="false">
                            Affiliate Center
                        </a>

                        <ul class="dropdown-menu dropdown-menu-end"
                            aria-labelledby="affiliateAccountDropdown">

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'affiliates_app:affiliate_dashboard' %}">
                                    <i class="bi bi-speedometer2 me-2"></i>
                                    Dashboard
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'affiliates_app:affiliate_referral_list' %}">
                                    <i class="bi bi-people-fill me-2"></i>
                                    My Referrals
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'affiliates_app:marketing_resources' %}">
                                    <i class="bi bi-folder2-open me-2"></i>
                                    Resources
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'affiliates_app:request_affiliate_payout' %}">
                                    <i class="bi bi-wallet2 me-2"></i>
                                    Request Payout
                                </a>
                            </li>

                            <li><hr class="dropdown-divider"></li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'affiliates_app:affiliate_profile' %}">
                                    <i class="bi bi-person-circle me-2"></i>
                                    My Profile
                                </a>
                            </li>
                        </ul>
                    </li>


                    <!-- SIGN OUT -->
                    <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 %}

                    <!-- SIGN IN + JOIN -->
                    <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
                        <a href="{% url 'affiliates_app:affiliate_login' %}"
                           class="btn btn-outline-dark premium-nav-btn me-2">
                            Sign In
                        </a>

                        <a href="{% url 'affiliates_app:affiliate_register' %}"
                           class="btn btn-warning premium-nav-btn">
                            Sign Up
                        </a>
                    </li>

                {% endif %}

            </ul>
        </div>
    </div>
</nav>


<!-- DJANGO MESSAGES -->
{% if messages %}
<div class="container mt-3">
    {% for message in messages %}
        <div class="alert alert-success shadow-sm">
            {{ message }}
        </div>
    {% endfor %}
</div>
{% endif %}


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


<!-- FLOATING AFFILIATE CTA BUTTON -->
{% if request.user.is_authenticated %}
    <a href="{% url 'affiliates_app:affiliate_dashboard' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-speedometer2 me-1"></i>
        My Affiliate Dashboard
    </a>
{% else %}
    <a href="{% url 'affiliates_app:affiliate_register' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-person-plus-fill me-1"></i>
        Become an Affiliate
    </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_f.png' %}"
                                     alt="Ensolanka Logo"
                                     class="brand-logo-img">
                            </span>

                            <div>
                                <h4 class="footer-brand-title mb-0">
                                    Partner with Ensolanka
                                </h4>
                                <small class="footer-brand-subtitle">
                                    Grow Together. Earn Together.
                                </small>
                            </div>
                        </div>

                        <p class="footer-text">
                            Join Ensolanka’s affiliate partner program and help international guests discover
                            a trusted path to living in Sri Lanka while earning through transparent referrals,
                            marketing tools, and tracked commissions.
                        </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 'affiliates_app:home_affiliates' %}">
                                Home
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'affiliates_app:about_us_aff' %}">
                                About Ensolanka
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'affiliates_app:home_affiliates' %}#affiliate-earnings">
                                Earning Potential
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'affiliates_app:contact_page_aff' %}">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>


                <!-- AFFILIATE ACCESS -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Affiliate Access</h6>
                    <ul class="footer-links list-unstyled">

                        {% if request.user.is_authenticated %}
                            <li>
                                <a href="{% url 'affiliates_app:affiliate_dashboard' %}">
                                    My Dashboard
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'affiliates_app:affiliate_referral_list' %}">
                                    My Referrals
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'affiliates_app:request_affiliate_payout' %}">
                                    Request Payout
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'affiliates_app:affiliate_profile' %}">
                                    My Profile
                                </a>
                            </li>
                        {% else %}
                            <li>
                                <a href="{% url 'affiliates_app:affiliate_register' %}">
                                    Become an Affiliate
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'affiliates_app:affiliate_login' %}">
                                    Affiliate Sign In
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'affiliates_app:marketing_resources' %}">
                                    Marketing Resources
                                </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">
                        <!--
                            These will be replaced with proper affiliate_app URLs
                            after we create the affiliate Terms, Privacy, FAQ, etc.
                        -->

                        <li><a href="{% url 'affiliates_app:terms' %}">Terms & Conditions</a></li>
                        <li><a href="{% url 'affiliates_app:privacy_policy' %}">Privacy Policy</a></li>
                        <li><a href="{% url 'affiliates_app:refund_payment_policy' %}">Refund & Payment Policy</a></li>
                        <li><a href="{% url 'affiliates_app:disclaimer' %}">Disclaimer</a></li>
                        <li><a href="{% url 'affiliates_app:cookie_policy' %}">Cookie Policy</a></li>
                        <li><a href="{% url 'affiliates_app:faq' %}">FAQ</a></li>
                    </ul>
                </div>


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

                    <p class="footer-text small">
                        Promote Sri Lanka with pride, connect suitable guests, and build a transparent affiliate income stream.
                    </p>

                    <div class="d-grid gap-2">
                        {% if request.user.is_authenticated %}
                            <a href="{% url 'affiliates_app:affiliate_dashboard' %}"
                               class="btn btn-warning btn-sm">
                                My Dashboard
                            </a>

                            <a href="{% url 'affiliates_app:marketing_resources' %}"
                               class="btn btn-outline-light btn-sm">
                                Open Resources
                            </a>
                        {% else %}
                            <a href="{% url 'affiliates_app:affiliate_register' %}"
                               class="btn btn-warning btn-sm">
                                Join Affiliate Program
                            </a>

                            <a href="{% url 'affiliates_app:affiliate_login' %}"
                               class="btn btn-outline-light btn-sm">
                                Affiliate Sign In
                            </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>Built for global ambassadors who promote Sri Lanka with purpose and professionalism.</small>
            </div>
        </div>
    </div>
</footer>


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

{% block extra_js %}{% endblock %}

</body>
</html>