{% 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 %}Home in Sri Lanka | Remote Owners, Local Maintenance{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{% static 'expat_life/images/favicon_p.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/property_care.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-shield-check"></i>
                    Trusted local property care for owners living overseas or away from home
                </span>
            </div>

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

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

                {% if is_property_manager_user %}
                    <a href="{% url 'property_manager_app:property_manager_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 'property_manager_app:home_property_manager' %}">

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

            <span class="brand-text-wrap d-flex flex-column">
                <span class="brand-title">Home in Sri Lanka</span>
                <small class="brand-subtitle">Remote Owners, Local Maintenance.</small>
            </span>
        </a>

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


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

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

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

                <!-- SERVICES -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'property_manager_app:property_care_services_page' %}">
                        Services
                    </a>
                </li>

                <!-- CALCULATOR -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'property_manager_app:property_care_calculator_page' %}">
                        Calculator
                    </a>
                </li>

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

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

                        <!-- =========================================
                             PROPERTY CARE CLIENT
                        ========================================== -->
                        {% if is_property_manager_user %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_manager_dashboard' %}">
                                    Dashboard
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_manager_profile_page' %}">
                                    Profile
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:managed_property_create' %}">
                                    Add Property
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:managed_property_list' %}">
                                    My Properties
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_care_estimate_center' %}">
                                    Estimates
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_care_report_center' %}">
                                    Reports
                                </a>
                            </li>

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


                        <!-- =========================================
                             AUTHENTICATED USER FROM ANOTHER APP
                             Rental owner, affiliate, guest, etc.
                             Can extend same account.
                        ========================================== -->
                        {% elif request.user.is_authenticated %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_manager_signup' %}">
                                    Add Care Access
                                </a>
                            </li>

                            <li>
                                <span class="dropdown-item-text small text-muted">
                                    Use your existing Ensolanka account
                                </span>
                            </li>


                        <!-- =========================================
                             PUBLIC VISITOR
                        ========================================== -->
                        {% else %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_manager_signup' %}">
                                    Sign Up
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'property_manager_app:property_manager_login' %}">
                                    Sign In
                                </a>
                            </li>

                        {% endif %}

                    </ul>
                </li>

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


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

                    {% if request.user.property_manager_client_profile %}

                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'property_manager_app:property_manager_dashboard' %}">
                                Dashboard
                            </a>
                        </li>

                    {% elif request.user.rental_owner_profile %}

                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'rental_app:rental_owner_dashboard' %}">
                                Rental Dashboard
                            </a>
                        </li>

                    {% elif request.user.affiliate_profile %}

                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'affiliates_app:affiliate_dashboard' %}">
                                Affiliate 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>


                <!-- =================================================
                     PUBLIC CTA BUTTONS
                ================================================== -->
                {% else %}

                    <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
                        <a href="{% url 'property_manager_app:property_manager_login' %}"
                           class="btn btn-outline-dark premium-nav-btn me-2">
                            Sign In
                        </a>

                        <a href="{% url 'property_manager_app:property_manager_signup' %}"
                           class="btn btn-warning premium-nav-btn">
                            Get Care
                        </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 CTA BUTTON
========================================================= -->

<!-- Property care client -->
{% if is_property_manager_user %}
    <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-speedometer2 me-1"></i>
        My Dashboard
    </a>

<!-- Logged-in user from another app -->
{% elif request.user.is_authenticated %}
    <a href="{% url 'property_manager_app:property_manager_signup' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-house-gear-fill me-1"></i>
        Add Care Access
    </a>

