<div class="bg-white rounded-lg shadow">
  {% if menu_items %}
    <div class="divide-y">
      {% for item in menu_items %}
        <div class="flex items-center gap-4 p-4 hover:bg-stone-50 transition">
          {# Drag handle #}
          <div class="text-stone-400 cursor-move">
            <i class="fa fa-grip-vertical"></i>
          </div>

          {# Page image #}
          {% if item.feature_image %}
            <img src="{{ item.feature_image }}"
                 alt="{{ item.label }}"
                 class="w-12 h-12 rounded-full object-cover flex-shrink-0" />
          {% else %}
            <div class="w-12 h-12 rounded-full bg-stone-200 flex-shrink-0"></div>
          {% endif %}

          {# Page title #}
          <div class="flex-1 min-w-0">
            <div class="font-medium truncate">{{ item.label }}</div>
            <div class="text-xs text-stone-500 truncate">{{ item.slug }}</div>
          </div>

          {# Sort order #}
          <div class="text-sm text-stone-500">
            Order: {{ item.sort_order }}
          </div>

          {# Actions #}
          <div class="flex gap-2 flex-shrink-0">
            <button
              type="button"
              hx-get="{{ url_for('menu_items.edit_menu_item', item_id=item.id) }}"
              hx-target="#menu-item-form"
              hx-swap="innerHTML"
              class="px-3 py-1 text-sm bg-stone-200 hover:bg-stone-300 rounded">
              <i class="fa fa-edit"></i> Edit
            </button>
            <button
              type="button"
              data-confirm
              data-confirm-title="Delete menu item?"
              data-confirm-text="Remove {{ item.label }} from the menu?"
              data-confirm-icon="warning"
              data-confirm-confirm-text="Yes, delete"
              data-confirm-cancel-text="Cancel"
              data-confirm-event="confirmed"
              hx-delete="{{ url_for('menu_items.delete_menu_item_route', item_id=item.id) }}"
              hx-trigger="confirmed"
              hx-target="#menu-items-list"
              hx-swap="innerHTML"
              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
              class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800">
              <i class="fa fa-trash"></i> Delete
            </button>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="p-8 text-center text-stone-400">
      <i class="fa fa-inbox text-4xl mb-2"></i>
      <p>No menu items yet. Add one to get started!</p>
    </div>
  {% endif %}
</div>
