{% load widget_tweaks %}

<div x-show="showModal"
     x-cloak
     class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div @click.outside="showModal = false"
       class="bg-[#2a2f35] p-6 rounded-lg w-152 max-h-[90vh] overflow-y-auto">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold">
        {% if form.instance.pk %}
          Edit List
        {% else %}
          Create New List
        {% endif %}
      </h2>
      <button @click="showModal = false"
              class="text-gray-400 hover:text-white transition-colors cursor-pointer">
        {% include "app/icons/x.svg" with classes="w-6 h-6" %}
      </button>
    </div>
    <form class="space-y-6" method="post">
      {% csrf_token %}
      <input type="hidden" name="list_id" value="{{ custom_list.id }}">
      {% for field in form %}
        <div>
          <label class="block text text-sm font-medium mb-2 text-gray-300">{{ field.label }}</label>
          {% if field.name != 'collaborators' %}
            {{ field|add_class:"w-full p-2 bg-[#39404b] rounded-md text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-[#4a9eff] appearance-none" }}
          {% else %}
            {{ field }}
          {% endif %}
        </div>
      {% endfor %}

      {% if form.instance.pk %}
        <div class="flex flex-row-reverse justify-between mt-6">
          <button type="submit"
                  formaction="{% url 'list_edit' %}?next={{ request.path }}"
                  class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 cursor-pointer">
            Save
          </button>
          <button type="submit"
                  formaction="{% url 'list_delete' %}?next={{ request.path }}"
                  class="px-4 py-2 rounded-md transition duration-300 {% if request.user == custom_list.owner %}bg-red-700 text-white hover:bg-red-800 cursor-pointer{% else %}bg-gray-600 text-gray-300 cursor-not-allowed{% endif %}"
                  {% if not request.user == custom_list.owner %}disabled{% endif %}>Delete</button>
        </div>
      {% else %}
        <div class="flex justify-end pt-4">
          <button type="submit"
                  formaction="{% url 'list_create' %}?next={{ request.path }}"
                  class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors cursor-pointer">
            Create List
          </button>
        </div>
      {% endif %}
    </form>
  </div>
</div>