{% 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 %}MyAdmin | Ensolanka Staff Operations{% endblock %}</title>

    <link rel="icon" type="image/png" href="{% static 'expat_life/images/favicon.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">

    {% block extra_css %}{% endblock %}

    <style>
        body {
            background:
                radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 26%),
                radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 26%),
                #f8fafc;
            color: #0f172a;
        }

        .myadmin-topbar {
            background: #071f1b;
            color: rgba(255, 255, 255, 0.86);
            font-size: 0.9rem;
        }

        .myadmin-navbar {
            background: linear-gradient(135deg, #052e25, #0f766e);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
        }

        .myadmin-brand {
            color: #fff !important;
            text-decoration: none;
        }

        .myadmin-brand-title {
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: -0.02em;
        }

        .myadmin-brand-subtitle {
            color: rgba(255, 255, 255, 0.78);
            font-size: 0.77rem;
            font-weight: 600;
        }

        .myadmin-nav-link {
            color: rgba(255, 255, 255, 0.92) !important;
            font-weight: 700;
            border-radius: 999px;
            padding: 0.58rem 0.95rem !important;
        }

        .myadmin-nav-link:hover,
        .myadmin-nav-link.active {
            background: rgba(255, 255, 255, 0.14);
            color: #fff !important;
        }

        .myadmin-user-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.5rem 0.85rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #fff;
            font-size: 0.88rem;
            font-weight: 700;
        }

        .myadmin-user-avatar {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.78);
            background: #ffffff;
        }

        .myadmin-content-wrap {
            min-height: calc(100vh - 180px);
        }

        .myadmin-alert {
            border-radius: 20px;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
        }

        .myadmin-footer {
            background: #071f1b;
            color: rgba(255, 255, 255, 0.75);
        }

        @media (max-width: 991.98px) {
            .myadmin-user-pill {
                margin-top: 0.7rem;
            }
        }
    </style>
</head>

<body>

<!-- =========================================================
     TOP BAR
========================================================= -->
<div class="myadmin-topbar py-2 d-none d-lg-block">
    <div class="container d-flex justify-content-between align-items-center">
        <div>
            <i class="bi bi-shield-lock-fill me-2"></i>
            Ensolanka Internal Staff Operations
        </div>

        <div>
            Staff-only workflow area
        </div>
    </div>
</div>


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

        <a href="{% url 'myadmin:myadmin_home' %}"
           class="navbar-brand myadmin-brand d-flex flex-column">
            <span class="myadmin-brand-title">
                MyAdmin
            </span>
            <span class="myadmin-brand-subtitle">
                Staff Review & Operations
            </span>
        </a>

        <button class="navbar-toggler bg-light"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#myadminNavbar"
                aria-controls="myadminNavbar"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="myadminNavbar">

            <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">

                <!-- Dashboard -->
                <li class="nav-item">
                    <a class="nav-link myadmin-nav-link"
                    href="{% url 'myadmin:myadmin_home' %}">
                        Dashboard
                    </a>
                </li>


                <!-- Property Care Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link myadmin-nav-link dropdown-toggle"
                    href="#"
                    id="propertyCareDropdown"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                        Property Care
                    </a>

                    <ul class="dropdown-menu myadmin-dropdown-menu"
                        aria-labelledby="propertyCareDropdown">

                        <li>
                            <a class="dropdown-item myadmin-dropdown-item"
                            href="{% url 'myadmin:property_care_property_review_list' %}">
                                <i class="bi bi-clipboard-check-fill me-2"></i>
                                Property Review Queue
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item myadmin-dropdown-item"
                            href="{% url 'myadmin:property_care_visit_list' %}">
                                <i class="bi bi-clipboard2-pulse-fill me-2"></i>
                                Maintenance Visits
                            </a>
                        </li>

                    </ul>
                </li>


                <!-- Staff User Pill -->
                <li class="nav-item ms-lg-3">
                    <span class="myadmin-user-pill">

                        {% if staff_profile and staff_profile.profile_image %}
                            <img src="{{ staff_profile.profile_image.url }}"
                                alt="{{ request.user.get_full_name|default:request.user.username }}"
                                class="myadmin-user-avatar">
                        {% else %}
                            <img src="{% static default_staff_profile_image %}"
                                alt="Default Staff Profile"
                                class="myadmin-user-avatar">
                        {% endif %}

                        <span>
                            {{ request.user.get_full_name|default:request.user.username }}
                        </span>

                    </span>
                </li>


                <!-- Logout -->
                <li class="nav-item ms-lg-2 mt-3 mt-lg-0">
                    <form method="post" action="{% url 'smart_logout' %}">
                        {% csrf_token %}

                        <button type="submit"
                                class="btn btn-warning rounded-pill fw-bold px-3">
                            Sign Out
                        </button>
                    </form>
                </li>

            </ul>

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


<!-- =========================================================
     MESSAGES
========================================================= -->
{% if messages %}
    <div class="container mt-3">
        {% for message in messages %}
            <div class="alert alert-{{ message.tags|default:'info' }} myadmin-alert">
                {{ message }}
            </div>
        {% endfor %}
    </div>
{% endif %}


<!-- =========================================================
     CONTENT
========================================================= -->
<main class="myadmin-content-wrap">
    {% block content %}{% endblock %}
</main>


<!-- =========================================================
     FOOTER
========================================================= -->
<footer class="myadmin-footer py-4 mt-5">
    <div class="container d-flex flex-column flex-md-row justify-content-between gap-2">
        <small>
            &copy; 2026 Ensolanka LLC. Internal Staff Operations.
        </small>

        <small>
            MyAdmin — Organized review workflows across platform apps.
        </small>
    </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>