@push('footer')
<script>
    var dialogSpeaker = document.getElementById('dialog-speaker');
    Livewire.on('open-speaker-dialog', function() {
        dialogSpeaker.showModal();
    });
    Livewire.on('close-speaker-dialog', function() {
        dialogSpeaker.close();
    });
</script>
@endpush
<dialog id="dialog-speaker" @if ($open) open @endif class="w-full lg:w-1/3 shadow rounded-sm relative">
    @if ($speaker)
        <div class="flex items-center justify-between shadow">
            <div class="p-4">
                {{$speaker->name}}
            </div>
            <div class="p-4">
                <button wire:click.prevent="$emit('close-speaker-dialog')">
                    <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="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="p-4 full-content">
            {!! Str::markdown($speaker->bio) !!}
        </div>
    @endif
</dialog>