@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
@endsection
@section('content')
    <div  id="mobile-menu" class="mobile-menu">
        <button @click="animateMenu"  id="mobile-menu-button" class="mobile-menu__button"><i class="fas fa-bars"></i></button>
    </div>
    <header class="internal-header">
        <div class="container">
            @include('front.partials.sticky')
              <ul id="main-nav" class="main-nav main-nav--subarticle" role="navigation">
                 @include('front.partials.menu')
              </ul>
        </div>
    </header>
    <div class="hero subarticle-hero subarticle-hero--salto">
        <div class="container subarticle-hero__container">
            <h1 class="subarticle-hero__heading">Salto</h1>
            <div id="subarticle-hero__mask"  class="subarticle-hero__mask subarticle-hero__mask--hel"></div>
        </div>
    </div>
    <div class="container ribbon__container">
        <nav class="ribbon">
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Circuito Regional de Salto</h1>
                </div>
            </div>
            <div class="ribbon-item">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Del 14 al 16 de Diciembre</h1>
                    <p class="ribbon-item__info">Inicio a las 2 pm</p>
                </div>
            </div>
            <div class="ribbon-item ribbon-item--extende ribbon-item--center">
                <button class="button button--primary ribbon__button" @click="playVideo = true"><span class="text">Ver video</span> <svgIcon src="/svg/play.svg"></svgIcon></button>
            </div>
        </nav>
    </div>
    <section class="section section--subarticle">
        <div class="container">
            <div class="polo-academy">
                <div class="polo-academy__image">
                    <img  src="img/subarticle/salto/salto-learn.png" alt="Learn from the best">
                </div>
                <div class="polo-academy__info">
                    <h2 class="brand polo-academy__brand"><svgicon class="patrona-polo-brand" src="/svg/lapatrona.svg"></svgicon></h2>
                    <h1 class="polo-academy__headline">
                        Aprende de <p class="polo-academy__subhead">los mejores</p>
                    </h1>
                    <p class="polo-academy__copy">La Patrona Polo & Equestrian Club es el mejor apoyo para desarrollar, desde el nivel de principiante hasta el nivel intermedio, a partir de los 10 años de edad. El objetivo principal es que los jugadores aprendan a jugar de forma segura y con confianza en cualquier circunstancia y con diferentes compañeros de equipo</p>
                    <p class="polo-academy__copy">
                    Existe la posibilidad de tomar lecciones individuales o grupales, tanto prácticas como teóricas, en las siguientes áreas: montar a caballo, cuidado básico de caballos, regulaciones, tácticas de juego, estilo, técnica de swing, patadas, patadas y bolas y sesiones de práctica de chukker.</p>
                    {{-- <button class="button button--ghost-secondary polo-academy__button" type="button" name="button"> Requisitos</button> --}}
                </div>
            </div>
        </div>
    </section>
    <imggallery :query="'salto'"></imggallery>
    <section class="section section--subarticle">
        <div class="container">
            <div class="polo-contact">
                <h1 class="polo-contact__headline"> Asiste al Circuito Regional de Salto</h1>
                <form class="polo-contact__form" id="salto-lessons-form" @submit.prevent="sendContact('Lecciones de Salto',false,'reservaciones@lapatronapoloclub.com')">
                    <div class="polo-contact__upper">
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for="">Nombre </label>
                            <input v-model="contact.name" class="polo-contact__input" type="text" placeholder="Nombre" required>
                        </div>
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for=""> Apellido </label>
                            <input v-model="contact.l_name" class="polo-contact__input" type="text" placeholder="Apellido" required>
                        </div>
                    </div>
                    <div class="polo-contact__upper">
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for=""> Correo</label>
                            <input v-model="contact.email" class="polo-contact__input" type="email" placeholder="Correo" required>
                        </div>
                        <div class="form-control polo-contact__control polo-contact__control--small">
                            <label class="polo-contact__label" for=""> País </label>
                            <input v-model="contact.country" class="polo-contact__input" type="text" placeholder="País" required>
                        </div>
                        <div class="form-control polo-contact__control polo-contact__control--small">
                            <label class="polo-contact__label" for=""> Teléfono </label>
                            <input v-model="contact.phone" class="polo-contact__input" type="tel" placeholder="Lada + teléfono" required>
                        </div>
                    </div>
                     <div class="polo-contact__lower">
                        <div class="form-control polo-contact__control polo-contact__control--tall">
                            <label class="polo-contact__label" for=""> Comentario </label>
                            <textarea v-model="contact.body" class="polo-contact__input polo-contact__input--textarea" name="name"></textarea>
                        </div>
                     </div>
                </form>
                <div class="polo-contact__submit">
                    <p class="polo-contact__legal">
                        Al dar clic a enviar acepto haber leído el
                        <a @click.prevent="privacidad = true">
                            Aviso de privacidad
                        </a>
                    </p>
                    <button form="salto-lessons-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
                </div>
            </div>
        </div>
    </section>

    <div class="overlay" :class="{active: playVideo}" @click="playVideo = false" v-if="playVideo">
        <div class="lightbox lightbox--video">
            <div class="lightbox__close lightbox__close--outside" @click.prevent="playVideo = !playVideo"></div>
            <video @click.stop style="max-width:100%" src="/videos/final_de_circuito_ecuestre.mp4" autoplay controls poster=""></video>
        </div>
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection