@extends('front.layouts.master')

@section('content')
    <!-- MAIN BANNER -->
    <section class="cd-hero">
        <ul class="cd-hero-slider autoplay">
            @foreach($slider->images as $image)
                <li style="background-image: url('{{ url($image->getUrl()) }}')">
                    <div class="cd-full-width">
                        <div class="container">
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>

        <div class="cd-slider-nav">
            <nav class="container">
                <span class="cd-marker item-1"></span>

                <ul class="cd-hero-slider-buttons">
                    @foreach($slider->images as $image)
                        <li>
                            <a href="#0">
                                <div class="slide-number">

                                </div>{{ $image->title }}<span>{{ str_limit($image->summary, 50) }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </nav>
        </div>

    </section>

    <section class="text-center">
        <div class="container">
            <div class="two-items-carousel owl-carousel">
                @foreach($articles as $article)
                    <div class="image-and-text-box animate fadeInLeft">
                        <div class="bordered-thumb"><a href="{{ $article->url }}"><img src="{{ $article->getMainImageUrl() }}" alt=""></a></div>
                        <h4><a href="{{ $article->url }}">{{ $article->title }}</a></h4>
                        <p>
                            <h7>{{ $article->spot }}</h7>
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(function() {
            $('.cd-hero-slider > li').first().addClass('selected')
            $('.cd-hero-slider-buttons > li').first().addClass('selected')

            $('.cd-hero-slider-buttons > li').on('mouseover', e => {
                $(e.target).trigger('click')
            })
        })
    </script>
@endsection