@if(!isset($idBioLink))
    <div class="flex flex-col gap-4 p-2 text-black">
        <div class="flex flex-row justify-between items-center p-3">
            <div class="flex flex-row items-center gap-4">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
                    />
                </svg>
                <h3 class="font-medium text-xl">{{__('Manage your bio links')}}</h3>
            </div>
            <div class="flex items-center gap-4 text-white">
                <a
                    href="{{route('wave.dashboard', 'current-plan')}}"
                    class="min-h-[3rem] px-4 font-semibold uppercase flex flex-row items-center justify-center bg-wave-500 rounded-lg gap-2 hover:opacity-75 duration-300"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="w-6 h-6"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
                        />
                    </svg>
                    {{__("Upgrade")}}
                </a>
                <form action="{{route('wave.dashboard.create-bio-link')}}" method="POST">
                    @csrf
                    <x-honeypot/>
                    <button
                        {{$permissions["can_create_bio_links"] ? '' : 'disabled'}}
                        class="min-h-[3rem] px-4 font-semibold uppercase flex flex-row items-center justify-center bg-wave-700 rounded-lg gap-2 focus:outline-0 hover:opacity-75 duration-300"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="w-6 h-6"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M12 4.5v15m7.5-7.5h-15"
                            />
                        </svg>
                        {{__("New Bio Link")}} {{$permissions["can_create_bio_links"] ? '' : __('(Premium Feature)') }}
                    </button>
                </form>
            </div>
        </div>
        <hr/>
        <div class="px-3">
            <livewire:bio-links-table/>
        </div>
    </div>
@else
    <x-builder :bio-link-data="$bioLinkDetails"/>
@endif