@extends('layouts.public')

@section('title', 'Find a Couple’s Wine Registry')

@section('content')
    <div class="container">
        <search route="{{ route('search') }}" inline-template v-cloak>
            <div class="search-container fixed-header-spaced">
                <section>
                    <h1 class="text-center">Find a Couple’s Wine Registry</h1>
                </section>

                <ajax-datatable id="search" ref="search"
                                route="{{ route('search') }}"
                                :initial-repeater-class="{'d-flex flex-column search-result': true}"
                                initial-pager-layout="prev, next"
                                initial-display="repeater"
                                :initial-load-on-mount="false"
                                :initial-auto-hide-pager="true"
                >
                    <template v-slot:search>
                        <div class="search-field d-flex flex-grow-1 justify-content-center">
                            <div class="form-group has-search w-75" v-if="ref('search')">
                                <span class="d-none d-sm-block fa fa-search form-control-feedback"></span>
                                <input type="text" class="form-control search"
                                       v-model="$refs.search.request.search"
                                       placeholder="Search by first and last name"
                                >
                            </div>
                            <div class="d-flex d-sm-none">
                                <button class="btn btn-search"><span class="fa fa-search"></span></button>
                            </div>
                        </div>
                    </template>

                    <template v-slot:repeater-row="slotProps">
{{--                        <pre>@{{ slotProps.row  }}</pre>--}}
                        <div class="d-flex result-row">
                            <div class="d-flex p-3 text-left">
                                <img :src="slotProps.row.image" @click.prevent="go(slotProps.row.url)" />
                            </div>
                            <div class="flex-grow-1 p-3 text-left" @click.prevent="go(slotProps.row.url)">
                                <div class="couple-name">@{{ slotProps.row.names }}</div>
                                <div class="wed-date">@{{ slotProps.row.date }}</div>
                            </div>
                            <div class="flex-grow-0 p-3 text-right d-none d-sm-flex">
                                <button class="btn btn-getting-started"
                                        @click.prevent="go(slotProps.row.url)"
                                >
                                    <span class="d-flex d-sm-none">GO</span>
                                    <span class="d-none d-sm-flex">Select</span>
                                </button>
                            </div>
                        </div>
                    </template>
                </ajax-datatable>
            </div>
        </search>
    </div>
@endsection