{% load network_tags %}

{% block content %}
<div class="max-w-2xl mx-auto py-8">
    <div class="bg-white shadow sm:rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
                {% if object %}Edit{% else %}Add{% endif %} Config Override
            </h3>
            <div class="mt-2 max-w-xl text-sm text-gray-500">
                <p>Configure a property override for this group. The override will be applied to all hosts in this group.</p>
            </div>
            <form hx-post="{% if object %}{% url 'networks:group-config-edit' pk=object.pk %}{% else %}{% url 'networks:group-add-config' %}{% endif %}"
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-target=".configs-list"
            hx-swap="innerHTML"
            @htmx:before-request="$el.querySelector('[type=submit]').disabled = true"
            @htmx:after-request="$el.reset(); $dispatch('close-modal')"
            class="p-4">
                {% if form.non_field_errors %}
                <div class="mb-4 p-4 bg-red-50 border rounded-md border-red-100">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Please correct the following errors:</h3>
                            <div class="mt-2 text-sm text-red-700">
                                {{ form.non_field_errors }}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <input type="hidden" name="group" value="{{ group.pk }}">

                <div class="grid grid-cols-1 gap-4">
                    {% for field in form %}
                    <div>
                        <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
                            {{ field.label }}
                            {% if field.field.required %}*{% endif %}
                        </label>
                        {{ field|add_class:"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" }}
                        {% if field.help_text %}
                        <p class="mt-1 text-xs text-gray-500">{{ field.help_text }}</p>
                        {% endif %}
                        {% if field.errors %}
                        <p class="text-red-600 text-sm">{{ field.errors|join:", " }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>

                <div class="mt-5 sm:mt-4 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                    <button type="submit"
                            class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:col-start-2">
                        {% if object %}Update{% else %}Create{% endif %} Config Override
                    </button>
                    <button type="button"
                            @click="open = false"
                            class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}