<div class="bg-white rounded-lg shadow p-6 mb-6" id="menu-item-form-container">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-semibold">
      {% if menu_item %}Edit{% else %}Add{% endif %} Menu Item
    </h2>
    <button
      type="button"
      onclick="document.getElementById('menu-item-form').innerHTML = ''"
      class="text-stone-400 hover:text-stone-600">
      <i class="fa fa-times"></i>
    </button>
  </div>

  {# Hidden field for selected post ID - outside form for JS access #}
  <input type="hidden" name="post_id" id="selected-post-id" value="{{ menu_item.container_id if menu_item else '' }}" />

  {# Selected page display #}
  {% if menu_item %}
    <div id="selected-page-display" class="mb-3 p-3 bg-stone-50 rounded flex items-center gap-3">
      {% if menu_item.feature_image %}
        <img src="{{ menu_item.feature_image }}"
             alt="{{ menu_item.label }}"
             class="w-10 h-10 rounded-full object-cover" />
      {% else %}
        <div class="w-10 h-10 rounded-full bg-stone-200"></div>
      {% endif %}
      <div class="flex-1">
        <div class="font-medium">{{ menu_item.label }}</div>
        <div class="text-xs text-stone-500">{{ menu_item.slug }}</div>
      </div>
    </div>
  {% else %}
    <div id="selected-page-display" class="mb-3 hidden">
      {# Will be populated by JavaScript when page selected #}
    </div>
  {% endif %}

  {# Form for submission #}
  <form
    {% if menu_item %}
      hx-put="{{ url_for('menu_items.update_menu_item_route', item_id=menu_item.id) }}"
    {% else %}
      hx-post="{{ url_for('menu_items.create_menu_item_route') }}"
    {% endif %}
    hx-target="#menu-items-list"
    hx-swap="innerHTML"
    hx-include="#selected-post-id"
    hx-on::after-request="if(event.detail.successful) { document.getElementById('menu-item-form').innerHTML = '' }"
    class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    {# Form actions #}
    <div class="flex gap-2 pb-3 border-b">
      <button
        type="submit"
        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
        <i class="fa fa-save"></i> Save
      </button>
      <button
        type="button"
        onclick="document.getElementById('menu-item-form').innerHTML = ''"
        class="px-4 py-2 border border-stone-300 rounded hover:bg-stone-50">
        Cancel
      </button>
    </div>
  </form>

  {# Search section - outside form to prevent interference #}
  <div class="mt-4">
    <label class="block text-sm font-medium text-stone-700 mb-2">
      Select Page
    </label>

    {# Search input #}
    <input
      type="text"
      placeholder="Search for a page... (or leave blank for all)"
      hx-get="{{ url_for('menu_items.search_pages_route') }}"
      hx-trigger="keyup changed delay:300ms, focus once"
      hx-target="#page-search-results"
      hx-swap="innerHTML"
      name="q"
      id="page-search-input"
      class="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />

    {# Search results container #}
    <div id="page-search-results" class="mt-2">
      {# Search results will appear here #}
    </div>
  </div>
</div>

<script>
// Handle page selection
document.addEventListener('click', function(e) {
  const pageOption = e.target.closest('[data-page-id]');
  if (pageOption) {
    const postId = pageOption.dataset.pageId;
    const postTitle = pageOption.dataset.pageTitle;
    const postSlug = pageOption.dataset.pageSlug;
    const postImage = pageOption.dataset.pageImage;

    // Update hidden field
    document.getElementById('selected-post-id').value = postId;

    // Update display
    const display = document.getElementById('selected-page-display');
    display.innerHTML = `
      <div class="p-3 bg-stone-50 rounded flex items-center gap-3">
        ${postImage ?
          `<img src="${postImage}" alt="${postTitle}" class="w-10 h-10 rounded-full object-cover" />` :
          `<div class="w-10 h-10 rounded-full bg-stone-200"></div>`
        }
        <div class="flex-1">
          <div class="font-medium">${postTitle}</div>
          <div class="text-xs text-stone-500">${postSlug}</div>
        </div>
      </div>
    `;
    display.classList.remove('hidden');

    // Clear search results
    document.getElementById('page-search-results').innerHTML = '';
  }
});
</script>