<!-- Public visitor -->
{% else %}
    <a href="{% url 'property_manager_app:property_manager_signup' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-house-gear-fill me-1"></i>
        Get Property Care
    </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_p.png' %}"
                                     alt="Ensolanka Logo"
                                     class="brand-logo-img">
                            </span>

                            <div>
                                <h4 class="footer-brand-title mb-0">
                                    Home in Sri Lanka
                                </h4>

                                <small class="footer-brand-subtitle">
                                    Remote Owners, Local Maintenance.
                                </small>
                            </div>
                        </div>

                        <p class="footer-text">
                            A trusted property care portal by Ensolanka, designed for overseas owners,
                            distant homeowners, estate holders, and families who need reliable local
                            support to inspect, maintain, clean, protect, and manage properties in Sri Lanka.
                        </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 'property_manager_app:home_property_manager' %}">
                                Home
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'property_manager_app:about_us_property_manager' %}">
                                About
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'property_manager_app:property_care_services_page' %}">
                                Services
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'property_manager_app:property_care_calculator_page' %}">
                                Calculator
                            </a>
                        </li>

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


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

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

                        <!-- Property care client -->
                        {% if is_property_manager_user %}

                            <li>
                                <a href="{% url 'property_manager_app:property_manager_dashboard' %}">
                                    Dashboard
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_manager_profile_page' %}">
                                    Profile
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:managed_property_create' %}">
                                    Add Property
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:managed_property_list' %}">
                                    My Properties
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_care_report_center' %}">
                                    Reports
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_care_payment_center' %}">
                                    Payments
                                </a>
                            </li>


                        <!-- Authenticated user from another app -->
                        {% elif request.user.is_authenticated %}

                            <li>
                                <a href="{% url 'property_manager_app:property_manager_signup' %}">
                                    Add Care Access
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_care_services_page' %}">
                                    Services
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_care_calculator_page' %}">
                                    Calculator
                                </a>
                            </li>


                        <!-- Public visitor -->
                        {% else %}

                            <li>
                                <a href="{% url 'property_manager_app:property_manager_signup' %}">
                                    Owner Signup
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_manager_login' %}">
                                    Owner Sign In
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'property_manager_app:property_care_calculator_page' %}">
                                    Calculator
                                </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 until these pages are created -->
                        <li><a href="{% url 'property_manager_app:property_care_terms' %}">Terms & Conditions</a></li>
                        <li><a href="{% url 'property_manager_app:property_care_privacy_policy' %}">Privacy Policy</a></li>
                        <li><a href="{% url 'property_manager_app:property_care_refund_payment_policy' %}">Refund & Payment Policy</a></li>
                        <li><a href="{% url 'property_manager_app:property_care_disclaimer' %}">Disclaimer</a></li>
                        <li><a href="{% url 'property_manager_app:property_care_cookie_policy' %}">Cookie Policy</a></li>
                        <li><a href="{% url 'property_manager_app:property_care_faq' %}">FAQ</a></li>
                    </ul>
                </div>


                <!-- CTA BLOCK -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Protect Your Property</h6>

                    <p class="footer-text small">
                        Whether it is a house, vacant land, villa, estate, or building,
                        Ensolanka helps keep your Sri Lankan property cared for while you are away.
                    </p>

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

                        <!-- Property care client -->
                        {% if is_property_manager_user %}

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

                            <a href="{% url 'property_manager_app:managed_property_create' %}"
                               class="btn btn-outline-light btn-sm">
                                Add Property
                            </a>


                        <!-- Authenticated user from another app -->
                        {% elif request.user.is_authenticated %}

                            <a href="{% url 'property_manager_app:property_manager_signup' %}"
                               class="btn btn-warning btn-sm">
                                Add Care Access
                            </a>

                            <a href="{% url 'property_manager_app:property_care_services_page' %}"
                               class="btn btn-outline-light btn-sm">
                                View Services
                            </a>


                        <!-- Public visitor -->
                        {% else %}

                            <a href="{% url 'property_manager_app:property_manager_signup' %}"
                               class="btn btn-warning btn-sm">
                                Get Property Care
                            </a>

                            <a href="{% url 'property_manager_app:property_care_services_page' %}"
                               class="btn btn-outline-light btn-sm">
                                View Services
                            </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 remote property owners with trusted local inspections,
                    maintenance coordination, cleaning, and care services in Sri Lanka.
                </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>