@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--temporada">
        <div class="container subarticle-hero__container">
            <h1 class="subarticle-hero__heading tittle-nosotros">
                Temporada
            </h1>
            <div id="subarticle-hero__mask"  class="subarticle-hero__mask subarticle-hero__mask--"></div>
        </div>
    </div>

    <div class="container ribbon__container">
        <div class="ribbon ribbon__season">
            <seasonvue></seasonvue>
        </div>
    </div>

    <section class="section section--subarticle">
        <div class="container">
            <div class="polo-season">
                <best-player-season></best-player-season>
            </div>
        </div>
    </section>

    {{-- <imggallery :gallery="polo"></imggallery> --}}

    <section class="section section--subarticle">
        <div class="container">
            <div class="polo-contact">
                <h1 class="polo-contact__headline"> ¿Quieres venir a un juego?</h1>
                <form id="polo-lesson-form" class="polo-contact__form" action="" @submit.prevent="sendContact('Polo Lesson',false,'reservaciones@tierratropical.com.mx')">
                    <div class="polo-contact__upper">
                        <div class="form-control polo-contact__control">
                            <label class="polo-contact__label" for=""> Nombre Completo</label>
                            <input v-model="contact.name" class="polo-contact__input" type="text" name="" value="" placeholder="Nombre" required>
                        </div>
                        <div class="form-control polo-contact__control polo-contact__control--small polo-contact__control--separator">
                            <label class="polo-contact__label" for=""> Correo</label>
                            <input v-model="contact.email" class="polo-contact__input" type="email" name="" value="" placeholder="Email" 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" name="" value="" 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 leido el
                        <a @click.prevent="privacidad = true">
                            Aviso de privacidad
                        </a>
                    </p>
                    <button form="polo-lesson-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection