{{--MODAL -- YENI SAYFA--}}
<div class="relative z-10" x-data="{ open: false }" aria-labelledby="modal-title" role="dialog" aria-modal="true">

    <button @click="open = true" type="submit"
            class="btn btn-sm btn-stone">
        Sayfa Ekle
    </button>

    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" x-show="open"></div>

    <div class="fixed inset-0 z-10 w-screen overflow-y-auto" x-show="open">
        <div class="flex min-h-full items-end justify-center text-center sm:items-center">
            <form action="{{ route('pages.store') }}"
                class="relative transform overflow-hidden rounded-lg bg-gray-100 p-4 text-left shadow-xl transition-all sm:w-full sm:max-w-lg"
                x-show="open"
                @click.away="open = false"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                <!-- Modal content -->

                <div class="border-b">

                    <div class="flex justify-between border-b border-stone-200 pb-4">
                        <div class="flex items-center">
                            <span class="material-symbols-outlined mr-1">
                                add
                            </span>
                            <h2 class="text-lg font-jbmono-bold tracking-tighter text-stone-700">
                                Yeni Sayfa Ekle
                            </h2>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-x-4 py-4">
                        <div class="sm:col-span-2 sm:col-start-1">
                            <label for="page_name"
                                   class="block text-sm font-medium leading-6 text-gray-900">
                                Sayfa Adı
                            </label>
                            <div class="mt-2">
                                <input type="text" name="page_name" id="page_name"
                                       autocomplete="address-level2"
                                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                            </div>
                        </div>
                        <div class="sm:col-span-2">
                            <label for="page_type"
                                   class="block text-sm font-medium leading-6 text-gray-900">
                                Sayfa Tipi
                            </label>
                            <select id="page_type" name="page_type"
                                    class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-stone-600 sm:text-sm sm:leading-6">
                                <option selected value="standard_page">İçerik sayfası</option>
                                <option disabled value="blog_page">Blog</option>
                                <option disabled value="contact_page">İletişim</option>
                            </select>
                        </div>
                    </div>

                </div>

                <div class="mt-4 flex justify-between sm:gap-3">
                    <button @click="open = false" type="button"
                            class="btn-full btn-rose">
                        Vazgeç
                    </button>
                    <button type="submit"
                            class="btn-full btn-stone">
                        Oluştur
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>