@section('content')
    @if($section = $page->getSection('slider'))
        <div class="slider">
            <div class="slick-slider" data-slick='{ "prevArrow": false, "nextArrow": false, "dots": true }'>
                @foreach($section->images->sortBy('post.order') as $medium)
                    <div class="item">
                        <img src="{{ asset($medium->src) }}" alt="" class="img-cover">
                        <div class="container">
                            @if($medium->post->title)
                            <h1 data-aos="fade-in">{{ $medium->post->title }}</h1>
                            @endif
                            @if($medium->post->content)
                            <div class="content-html" data-aos="fade-in">
                                {!! $medium->post->content !!}
                            </div>
                            @endif
                            @if($medium->atts->url)
                                <div class="mt-md-4 mt-3" data-aos="fade-up">
                                    <a href="{{ url($medium->atts->url) }}" class="btn btn-secondary">{{ $medium->atts->url_text ?? 'Leer más >' }}</a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
    @if($section = $page->getSection('somos'))
        <section class="content somos" id="somos" style="background-image: url('{{ asset($section->image->src) }}');">
            <div class="container">
                <h1>{{ $section->post->title }}</h1>
                <div class="content-html">
                    {!! $section->post->content !!}
                </div>
                @if($section->atts->url)
                    <div class="mt-md-4 mt-3" data-aos="fade-up">
                        <a href="{{ url($section->atts->url) }}" class="btn btn-secondary">{{ $section->atts->url_text ?? 'Leer más >' }}</a>
                    </div>
                @endif
            </div>
        </section>
    @endif
    @if($articles->count())
        <section class="content noticias" id="noticias">
            <div class="container">
                <h1 data-aos="fade-in">Noticias</h1>
                <div class="row g-lg-5 g-md-4 g-3 mt-lg-5 mt-md-4 mt-3">
                    @foreach($articles as $article)
                        <div class="col-md-4">
                            <div class="row g-md-4 g-3">
                                <div class="col-md-12 col-4">
                                    <a href="{{ route('article', $article->post->slug) }}">
                                        <div class="ratio ratio-4x3">
                                            <img src="{{ asset($article->image->thumbnail) }}" alt="" class="img-cover">
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-12 col-8">
                                    <h3><a href="{{ route('article', $article->post->slug) }}">{{ $article->post->title }}</a></h3>
                                    <div class="content-html">
                                        {!! nl2br($article->post->excerpt) !!}
                                    </div>
                                    <div class="mt-md-4 mt-3 text-end">
                                        <a href="{{ route('article', $article->post->slug) }}" class="btn btn-outline-secondary">Leer más ></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if($section = $page->getSection('marcas'))
        <section class="content marcas">
            <div class="container">
                <h1 data-aos="fade-in">{{ $section->post->title }}</h1>
                <div class="content-html" data-aos="fade-in">
                    {!! $section->post->content !!}
                </div>
                <div class="row g-lg-5 g-md-4 g-3 mt-lg-5 mt-md-4 mt-3">
                    @foreach($section->images->sortBy('post.order') as $medium)
                        <div class="col-md-3 col-6" data-aos="fade-up">
                            <a href="{{ url($medium->atts->url ?? '#') }}" @if($medium->atts->url) target="_blank" @endif>
                                <div class="ratio ratio-21x9">
                                    <img src="{{ asset($medium->src) }}" alt="" class="img-absolute">
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    <section class="content contacto" id="contacto">
        <div class="container">
            <h1>Contacto</h1>
            {!! Form::open([
                'class' => 'ajax-form',
                'route' => 'form.contact'
            ]) !!}
            <div class="row g-sm-3 g-0 mt-lg-5 mt-md-4 mt-3">
                <div class="col-sm-4">
                    <label class="form-label">Nombre</label>
                </div>
                <div class="col-sm-8">
                    {!! Form::text('name', null, ['class' => 'form-control', 'data-required']) !!}
                </div>
                <div class="col-sm-4">
                    <label class="form-label">Email</label>
                </div>
                <div class="col-sm-8">
                    {!! Form::email('email', null, ['class' => 'form-control', 'data-required']) !!}
                </div>
                <div class="col-sm-4">
                    <label class="form-label">Comentario</label>
                </div>
                <div class="col-sm-8">
                    {!! Form::textarea('message', null, ['class' => 'form-control', 'data-required', 'rows' => 5]) !!}
                </div>
                <div class="col-sm-8 offset-sm-4 mt-md-4 mt-3">
                    <button class="btn btn-primary">Enviar mensaje</button>
                </div>
            </div>
            {!! Form::close() !!}
            <div class="row mt-lg-5 mt-md-4 mt-3 g-lg-5 g-md-4 g-3 align-items-center justify-content-between">
                <div class="col-auto">
                    <p class="m-0">{!! nl2br($options->address) !!}</p>
                </div>
                <div class="col-auto">
                    <nav class="social-nav">
                        <ul class="list-unstyled">
                            <li>
                                <a href="{{ $options->facebook }}" target="_blank" class="fab fa-facebook"></a>
                            </li>
                            <li>
                                <a href="{{ $options->instagram }}" target="_blank" class="fab fa-instagram-square"></a>
                            </li>
                            <li>
                                <a href="{{ $options->youtube }}" target="_blank" class="fab fa-youtube"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <div class="map">
        {!! $options->map !!}
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            $('.slick-slider').slick()
        });
    </script>
@endpush