@props(['school'])
<x-card.card class="mx-auto max-w-sm mt-8">
    <x-card.heading>Associated Domains</x-card.heading>
    <x-card.list.body>
        @foreach($school->emailDomains as $domain)
            <x-card.list.row class="!py-1.5 align-middle">
                <form method="POST" action="/admin/schools/domain/{{ $domain->id }}" id="deleteDomain{{$domain->id}}">
                    @csrf
                    @method('DELETE')
                    <button type="submit">
                        <svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"/>
                        </svg>

                    </button><span class="px-3">{{ $domain->domain }}</span>
                </form>
            </x-card.list.row>
        @endforeach
        <x-card.list.row class="!py-1.5">
            <form method="POST" action="/admin/schools/{{ $school->id }}/add_domain" class="grid sm:grid-cols-2 gap-4">
                @csrf
                <x-form.field name="domain" label_text="Add Domain" /><x-form.button class="sm:mt-6">Add Domain</x-form.button>
            </form>
        </x-card.list.row>
    </x-card.list.body>
</x-card.card>