@extends(get_view('index'))
@section('title')
    {{ __('Galeri') }} -
@endsection
@section('menu-active-gallery')
    active
@endsection
@section('header')
@endsection
@section('content')
    @include(get_view('components.pages.page-title'), [
        'title' => __('Galeri'),
        'background_image' => get_asset('images/bg-galeri.jpeg'),
    ])

    <div class="container">
        <div class="row py-5">

            <div class="mb-4">
                <a class="btn me-2 mb-2 rounded-pill {{ request()->has('category') ? '' : ' bg-danger text-white' }}"
                    href="{{ route('gallery') }}">{{ __('Hepsi') }}</a>
                @foreach (get_gallery_categories() as $item)
                    <a class="btn me-2 mb-2 rounded-pill {{ request()->has('category') && request()->category == $item->id ? ' bg-danger text-white' : '' }}"
                        href="{{ route('gallery', ['category' => $item->id]) }}">{{ $item->content->title ?? '#' }}</a>
                @endforeach
            </div>

            @foreach ($gallery as $item)
                <div class="col-lg-3 col-sm-4 col-6 pb-3">
                    @php
                        $isImage = checkImage($item->image);
                        $href = $isImage
                            ? Common::get_gallery_image($item->id, $item->image, 'medium')
                            : get_gallery_original_media($item->id, $item->thumbnail ? $item->thumbnail->name : '');
                        $dataHref = get_gallery_original_media($item->id, $item->image);
                    @endphp
                    <a class="text-center text-decoration-none text-dark d-flex justify-content-between align-items-center flex-column h-100"
                        data-toggle="lightbox" data-gallery="gallery"
                        @if ($isImage) href="{{ $dataHref }}" @else data-type="html" data-src="<video controls><source src='{{ $dataHref }}' type='video/mp4'></video>" @endif>
                        @if ($isImage)
                            <img src="{{ $href }}" alt="{{ get_site_title() }}" style="max-width: 100%;">
                        @else
                            <div
                                class="d-flex h-100 w-100 justify-content-center align-items-center bg-dark position-relative">
                                <div>
                                    <div
                                        class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center top-0">
                                        <i class="fa fa-play fs-1 text-white"></i>
                                    </div>
                                    <video src="{{ $dataHref }}" width="100%"></video>
                                </div>
                            </div>
                        @endif
                        <span class="d-block mt-2">{{ $item->content->title ?? '' }}</span>
                    </a>
                </div>
            @endforeach

            {{ $gallery->links() }}

        </div>
    </div>
@endsection
@section('footer')
@endsection