<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Nature In Pots Community{% endblock %}</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
    rel="stylesheet"
  >
  <style>
    body { display: flex; flex-direction: column; min-height: 100vh; }
    main { flex: 1; }
    footer { background: #f8f9fa; padding: 1rem 0; text-align: center; }
  </style>
  {% block styles %}{% endblock %}
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm mb-4">
    <div class="container">
      <a class="navbar-brand fw-bold" href="{{ url_for('home') }}">
        Nature In Pots
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#mainNav"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="mainNav">
        <!-- Left links -->
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item me-2">
            <a class="nav-link" href="{{ url_for('home') }}">Home</a>
          </li>
          {% if current_user.is_authenticated %}
          <li class="nav-item me-2">
            <a class="nav-link" href="{{ url_for('plant.index') }}">Plants</a>
          </li>
          <li class="nav-item me-2">
            <a class="nav-link" href="{{ url_for('growlog.list_logs') }}">Grow Logs</a>
          </li>
          <li class="nav-item me-2">
            <a class="nav-link" href="{{ url_for('submission.list_submissions') }}">
              Submissions
            </a>
          </li>
          {% endif %}
        </ul>

        <!-- New-item + Admin + Plugins -->
        {% if current_user.is_authenticated %}
        <div class="d-flex align-items-center">
          <!-- +New dropdown -->
          <div class="btn-group me-3">
            <button
              type="button"
              class="btn btn-success"
              onclick="location.href='{{ url_for('plant.create') }}'"
            >
              <i class="bi bi-plus-lg"></i>
            </button>
            <button
              type="button"
              class="btn btn-success dropdown-toggle dropdown-toggle-split"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle menu</span>
            </button>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" href="{{ url_for('plant.create') }}">
                  New Plant
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{{ url_for('growlog.add_log') }}">
                  New Grow Log
                </a>
              </li>
              <li>
                <a
                  class="dropdown-item"
                  href="{{ url_for('submission.new_submission') }}"
                >
                  New Submission
                </a>
              </li>
            </ul>
          </div>

          <!-- Admin dropdown -->
          {% if current_user.role == 'admin' %}
            <div class="btn-group me-3">
              <button
                type="button"
                class="btn btn-outline-danger dropdown-toggle"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Admin
              </button>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="{{ url_for('admin.dashboard') }}">
                    Dashboard
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="{{ url_for('admin.orphaned_media_list') }}">
                    Orphaned Media
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="{{ url_for('admin.list_invitations') }}">
                    Invitations
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="{{ url_for('admin.list_users') }}">
                    Users
                  </a>
                </li>
              </ul>
            </div>
          {% endif %}

          <!-- Profile dropdown -->
          <div class="dropdown">
            <a
              class="d-flex align-items-center text-decoration-none dropdown-toggle"
              href="#"
              id="profileDropdown"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <i class="bi bi-person-circle fs-4 me-1"></i>
              <span>{{ current_user.username }}</span>
            </a>
            <ul
              class="dropdown-menu dropdown-menu-end text-small"
              aria-labelledby="profileDropdown"
            >
              <li>
                <a class="dropdown-item" href="{{ url_for('user.profile_self') }}">
                  My Profile
                </a>
              </li>
              <li><a class="dropdown-item" href="{{ url_for('auth.send_invite') }}">Invite Friends</a></li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item" href="{{ url_for('utility.upload') }}">
                  Import
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{{ url_for('utility.export_data') }}">
                  Export
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a
                  class="dropdown-item text-danger"
                  href="{{ url_for('auth.logout') }}"
                >
                  <i class="bi bi-box-arrow-right me-1"></i> Logout
                </a>
              </li>
            </ul>
          </div>
        </div>
        {% else %}
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item me-2">
            <a class="btn btn-outline-primary" href="{{ url_for('auth.login') }}">
              Login
            </a>
          </li>
          <li class="nav-item">
            <a class="btn btn-primary" href="{{ url_for('auth.register') }}">
              Register
            </a>
          </li>
        </ul>
        {% endif %}
      </div>
    </div>
  </nav>

  <main class="container">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="mt-3">
          {% for category, message in messages %}
            <div
              class="alert alert-{{ category }} alert-dismissible fade show"
              role="alert"
            >
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
  </main>

  <footer>
    &copy; {{ current_year | default(2025) }} Nature In Pots Community. All rights reserved.
  </footer>

  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  ></script>
  {% block scripts %}{% endblock %}
</body>
</html>
