@section('content')
    <article id="home">
        <div class="slider">
            <div class="owl-carousel">
                @foreach($page->post->media()->notFeatured()->get()->sortBy('post.order') as $medium)
                    <div class="item">
                        <img src="{{ asset($medium->post->image) }}" alt="" class="cover">
                    </div>
                @endforeach
            </div>
            <img src="{{ asset('images/ribbon.png') }}" alt="" class="ribbon">
        </div>
        <section class="content bienvenido" id="feria">
            <div class="container">
                @if($block = $page->block('bienvenido'))
                    <h1>
                        <img src="{{ asset($block->image) }}" alt="">
                    </h1>
                    <div class="content-html">
                        {!! $block->post->content !!}
                    </div>
                    <div class="icons">
                        <div class="row row-grid justify-content-around">
                            @foreach($block->post->media()->notFeatured()->get()->sortBy('post.order') as $medium)
                                <div class="col-md-4">
                                    <div class="img-holder">
                                        <img src="{{ asset($medium->post->image) }}" alt="" class="absolute">
                                    </div>
                                    <div class="flex">
                                        <i>{{ $loop->iteration }}</i>
                                        <span>{{ $medium->post->title }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if($stores->count())
                    <div class="tiendas">
                        <hr>
                        <div class="row row-grid">
                            @foreach($stores as $store)
                                <div class="col-md-3 col-6">
                                    <a href="{{ route('store', $store->post->slug) }}">
                                        <div class="img-holder">
                                            <img src="{{ asset($store->post->thumbnail) }}" alt="" class="absolute">
                                        </div>
                                    </a>
                                    <h3>{{ $store->post->title }}</h3>
                                    <div class="btn-container">
                                        <a href="{{ route('store', $store->post->slug) }}" class="btn">Ver tienda</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </section>
        @if($block = $page->block('auspiciantes'))
            <section class="content auspiciantes">
                <div class="container">
                    <h1>{{ $block->post->title }}</h1>
                    <div class="owl-carousel">
                        @foreach($block->post->media()->notFeatured()->get()->sortBy('post.order') as $medium)
                            <div class="item">
                                <div class="img-holder">
                                    <img src="{{ asset($medium->post->image) }}" alt="" class="absolute">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        @if($block = $page->block('ediciones'))
            <section class="content ediciones">
                <div class="container">
                    <h1>{{ $block->post->title }}</h1>
                    <div class="row row-grid">
                        <div class="col-md-4">
                            <div class="content-html">
                                {!! $block->post->content !!}
                            </div>
                        </div>
                        <div class="col-md-8">
                            <img src="{{ asset($block->image) }}" alt="">
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if($block = $page->block('camara'))
            <section class="content acerca camara">
                <div class="container">
                    <h1>{{ $block->post->title }}</h1>
                    <div class="content-html">
                        {!! $block->post->content !!}
                    </div>
                </div>
            </section>
        @endif
        @if($block = $page->block('sociedad'))
            <div class="divider">
                <img src="{{ asset('images/divider.png') }}" alt="">
            </div>
            <section class="content acerca sociedad">
                <div class="container">
                    <h1>{{ $block->post->title }}</h1>
                    <div class="content-html">
                        {!! $block->post->content !!}
                        @if($block->url)
                            <div class="btn-container">
                                <a href="{{ url($block->url) }}" class="btn" target="_blank">{{ $block->post->excerpt ?? 'Ver más' }}</a>
                            </div>
                        @endif
                    </div>
                </div>
            </section>
        @endif
    </article>
@endsection

@section('scripts')
    <script>
      $(function() {
        $('.slider .owl-carousel').owlCarousel({
          items: 1,
          dots: true,
          nav: false,
          mouseDrag: true,
          touchDrag: true,
          loop: true,
          autoplay: true,
          autoHeight: true,
          animateOut: 'fadeOut',
          thumbs: false,
          autoplayHoverPause: true,
        });

        $('.auspiciantes .owl-carousel').owlCarousel({
          dots: false,
          nav: true,
          navText: ['<i class="fa fa-caret-left"></i>', '<i class="fa fa-caret-right"></i>'],
          mouseDrag: true,
          touchDrag: true,
          loop: true,
          autoplay: true,
          thumbs: false,
          autoplayHoverPause: true,
          responsive: {
            0: {
              margin: 15,
              items: 2
            },
            768: {
              margin: 30,
              items: 3
            },
            992: {
              margin: 60,
              items: 4
            },
          }
        });
      });
    </script>
@endsection