@extends('layouts.app')

@section('content')

    <section class="hero_section">
        <div class="hero_image">
        </div>
        <div class="row expanded scroll_to">
            <div class="small-12">
                <p class="fi-chevron-bottom" v-scroll-to="{el: '#news',duration: 1200,easing: 'ease-out'}"></p>
            </div>
        </div>
    </section>

    <section class="news_section" id="news">
        <div class="row">
            <div class="small-12 columns text-center">
                <h1 v-in-viewport.once class="section_headline">Neues bei Müller Girls</h1>
            </div>
        </div>
        <div class="row align-center">
            <div class="small-10 columns text-center">
                <h4 v-in-viewport.once class="slideUpFadeIn">
                    @foreach( $sliders as $slider)
                        {{$slider->header}}
                    @endforeach
                </h4>
            </div>
        </div>
    </section>
    <section class="girls_section">
        <div class="row">
            <div class="small-12 columns text-center">
                <h1 class="section_headline" v-in-viewport.once>Aktuell bei Müller Girls</h1>
            </div>
        </div>
        <div class="row">
            @foreach($schedule as $s)
                <div class="small-12 medium-6 large-4 columns girl_column slideUpFadeIn" v-in-viewport.once>
                    <div class="card girl_card">
                        <div class="card-divider">
                        <b><span>von {{$s->checkin_time->format('d.m.Y')}}</span><span> bis {{$s->checkout_time->format('d.m.Y')}}</span></b>
                        </div>
                        <img src="thumbs/{{$s->girl->album->id}}/cover_{{$s->girl->album->cover}}_thumb.jpg">
                        <div class="card-section">
                            <h3>{{$s->girl->public_name}}</h3>
                            <h4>{{$s->girl->girldetail->country->country_name}}</h4>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>



@endsection