{% extends "admin/base.html" %}

{% block title %}Menus | Admin{% endblock %}

{% block content %}
<p class="eyebrow-dark">Navigation</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">Menu Items</h1>

<form class="mt-8 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm" method="post">
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-zinc-200">
      <thead><tr><th class="table-heading">Label</th><th class="table-heading">URL</th><th class="table-heading">Location</th><th class="table-heading">Order</th><th class="table-heading">Active</th></tr></thead>
      <tbody class="divide-y divide-zinc-200">
        {% for item in items %}
          <tr>
            <td class="table-cell"><input type="hidden" name="item_id" value="{{ item.id }}"><input class="form-input" name="label_en_{{ item.id }}" value="{{ item.label_en or '' }}"></td>
            <td class="table-cell"><input class="form-input" name="url_{{ item.id }}" value="{{ item.url or '' }}"></td>
            <td class="table-cell"><select class="form-input" name="location_{{ item.id }}"><option value="header" {% if item.location == 'header' %}selected{% endif %}>header</option><option value="footer" {% if item.location == 'footer' %}selected{% endif %}>footer</option></select></td>
            <td class="table-cell"><input class="form-input" name="sort_order_{{ item.id }}" value="{{ item.sort_order }}"></td>
            <td class="table-cell"><input type="checkbox" name="is_active_{{ item.id }}" {% if item.is_active %}checked{% endif %}></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <h2 class="mt-8 text-xl font-black">Add Menu Item</h2>
  <div class="mt-4 grid gap-4 md:grid-cols-5">
    <input class="form-input" name="new_label_en" placeholder="Label">
    <input class="form-input" name="new_url" placeholder="/{lang}/page">
    <select class="form-input" name="new_location"><option value="header">header</option><option value="footer">footer</option></select>
    <input class="form-input" name="new_sort_order" placeholder="Sort order" value="100">
    <button class="btn-primary" type="submit">Save Menus</button>
  </div>
</form>
{% endblock %}