<div>
    @php $ws = current_workspace(); @endphp
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold text-t1">Custom Domains</h1>
        @if($ws)
        <button
            @click="$dispatch('openModal', {component: 'modals.add-domain', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
            class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
            + Add Domain
        </button>
        @endif
    </div>

    <div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-white/[.06]">
            <p class="text-sm text-t2">Use your own domain for short links (e.g. <span class="font-mono text-t1">go.yourbrand.com</span>)</p>
        </div>
        <div class="p-12 text-center">
            <div class="w-16 h-16 bg-s2 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253M3 12a8.954 8.954 0 01.527-3"/>
                </svg>
            </div>
            <h3 class="text-lg font-medium text-t1 mb-2">No custom domains</h3>
            <p class="text-sm text-t2 mb-6">Add a custom domain to brand your short links.</p>
            @if($ws)
            <button
                @click="$dispatch('openModal', {component: 'modals.add-domain', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
                class="px-4 py-2.5 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
                Add your first domain
            </button>
            @endif
        </div>
    </div>
</div>
