{% load tailwind_tags static i18n %}
<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% if current_site %}{{ current_site.name }}{% else %}Ecoloop{% endif %} — {% block title %}{% endblock %}</title>
  {% tailwind_css %}
  <script defer src="{% static 'alpinejs/dist/cdn.min.js' %}"></script>
</head>
<body class="bg-gray-50 text-gray-900">
  <header class="bg-white shadow">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
      <a href="/" class="text-lg font-semibold">{% if current_site %}{{ current_site.name }}{% else %}Ecoloop{% endif %}</a>
      <nav class="hidden md:flex items-center gap-6">
        <a href="/#materials" class="hover:text-black/70">{% trans "Materials" %}</a>
        <a href="/#listings" class="hover:text-black/70">{% trans "Listings" %}</a>
        <a href="/#pickup-request" class="hover:text-black/70">{% trans "Request Pickup" %}</a>
        <a href="/#blog" class="hover:text-black/70">{% trans "Blog" %}</a>
        <a href="/#contact" class="hover:text-black/70">{% trans "Contact" %}</a>
      </nav>
      <form method="post" action="{% url 'set_language' %}" class="hidden md:block ml-4">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
        {% get_available_languages as langs %}
        {% get_language_info_list for langs as languages %}
        <label for="lang" class="sr-only">Language</label>
        <select id="lang" name="language" class="text-sm border border-gray-300 rounded px-2 py-1 bg-white"
                onchange="this.form.submit()">
          {% for lang in languages %}
            <option value="{{ lang.code }}" {% if lang.code == LANGUAGE_CODE %}selected{% endif %}>{{ lang.name_local }}</option>
          {% endfor %}
        </select>
      </form>
    </div>
  </header>
  <main class="mx-auto max-w-7xl p-4 sm:p-6 lg:p-8 min-h-[80vh]">
    {% if messages %}
      <div id="messages" class="max-w-3xl mx-auto mb-4 space-y-2">
        {% for message in messages %}
          <div class="rounded border px-4 py-3 shadow {% if 'success' in message.tags %}bg-emerald-50 border-emerald-200 text-emerald-800{% elif 'error' in message.tags %}bg-rose-50 border-rose-200 text-rose-800{% elif 'warning' in message.tags %}bg-amber-50 border-amber-200 text-amber-900{% else %}bg-sky-50 border-sky-200 text-sky-900{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}
    {% block content %}{% endblock %}
  </main>
  <footer class="bg-white border-t">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between text-sm text-gray-600">
      <span>&copy; {% now "Y" %} {% if current_site %}{{ current_site.name }}{% else %}Ecoloop{% endif %}</span>
      <a href="/webadmin/" class="hover:underline">{% trans "Staff Login" %}</a>
    </div>
  </footer>
</body>
</html>
