<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Pagina de Gracias') }}
        </h2>
    </x-slot>
    <div class="bg-white shadow rounded-lg p-6">
        @forelse ($parties as $party)
            <div class="">
                <a href="{{route('party.edit', $party)}}"
                    class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150">
                    Editar pagina
                </a>
            </div>


            <section class="bg-white">
                <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
                    <div class="mx-auto max-w-screen-sm text-center lg:mb-16 mb-8">
                        <h2
                            class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold text-gray-900">
                            {{ $party->title }}
                        </h2>
                        <p class="font-normal text-gray-500 sm:text-xl">
                            {!! $party->content !!}
                        </p>
                    </div>
                    <div class="grid gap-8 lg:grid-cols-2">


                    </div>
                </div>
                @if ($party->path == 'Seleccionar archivo')
               
            @else
                @switch(substr($party->path, -3))
                    @case('jpg')
                    <div class="grid grid-cols-1 md:grid-cols-3">
                        <div class="md:col-start-2">
                            <img class="h-auto max-w-full rounded-lg" src="{{ Storage::url($party->path) }}"
                                alt="Gallery image" />
                        </div>
                    </div>
                        @break
                    @case('png')
                    <div class="grid grid-cols-1 md:grid-cols-3">
                        <div class="md:col-start-2">
                            <img class="h-auto max-w-full rounded-lg" src="{{ Storage::url($party->path) }}"
                                alt="Gallery image" />
                        </div>
                    </div>
                        @break
                    @case('mp3')
                    <audio controls class="w-full mx-auto md:w-1/2">
                        <source src="{{ Storage::url($party->path) }}"
                            type="audio/mpeg">
                    </audio>
                        @break
                    @case('mp4')
                    
                    <video class="h-full w-1/2 rounded-lg mx-auto" controls>
                        <source
                            src="{{Storage::url($party->path)}}"
                            type="video/mp4"
                        />
                        Your browser does not support the video tag.
                    </video>
                    
                        @break
                    
                    @default
                        
                @endswitch
                
            @endif
            </section>
        @empty
            <div class="">
                <a href="{{ route('party.create') }}"
                    class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150">
                    Crear pagina
                </a>
            </div>
        @endforelse





    </div>
</x-admin-layout>
