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

{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Company - 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">{% if is_edit %}Edit{% else %}Add{% endif %} Company</h1>

            <form method="post" class="space-y-6">
                {% csrf_token %}
                
                <!-- 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>

                <!-- Headquarters field -->
                <div x-data="locationAutocomplete('country', false)" class="relative">
                    <label for="{{ form.headquarters.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Headquarters
                    </label>
                    <input type="text" 
                           id="{{ form.headquarters.id_for_label }}"
                           name="headquarters"
                           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="e.g., Orlando, Florida, United States"
                           value="{{ form.headquarters.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">
                            <li @click="selectSuggestion(suggestion)"
                                x-text="suggestion"
                                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>

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

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

                {% 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 {% 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 company 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 'companies:company_detail' slug=object.slug %}{% else %}{% url 'companies:company_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>
    </div>
</div>
{% endblock %}