{% extends 'base/base.html' %} {% load static %} {% block title %}{% if is_edit %}Edit {{ object.name }}{% else %}Add Park{% endif %} - ThrillWiki{% endblock %}
{% block content %}
<div class="container px-4 mx-auto">
  <div class="max-w-3xl mx-auto">
    <!-- Park Form -->
    <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
      <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
        {% if is_edit %}Edit {{ object.name }}{% else %}Add Park{% endif %}
      </h1>

      {% if form.errors %}
      <div class="p-4 mb-6 text-red-700 bg-red-100 border border-red-400 rounded-lg dark:bg-red-900 dark:text-red-100 dark:border-red-700">
        <p class="font-medium">Please correct the following errors:</p>
        <ul class="ml-4 list-disc">
          {% for field in form %} {% for error in field.errors %}
          <li>{{ field.label }}: {{ error }}</li>
          {% endfor %} {% endfor %} {% for error in form.non_field_errors %}
          <li>{{ error }}</li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}

      <form method="post" class="space-y-6" id="park-form">
        {% csrf_token %}

        <!-- Hidden fields -->
        {{ form.country }} {{ form.region }} {{ form.city }}

        <!-- Name field -->
        <div>
          <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
            Name *
          </label>
          <div>{{ form.name }}</div>
          {% if form.name.errors %}
          <div class="mt-1 text-sm text-red-600 dark:text-red-400">
            {{ form.name.errors }}
          </div>
          {% endif %}
        </div>

        <!-- Location fields -->
        <div x-data="locationAutocomplete('country', false)" class="relative">
          <label
            for="{{ form.country_name.id_for_label }}"
            class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            Country *
          </label>
          <input
            type="text"
            id="id_country_name"
            name="country_name"
            x-model="query"
            @input.debounce.300ms="fetchSuggestions()"
            @focus="fetchSuggestions()"
            @click.away="suggestions = []"
            class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            placeholder="Select country..."
            value="{{ form.country_name.value|default:'' }}"
            autocomplete="off"
          />
          <!-- Suggestions Dropdown -->
          <ul
            x-show="suggestions.length > 0"
            x-cloak
            class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60"
          >
            <template x-for="suggestion in suggestions" :key="suggestion.id">
              <li
                @click="selectSuggestion(suggestion)"
                x-text="suggestion.name"
                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
              ></li>
            </template>
          </ul>
        </div>

        <div x-data="locationAutocomplete('region', false)" class="relative">
          <label
            for="{{ form.region_name.id_for_label }}"
            class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            Region/State
          </label>
          <input
            type="text"
            id="id_region_name"
            name="region_name"
            x-model="query"
            @input.debounce.300ms="fetchSuggestions()"
            @focus="fetchSuggestions()"
            @click.away="suggestions = []"
            class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            placeholder="Select region/state..."
            value="{{ form.region_name.value|default:'' }}"
            autocomplete="off"
          />
          <!-- Suggestions Dropdown -->
          <ul
            x-show="suggestions.length > 0"
            x-cloak
            class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60"
          >
            <template x-for="suggestion in suggestions" :key="suggestion.id">
              <li
                @click="selectSuggestion(suggestion)"
                x-text="suggestion.name"
                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
              ></li>
            </template>
          </ul>
        </div>

        <div x-data="locationAutocomplete('city', false)" class="relative">
          <label
            for="{{ form.city_name.id_for_label }}"
            class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            City
          </label>
          <input
            type="text"
            id="id_city_name"
            name="city_name"
            x-model="query"
            @input.debounce.300ms="fetchSuggestions()"
            @focus="fetchSuggestions()"
            @click.away="suggestions = []"
            class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            placeholder="Select city..."
            value="{{ form.city_name.value|default:'' }}"
            autocomplete="off"
          />
          <!-- Suggestions Dropdown -->
          <ul
            x-show="suggestions.length > 0"
            x-cloak
            class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60"
          >
            <template x-for="suggestion in suggestions" :key="suggestion.id">
              <li
                @click="selectSuggestion(suggestion)"
                x-text="suggestion.name"
                class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
              ></li>
            </template>
          </ul>
        </div>

        <!-- Other fields -->
        {% for field in form %} {% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
        <div>
          <label
            for="{{ field.id_for_label }}"
            class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            {{ field.label }}{% if field.field.required %} *{% endif %}
          </label>
          <div>{{ field }}</div>
          {% if field.help_text %}
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {{ field.help_text }}
          </p>
          {% endif %} {% if field.errors %}
          <div class="mt-1 text-sm text-red-600 dark:text-red-400">
            {{ field.errors }}
          </div>
          {% endif %}
        </div>
        {% endif %} {% endfor %} {% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
        <div
          class="p-4 mb-4 text-blue-700 bg-blue-100 border border-blue-400 rounded-lg dark:bg-blue-900 dark:text-blue-100 dark:border-blue-700"
        >
          <p>
            Your submission will be reviewed by a moderator before being
            published.
          </p>
        </div>
        <div class="space-y-4">
          <div>
            <label
              for="reason"
              class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              Reason for {% if is_edit %}Edit{% else %}Addition{% endif %} *
            </label>
            <textarea
              name="reason"
              id="reason"
              class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
              rows="3"
              required
              placeholder="Please explain why you're {% if is_edit %}editing{% else %}adding{% endif %} this park and provide any relevant details."
            ></textarea>
          </div>
          <div>
            <label
              for="source"
              class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              Source (Optional)
            </label>
            <input
              type="text"
              name="source"
              id="source"
              class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
              placeholder="Link to official website, news article, or other source"
            />
          </div>
        </div>
        {% endif %}

        <div class="flex justify-end space-x-4">
          <a
            href="{% if is_edit %}{% url 'parks:park_detail' slug=object.slug %}{% else %}{% url 'parks:park_list' %}{% endif %}"
            class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
          >
            Cancel
          </a>
          <button
            type="submit"
            class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
          >
            {% if is_edit %}Save Changes{% else %}Submit{% endif %}
          </button>
        </div>
      </form>
    </div>

    <!-- Photos Section (only shown on edit) -->
    {% if is_edit %}
    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800" id="photos">
      {% include "media/partials/photo_manager.html" with photos=object.photos.all content_type="parks.park" object_id=object.id %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}