{% extends 'base/base.html' %}
{% load static %}

{% block title %}Add Park - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">Add Park</h1>

            <form method="post" class="space-y-6">
                {% csrf_token %}
                
                {% for field in form %}
                <div>
                    <label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        {{ field.label }}
                    </label>
                    {% if field.field.widget.input_type == 'text' or field.field.widget.input_type == 'date' %}
                        <input type="{{ field.field.widget.input_type }}" 
                               name="{{ field.name }}" 
                               id="{{ field.id_for_label }}"
                               value="{{ field.value|default:'' }}"
                               class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                               {% if field.field.required %}required{% endif %}>
                    {% elif field.field.widget.input_type == 'select' %}
                        <select name="{{ field.name }}"
                                id="{{ field.id_for_label }}"
                                class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                {% if field.field.required %}required{% endif %}>
                            {% for value, label in field.field.choices %}
                                <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    {% elif field.field.widget.input_type == 'textarea' %}
                        <textarea name="{{ field.name }}"
                                  id="{{ field.id_for_label }}"
                                  class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                  rows="4"
                                  {% if field.field.required %}required{% endif %}>{{ field.value|default:'' }}</textarea>
                    {% endif %}
                    {% 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>
                {% endfor %}

                {% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
                <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 Addition
                        </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 adding 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="{% url 'parks:park_list' %}" 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">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}