{% 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 %}Rent in Sri Lanka | Property Partner Portal{% endblock %}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{% static 'expat_life/images/favicon_r.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/rental.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-house-heart-fill"></i>
                    Helping Sri Lankan property owners reach trusted international resident guests
                </span>
            </div>

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

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

                {% if request.user.is_authenticated and request.user.rental_owner_profile %}
                    <a href="{% url 'rental_app:rental_owner_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 'rental_app:home_rental' %}">

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

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

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


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

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

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

                <!-- RENTALS DROPDOWN -->
                <li class="nav-item">
                    <a class="nav-link premium-nav-link"
                       href="{% url 'rental_app:public_rental_list' %}">
                        Public Listings
                    </a>
                </li>
                
                <!-- PROPERTY PARTNER ACCESS DROPDOWN -->
                <li class="nav-item dropdown">
                    <a class="nav-link premium-nav-link dropdown-toggle"
                       href="#"
                       id="rentalPartnerAccessDropdown"
                       role="button"
                       data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Property Partner Access
                    </a>

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

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

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'rental_app:rental_owner_dashboard' %}">
                                    My Owner Dashboard
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'rental_app:rental_owner_profile_page' %}">
                                    My Owner Profile
                                </a>
                            </li>

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

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

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

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'rental_app:rental_owner_banking_details' %}">
                                    Banking Details
                                </a>
                            </li>

                        {% else %}

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'rental_app:rental_owner_signup' %}">
                                    Become a Property Partner
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item"
                                   href="{% url 'rental_app:rental_owner_login' %}">
                                    Property Owner Sign In
                                </a>
                            </li>

                        {% endif %}

                    </ul>
                </li>

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


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

                    {% if request.user.rental_owner_profile %}
                        <li class="nav-item">
                            <a class="nav-link premium-nav-link"
                               href="{% url 'rental_app:rental_owner_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 'rental_app:rental_owner_login' %}"
                           class="btn btn-outline-dark premium-nav-btn me-2">
                            Owner Sign In
                        </a>

                        <a href="{% url 'rental_app:rental_owner_signup' %}"
                           class="btn btn-warning premium-nav-btn">
                            List Property
                        </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 PROPERTY PARTNER CTA BUTTON
========================================================= -->
{% if request.user.is_authenticated and request.user.rental_owner_profile %}
    <a href="{% url 'rental_app:rental_owner_dashboard' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-speedometer2 me-1"></i>
        My Owner Dashboard
    </a>
{% elif not request.user.is_authenticated %}
    <a href="{% url 'rental_app:rental_owner_signup' %}"
       class="floating-guest-btn btn btn-warning shadow">
        <i class="bi bi-house-add-fill me-1"></i>
        List Your Property
    </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_r.png' %}"
                                     alt="Ensolanka Logo"
                                     class="brand-logo-img">
                            </span>

                            <div>
                                <h4 class="footer-brand-title mb-0">Rent in Sri Lanka</h4>
                                <small class="footer-brand-subtitle">
                                    List Local. Reach Global.
                                </small>
                            </div>
                        </div>

                        <p class="footer-text">
                            A property partner portal helping Sri Lankan owners present suitable rentals
                            to international resident guests, digital nomads, remote workers, retirees,
                            and long-stay visitors through a more guided and trusted process.
                        </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 'rental_app:home_rental' %}">Home</a>
                        </li>

                        <li>
                            <a href="{% url 'rental_app:about_us_rent' %}">About</a>
                        </li>

                        <li>
                            <a href="{% url 'rental_app:public_rental_list' %}">
                                Public Rentals
                            </a>
                        </li>

                        <li>
                            <a href="{% url 'rental_app:private_rental_list' %}">
                                Private Rentals
                            </a>
                        </li>

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


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

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

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

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

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

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

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

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

                        {% else %}

                            <li>
                                <a href="{% url 'rental_app:rental_owner_signup' %}">
                                    Property Partner Signup
                                </a>
                            </li>

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

                            <li>
                                <a href="{% url 'rental_app:public_rental_list' %}">
                                    View Rental Listings
                                </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.
                            These will later be replaced with proper rental_app URL paths
                            after creating legal and policy pages.
                        -->

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


                <!-- CTA BLOCK -->
                <div class="col-6 col-lg-2">
                    <h6 class="footer-heading">Grow with Confidence</h6>

                    <p class="footer-text small">
                        Present your property professionally and connect with a global audience seeking
                        trusted long-stay living in Sri Lanka.
                    </p>

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

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

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

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

                        {% else %}

                            <a href="{% url 'rental_app:rental_owner_signup' %}"
                               class="btn btn-warning btn-sm">
                                Become a Partner
                            </a>

                            <a href="{% url 'rental_app:public_rental_list' %}"
                               class="btn btn-outline-light btn-sm">
                                Browse Rentals
                            </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 property partnerships and global long-stay rental opportunities 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>