@props(['appLabel' => 'Ladill Hosting'])

<x-modal name="domain-purchase" maxWidth="2xl">
    <div class="flex flex-col" style="height: min(80vh, 720px);">
        <div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-5 py-4">
            <div>
                <h2 class="text-base font-semibold text-slate-900">Register a domain</h2>
                <p class="mt-0.5 text-xs text-slate-500">Search and buy without leaving {{ $appLabel }}.</p>
            </div>
            <button type="button" data-close-modal="domain-purchase"
                    class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <iframe id="ladill-domain-purchase-frame" title="Ladill Domains"
                src="about:blank"
                data-embed-url="{{ ladill_domains_embed_url() }}"
                class="min-h-0 w-full flex-1 border-0 bg-white"></iframe>
    </div>
</x-modal>