@php
    use App\Enums\ThemeButtonThumbnailPosition;
    /** @var App\Models\BioTheme $theme */
@endphp
<div x-data="{open: false}">
    <div
        class="link button button-{{ $theme->button_round_style->value }} shadow-{{ $theme->button_shadow_style->value }} @if($animation !== 'none')animate__animated animate__{{$animation}} @endif"
        data-id="{{ $id }}"
        @click="open = !open; document.getElementById('media-{{ $id }}').click()"
    >
        <div class="thumbnail">
            @if($thumbnailUrl && $theme->button_thumbnail_position == ThemeButtonThumbnailPosition::LEFT)
                <img src="{{ $thumbnailUrl }}" alt="{{ $data['title'] }}">
            @endif
        </div>
        <div>
            @if($data['title'])
                {{ $data['title'] }}
            @else
                Missing title
            @endif
        </div>
        <div class="thumbnail">
            @if($thumbnailUrl && $theme->button_thumbnail_position == ThemeButtonThumbnailPosition::RIGHT)
                <img src="{{ $thumbnailUrl }}" alt="{{ $data['title'] }}">
            @endif
        </div>
    </div>
    <div
        x-show="open"
        class="media"
        x-transition:enter="media-enter"
        x-transition:enter-start="media-enter-start"
        x-transition:enter-end="media-enter-end"
        x-transition:leave="media-leave"
        x-transition:leave-start="media-leave-start"
        x-transition:leave-end="media-leave-end"
    >
        @if($embedUrl)
            <iframe
                style="height: 166px"
                id="media-{{ $id }}"
                src="{{ $embedUrl }}"
                title="{{ $data['title'] }}"
                frameborder="0"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                allowfullscreen
                loading="lazy"
            ></iframe>
        @else
            <p
                class="link-missing-url link button-{{ $theme->button_round_style }}"
                style="
                    color: {{ $theme->text_color }};
                    background: {{ $theme->button_bg }};
                    @if($theme->button_border)
                    border-width: {{ $theme->button_border }};
                    @endif
                    @if($theme->button_border_color)
                    border-color: {{ $theme->button_border_color }};
                    @endif
                "
            >
                Missing Music Embed URL
            </p>
        @endif
    </div>
</div>