<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock title %} GreenField Nanded</title>

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

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

    <!-- Custom Styles -->
    <style>
      * {
        text-decoration: none !important;
      }

      /* ===== Navbar Styling ===== */
      .navbar {
        background: linear-gradient(135deg, #004d00, #007b5e);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      }

      .navbar-brand {
        font-size: 1.6rem;
        font-weight: 700;
        color: #fff !important;
        letter-spacing: 0.5px;
      }

      .nav-link {
        font-size: 1.1rem;
        color: #f1f1f1 !important;
        margin: 0 8px;
        transition: all 0.3s ease;
      }

      .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 6px 12px;
      }

      .nav-button a {
        color: white !important;
        text-decoration: none;
      }

      .btn-outline-light {
        border-color: #fff;
        transition: all 0.3s ease;
      }

      .btn-outline-light:hover {
        background-color: #fff;
        color: #007b5e !important;
      }

      /* ===== Footer Styling ===== */
      footer {
        background-color: #002d1e;
        color: #d4d4d4;
        padding: 20px 0;
        margin-top: 50px;
        text-align: center;
      }

      footer a {
        color: #a8e6cf;
        text-decoration: none;
      }

      footer a:hover {
        text-decoration: underline;
        color: #fff;
      }

      /* ===== Responsive Navbar ===== */
      @media (max-width: 992px) {
        .nav-link {
          text-align: center;
          padding: 10px 0;
        }

        .navbar-nav {
          margin-top: 15px;
        }

        .btn-outline-light {
          width: 100%;
          margin-top: 10px;
        }
      }
    </style>
  </head>

  <body>
    <!-- ===== Navbar ===== -->
    <nav class="navbar navbar-expand-lg navbar-dark py-3">
      <div class="container-fluid">
        {% load static %}
        <a class="navbar-brand d-flex align-items-center" href="/">
          <img src="{% static 'logo.jpg' %}" alt="Logo" width="45" height="50" class="me-2 rounded-3 shadow-sm">
          GreenField Nanded
        </a>

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

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
            <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
            <li class="nav-item"><a class="nav-link active" href="/about_us">About Us</a></li>
            <li class="nav-item"><a class="nav-link active" href="/pricing">Pricing</a></li>
            <li class="nav-item"><a class="nav-link active" href="/equipment">Offers</a></li>
            <li class="nav-item"><a class="nav-link active" href="/ratings">Reviews</a></li>

            {% if user.is_authenticated %}
              <li class="nav-item"><a class="nav-link active" href="/dashbord">Dashboard</a></li>
              <li class="nav-item"><a class="nav-link active" href="/booking">Book a Slot</a></li>

              {% if user.is_superuser %}
                <li class="nav-item"><a class="nav-link active" href="/all_bookings">View Bookings</a></li>
              {% else %}
                <li class="nav-item"><a class="nav-link active" href="/history">My Bookings</a></li>
              {% endif %}
            {% endif %}
          </ul>

          <div class="nav-button d-flex">
            {% if user.is_authenticated %}
              <button class="btn btn-outline-light me-2">
                <a href="/Logout"><i class="bi bi-box-arrow-right"></i> Logout</a>
              </button>
            {% else %}
              <button class="btn btn-outline-light me-2">
                <a href="/Login"><i class="bi bi-person-circle"></i> Login</a>
              </button>
              <button class="btn btn-outline-light">
                <a href="/SignUp"><i class="bi bi-person-plus"></i> Sign Up</a>
              </button>
            {% endif %}
          </div>
        </div>
      </div>
    </nav>

    <!-- ===== Page Content ===== -->
    {% block body %}{% endblock body %}

    <!-- ===== Footer ===== -->
    <footer>
      <div class="container">
        <p class="mb-1">© 2025 GreenField Nanded | All Rights Reserved</p>
        <p class="small">
          Built with ❤️ by <a href="https://updategadh.com" target="_blank">UpdateGadh</a>
        </p>
      </div>
    </footer>

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