@if($section->type == 'background_video')
    <video autoplay muted loop style="width: 100%;">
        <source src="{{ $section->sectionContent->first()->raw }}" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
@elseif($section->type == 'swiper')
    <swiper-sample :sections="[{{ $section->toJson() }}]"></swiper-sample>
@elseif($section->type == 'newsletter')
    <section class="newsletter pt-5 pb-5" style="height: 500px; background-image: url({{ $section->background_image }});-webkit-background-size: cover;background-size: cover;" id="newsletter">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-head wow fadeInDown animated" data-wow-offset="10">
                        <h1>Boletin informativo</h1>
                        <p>Complete su dirección de correo electrónico para recibir actualizaciones mensuales</p>
                        <span class="underline"></span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12 form">
                    <div id="contact">

                        <form method="post" action="{{ route('saveNewsletter') }}" name="contactform">
                            @csrf
                            <fieldset class="row">

                                <div class="col-md-6 offset-2">
                                    <input name="email" type="text" class="form-control form-control-lg" id="email" value="" placeholder="Por favor, introduzca su dirección de correo electrónico" />
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-outline-light btn-lg btn-block" id="submit" value="Submit">
                                        <i class="fa fa-envelope"></i>
                                        Subscribe
                                    </button>
                                </div>

                            </fieldset>

                        </form>

                        <div class="tex-center">
                            <div id="message"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@elseif($section->type == 'carousel')
    <div class="carousel-airmall pt-5 pb-5">
        <div class="container">
            <carousel
                :autoplay="true" :items="1" :nav="false"
                :navText='["anterior","siguiente"]'>
                @foreach($section->sectionContent()->orderBy('order')->where('active', true)->get() as $sectionContent)
                    @if($sectionContent->url_to)
                        <a href="{{$sectionContent->url_to}}"><img src="{{ $sectionContent->raw }}"></a>
                    @else
                        <img src="{{ $sectionContent->raw }}">
                    @endif
                @endforeach
            </carousel>
        </div>
    </div>
    {{--<section class="features pt-5 pb-5" style="min-height: 300px;">
        <div class="container">
            <h1>{{ $section->name }}</h1>
            <p><span class="font-weight-light">{{ $section->detail }}</span></p>
        </div>
    </section>--}}
@elseif($section->type == 'title')
    {{--<section class="features" style="min-height: 160px;">
        <div class="container">
            <h1 style="margin-bottom: 0px;"><b>{{ $section->name }}</b></h1>
            <span class="underline"></span>
            <p><span class="font-weight-light">{{ $section->detail }}</span></p>
        </div>
    </section>--}}
    <div style="background-image: url({{ $section->background_image }});-webkit-background-size: cover;background-size: cover; background-position: 0% 10%;">
        <div class="container-fluid" style="background-color: {{ $section->background_color }};">
            <div class="container">
                <center class="d-block d-sm-none"><img height="180" src="{{ $section->header_image }}" alt="nivel"></center>
                <center class="d-none d-sm-block"><img src="{{ $section->header_image }}" alt="nivel"></center>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="background-color: {{ $section->background_color_2 }};">
        <div class="container pt-3 bt-3">
            <center style="color: white; font-size: 50px;"><b>{{ $section->name }}</b></center>
        </div>
    </div>
@else
    <section class="features pt-5 pb-5" style="min-height: 300px;">
        <div class="container">
            <h1>{{ $section->name }}</h1>
            <p><span class="font-weight-light">{{ $section->detail }}</span></p>
        </div>
    </section>
@endif