{% load network_tags %}

{% for field in form %}
<div class="mb-5">
    <label for="{{ field.id_for_label }}" class="block mb-2 text-sm font-medium text-gray-900">
        {{ field.label }}
        {% if field.field.required %}
        <span class="text-red-500">*</span>
        {% endif %}
    </label>
    <div>
        {{ 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.errors %}
        <p class="mt-2 text-sm text-red-600">{{ field.errors|join:", " }}</p>
        {% endif %}
    </div>
</div>
{% endfor %}

<div>
    <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
        {{ action }}
    </button>
</div>

<!-- Firewall Rules Section -->
{% if object %}
<div class="mt-8 border-t border-gray-200 pt-8" x-data="{ open: false }" @close-modal.window="open = false">
    <h3 class="text-base font-semibold leading-6 text-gray-900">Firewall Rules</h3>
    <div class="mt-6">
        <button type="button" 
                @click="open = true"
                hx-get="{% url 'networks:rule-form-modal' %}?group={{ object.pk }}"
                hx-target="#modal-content"
                hx-trigger="click"
                hx-swap="innerHTML"
                class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            <svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add Rule
        </button>
    </div>
    <div class="mt-4 rules-list">
        {% include "networks/group/_rules_list.html" with rules=rules %}
    </div>

    <!-- Modal Container -->
    <div x-show="open" 
         x-cloak
         class="relative z-10" 
         role="dialog" 
         aria-modal="true">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
                     @click.away="open = false">
                     <div id="modal-content">
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Config Overrides Section -->
<div class="mt-8 border-t border-gray-200 pt-8" x-data="{ open: false }" @close-modal.window="open = false">
    <h3 class="text-base font-semibold leading-6 text-gray-900">Config Overrides</h3>
    <div class="mt-6">
        <button type="button" 
                @click="open = true"
                hx-get="{% url 'networks:group-config-modal' %}?group={{ object.pk }}"
                hx-target="#config-modal-content"
                hx-trigger="click"
                hx-swap="innerHTML"
                class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            <svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add Config Override
        </button>
    </div>
    <div class="mt-4 configs-list">
        {% include "networks/group/_configs_list.html" with configs=object.config_overrides.all %}
    </div>

    <!-- Config Modal Container -->
    <div x-show="open" 
         x-cloak
         class="relative z-10" 
         role="dialog" 
         aria-modal="true">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
                     @click.away="open = false">
                     <div id="config-modal-content">
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="mt-8 border-t border-gray-200 pt-8">
    <div class="rounded-md bg-blue-50 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">Firewall Rules & Config Overrides</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <p>You can add firewall rules and config overrides after creating the group.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}