<?php if (isset($component)) { $__componentOriginald956570c5321d7185b887a45463f814f = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginald956570c5321d7185b887a45463f814f = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.site-layout','data' => ['title' => 'Gallery — MITH Studios']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('site-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'Gallery — MITH Studios']); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

    
    <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"
         x-data="{
             shot: null,
             opener: null,
             open(el, url, title) {
                 this.opener = el
                 this.shot = { url, title }
                 this.$nextTick(() => this.$refs.closeButton?.focus())
             },
             close() {
                 this.shot = null
                 this.opener?.focus()
                 this.opener = null
             },
             trap(event) {
                 if (! this.shot) return
                 const focusables = this.$refs.dialog?.querySelectorAll('button, [href]')
                 if (! focusables?.length) return
                 const first = focusables[0]
                 const last = focusables[focusables.length - 1]
                 if (event.shiftKey && document.activeElement === first) {
                     event.preventDefault(); last.focus()
                 } else if (! event.shiftKey && document.activeElement === last) {
                     event.preventDefault(); first.focus()
                 }
             },
         }">
        <p class="font-mono text-xs uppercase tracking-[0.25em] text-amber-500">Inside MITH Studios</p>
        <h1 class="mt-4 text-5xl uppercase text-stone-50 sm:text-6xl">Gallery</h1>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($images->isEmpty()): ?>
            <p class="mt-10 max-w-xl rounded-lg border border-ink-700 bg-ink-900 p-6 text-stone-400">
                The gallery is being curated — photos coming soon. In the meantime,
                <a href="<?php echo e(route('book')); ?>" class="text-amber-400 hover:underline">book a session</a>
                and see the rooms in person.
            </p>
        <?php else: ?>
            <div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                    <button type="button"
                            class="group overflow-hidden rounded-lg border border-ink-700 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
                            x-on:click="open($el, <?php echo \Illuminate\Support\Js::from($image->url())->toHtml() ?>, <?php echo \Illuminate\Support\Js::from($image->title)->toHtml() ?>)">
                        
                        <img src="<?php echo e($image->url()); ?>" alt="" loading="lazy"
                             class="aspect-[4/3] w-full object-cover transition duration-300 group-hover:scale-105">
                        <span class="block border-t border-ink-800 bg-ink-900 px-4 py-2.5 font-mono text-[10px] uppercase tracking-widest text-stone-300">
                            <?php echo e($image->title); ?>

                        </span>
                    </button>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <div x-show="shot" x-cloak
             class="fixed inset-0 z-50 grid place-items-center bg-black/90 p-4 sm:p-10"
             x-on:click.self="close()"
             x-on:keydown.escape.window="close()"
             x-on:keydown.tab="trap($event)"
             x-ref="dialog"
             role="dialog" aria-modal="true" aria-label="Photo viewer">
            
            <template x-if="shot">
                <figure class="max-w-5xl">
                    <img x-bind:src="shot.url" x-bind:alt="shot.title" class="max-h-[80vh] w-auto rounded-lg">
                    <figcaption class="mt-3 flex items-center justify-between gap-4">
                        <span class="font-mono text-xs uppercase tracking-widest text-stone-300" x-text="shot.title"></span>
                        <button type="button" x-ref="closeButton" x-on:click="close()"
                                class="rounded-md border border-ink-600 px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-stone-300 hover:border-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-500">
                            Close
                        </button>
                    </figcaption>
                </figure>
            </template>
        </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginald956570c5321d7185b887a45463f814f)): ?>
<?php $attributes = $__attributesOriginald956570c5321d7185b887a45463f814f; ?>
<?php unset($__attributesOriginald956570c5321d7185b887a45463f814f); ?>
<?php endif; ?>
<?php if (isset($__componentOriginald956570c5321d7185b887a45463f814f)): ?>
<?php $component = $__componentOriginald956570c5321d7185b887a45463f814f; ?>
<?php unset($__componentOriginald956570c5321d7185b887a45463f814f); ?>
<?php endif; ?>
<?php /**PATH C:\xampp\htdocs\projects\bilal\mith\mithstudios\resources\views/gallery/index.blade.php ENDPATH**/ ?>