@extends('layouts.main')

@section('title', 'Белорусский семейный альбом')

@section('content')

    <section class="default-section special-projects family-album">
        <h2>Белорусский семейный альбом</h2>

        <div class="section__title">

            <span></span>
            <span></span>
            <span></span>
            <span></span>

            <h3>Проект, в котором история страны, история семьи и история отдельного человека оживают благодаря фотографиям из
                семейных альбомов.</h3>
        </div>
        <div class="container row">
            <form id="finder" method="get">
                <div class="form__container">
                    <div class="form-row">
                        <div class="input__wrapper">
                            <input id="name" name="name" type="text" value="{{ $name }}" placeholder="Фамилия Имя Отчество">
                        </div>
                        <div class="input__wrapper">
                            <input name="region" value="{{ $region }}" type="text" placeholder="Регион">
                        </div>
                    </div>
                    <div class="form-row">
                        <button id="find" type="submit" class="btn outline">Найти</button>
                        <p>*Здесь вы можете найти фотографии из семейных альбомов и частных домашних архивов.</p>
                    </div>
                </div>
            </form>
            <div class="slider desktop-slider" data-slides="12" data-mobile-slides="1">
                @if(count($photos))
                    <div class="slider__container desktop-slider__container">
                    @foreach($photos as $photo)
                        <div popovertarget="{{ $photo->id }}" class="slide">
                            <img src="{{ Storage::url($photo->image) }}" class="rect" alt="{{ $photo->description }}" />

                            <div class="popover" id="{{ $photo->id }}" style="text-align: center;">
                                <img alt="familyalbum slide" src="{{ Storage::url($photo->image) }}" />
                                <div class="description" style="text-align: left;">{{ $photo->description }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{  $photos->links('vendor.pagination.default') }}

                @else
                <div style="text-align: center;">Фотографий не найдено.</div>
                @endif
            </div>
            <div class="flex-column rules" style="text-align: justify;">
                <h4>Правила:</h4>
                <p>Принимаются фотографии, сделанные в Беларуси или связанные с Беларусью.</p>
                <p>Публикуются фотографии, сделанные до 1960 года.</p>
                <p>Отправляя фотографию, отправитель гарантирует, что она не нарушает авторские права или права собственности
                    других лиц в отношении фотографии.</p>
                <p>Чтобы разместить фотографию, необходимо: написать информацию о людях, изображенных на фотографии, примерное
                    время и место, где было сделано фото, и, по возможности, интересные факты из жизни человека.</p>
                <p>Отправляя фотографию, отправитель дает согласие на то, что фотография будет размещена на странице
                    @bel.family.album, а также может быть использована в выставочной и краеведческой деятельности команды
                    проекта.</p>
            </div>
            </div>
        <div class="overlay"></div>

    </section>

@endsection