@extends('app.admin.layout.layout')

@section('title', __('All Galleries'))

@section('content')
<style>
    @media (max-width: 425px) {
        .btn-group-custom {
            flex-direction: column !important;
            width: 100%;
        }
        .btn-group-custom a {
            width: 100%;
        }
    }

    .gallery-card {
        transition: all 0.3s ease-in-out;
        border-radius: 10px;
        overflow: hidden;
    }

    .gallery-card:hover {
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }
</style>

<main class="container">
    <div class="page-title-container">
        <div class="row">
            <div class="col-md-7">
                <h1 class="mb-0 pb-0 display-4">@lang('All Galleries')</h1>
                <nav class="breadcrumb-container d-inline-block" aria-label="breadcrumb">
                    <ul class="breadcrumb pt-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin:home') }}">@lang('Home')</a></li>
                        <li class="breadcrumb-item active">@lang('All Galleries')</li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-5 d-flex align-items-start justify-content-end btn-group-custom">
                <a href="{{ route('admin:galleries.index') }}" class="mb-1">
                    <button type="button" class="btn btn-outline-primary w-100 w-md-auto">
                        <i data-acorn-icon="leaf" class="me-2" data-acorn-size="17"></i>
                        @lang('All Galleries')
                    </button>
                </a>
                <a href="{{ route('admin:galleries.create') }}" class="mb-1">
                    <button type="button" class="btn btn-primary w-100 w-md-auto">
                        <i data-acorn-icon="plus" class="me-2" data-acorn-size="17"></i>
                        @lang('Create new Gallery')
                    </button>
                </a>
            </div>
        </div>
    </div>

    <h2 class="small-title">@lang('All Galleries')</h2>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 mb-5">
        @foreach ($galleries as $gallery)
            <div class="col">
                <div class="card gallery-card h-100">
                    <img src="{{ $gallery->image() }}" class="card-img-top sh-22" alt="Gallery Image" />
                    <div class="card-footer border-0 text-center p-3">
                        <a href="{{ route('admin:galleries.edit', $gallery->id) }}" class="btn btn-outline-primary btn-sm me-2">
                            <i data-acorn-icon="pen" data-acorn-size="15"></i>
                        </a>
                        <a href="{{ route('admin:galleries.destroy', $gallery->id) }}" class="btn btn-outline-danger btn-sm">
                            <i data-acorn-icon="bin" data-acorn-size="15"></i>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</main>
@endsection
