{% extends "layout.html.twig" %}


{% block bodyDataAditional %}
  data-router-class="Pages" data-router-action="main"
{% endblock %}
{% block content %}
  <header class=header>
    <div class=header-logo>
      <a href="/">
        <img src="{{ app.assetsPath }}/assets/img/logo-90-app.png">
      </a>
    </div>
    <a class="header-freeTrialButton">SUSCRIBETE GRATIS</a>
    <a class="festival" href="http://www.festivalminuto90.pe/" target="_blank">La app de</a>
  </header>
  <div class="dialog dialog-deviceSignUp">
    <div class=dialog-window>
      <div class="dialog-closeButton js-dialog-closeButton"></div>
      <div class="form">
        {#{{ dump(departament) }}#}
        <h2>Regístrate</h2>
        <form action="">
          <h3>Datos personales</h3>
          <div class="personal">
            <div class="form-col">
              <div class="form-row">
                <div class="form-elm">
                  <label class="label" for="name">Nombres</label>
                  <input type="text" name="name" id="name" class="required text">
                </div>
              </div>
              <div class="form-row">
                <div class="form-elm">
                  <label class="label" for="last_name">Apellidos</label>
                  <input type="text" name="last_name" id="last_name" class="required text">
                </div>
              </div>
            </div>
            <div class="form-col">
              <div class="form-row">
                <div class="form-elm">
                  <label class="label" for="last_name">Email</label>
                  <input type="text" name="email" id="email" class="required text email">
                </div>
              </div>
              <div class="form-row">
                <div class="form-elm birthdate-elm">
                  <label class="label" for="birthdate">Fecha de nacimiento</label>
                  <input type="text" name="birthdate" id="birthdate" class="required text birthdate">
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-elm ubigeo-elm">
                <label class="label" for="last_name">Ubicación</label>
                <select name="departament" id="departament" class="select required">
                  <option value="">Elige</option>
                  {% for option in departament %}
                    <option value="{{ option.id }}">{{ option.name }}</option>
                  {% endfor %}
                </select>
                <select name="province" id="province" class="select required">
                  <option value="">Elige</option>
                </select>
                <select name="district" id="district" class="select required">
                  <option value="">Elige</option>
                </select>
              </div>
            </div>
          </div>
          <div class="interesting">
            <h3>Intereses</h3>
            {% for table in other %}
              <div class="form-row elm-with-other">
                <div class="form-elm select-elm">
                  <label class="label" for="last_name">{{ table.label }}</label>
                  <select name="{{ table.field }}[]" id="{{ table.field }}" class="select required multiple"
                          multiple="multiple">
                    {% for option in table.data %}
                      <option value="{{ option.id }}">{{ option.name }}</option>
                    {% endfor %}
                  </select>
                </div>
                {% if(table.name != 'country') %}
                  <div class="form-elm other-elm">
                    <label class="label" for="last_name">Otro</label>
                    <input type="text" name="{{ table.name }}_other" id="{{ table.name }}_other" class="text">
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
          <div class="form-row form-actions">
            <button class="submit">Enviar</button>
          </div>
          <div class="message"></div>
        </form>
      </div>
    </div>
  </div>
  <div class="carousel carousel--home">
    <div class="js-carousel carousel--slick">
      <li>
        <section class="carousel-item">
          <div class=carousel-overlay></div>
          <div id=picture-id-0 class="carousel-itemImage"
               style="background-image: url({{ app.assetsPath }}/assets/img/inicial-1.gif);">
          </div>
          <div class="carousel-itemCaption carousel-itemCaption--center"><h1>Un mes gratis de Minuto90Club, solo en
              Perú</h1>
            <h2>"Hay quienes sostienen que el fútbol no tiene nada que ver con la vida del hombre, con sus cosas más
              esenciales.
              Desconozco cuánto sabe esa gente de la vida, pero de algo estoy seguro: No saben nada de fútbol."<br>
              (Eduardo Sacheri)</h2>
            <a class="header-freeTrialButton">SUSCRÍBETE GRATIS</a>
            <h2 class=carousel-itemCaption--afterCTA>Cancela tu suscripción cuando quieras</h2>
          </div>
        </section>
      </li>
      <li>
        <section class="carousel-item  carousel-item--1">
          <div class=carousel-overlay></div>
          <div class=carousel-backgroundVideo>
            <video autoplay loop poster="{{ app.assetsPath }}/assets/img/desktop_slide2.jpg" id="slide-2-video">
              <source src="{{ app.assetsPath }}/assets/img/anim.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>
            <picture class="carousel-itemImage carousel-videoFallbackImg">
              <source srcset="{{ app.assetsPath }}/assets/img/desktop_slide2.jpg?6e8ff8b 1280w"
                      media="(min-width: 980px)">
              <source srcset="{{ app.assetsPath }}/assets/img/tablet_slide2.jpg?6e8ff8b 768w"
                      media="(min-width: 768px) and (max-width: 979px)">
              <img id=slide2 srcset="{{ app.assetsPath }}/assets/img/desktop_slide2.jpg?6e8ff8b 375w"
                   alt="&lt;span class=&#x27;js-animateIfNotMoble&#x27;&gt;Game of Thrones. Veep. Westworld.&lt;/span&gt;">
            </picture>
            <div class="carousel-itemCaption carousel-itemCaption--center"><h1 class="pos-1"><span
                  class="animated-title animated">
                  <span>Ídolos</span>
                  <span>Equipos históricos</span>
                  <span>Épicas hazañas</span>
                  <span>Hinchadas</span>
                  <span>Historias inolvidables</span>
                  <span>Ficción</span>
                  <span>Animación</span>
                  <span>Ídolos</span>
                  <span>Equipos históricos</span>
                  <span>Épicas hazañas</span>
                </span>
              </h1>
              <br><br>
              <h2>Nuevas películas todas las semanas, series, documentales, dibujos animados y más.
              </h2>
              <a class="header-freeTrialButton">SUSCRÍBETE GRATIS</a>
              <h2>Además, disfruta de los beneficios de ser suscriptor: Ropa deportiva, eventos, libros, etc.</h2>
            </div>
          </div>
        </section>
      </li>
      <li>
        <section class="carousel-item carousel-item--2" data-itemindex=2>
          <div class=carousel-overlay></div>
          <div class="carousel-itemImage carousel-videoFallbackImg">
          </div>
          <div class="carousel-itemCaption carousel-itemCaption--right"><h1>Disfrútalo<br> en tu pantalla favorita
            </h1>
            <h2>Teléfono / Tablet / Computadora / TV </h2>
            <a class="header-freeTrialButton">SUSCRÍBETE GRATIS</a>
          </div>

        </section>
      </li>
    </div>
    <div class=carousel-navigation>
      <ul class=carousel-navigationItem-container>
        <li class="carousel-navigationItem is-active js-carouselNavigationItem carousel-navigationItem--0"
            data-itemindex=0><span class=carousel-navigationItemLabel>Prueba Minuto90Club Gratis</span></li>
        <li class="carousel-navigationItem js-carouselNavigationItem carousel-navigationItem--1" data-itemindex=1><span
            class=carousel-navigationItemLabel>¿Qué incluye?</span></li>
        <li class="carousel-navigationItem js-carouselNavigationItem carousel-navigationItem--2" data-itemindex=2><span
            class=carousel-navigationItemLabel>Ve desde donde quieras</span></li>
      </ul>
    </div>
  </div>
  <footer class=footer>
    <div class=footer-col-1>
      <a href="http://www.festivalminuto90.pe" target="_blank" class="footer-faq">Festival Minuto 90</a>
      <a href="https://www.facebook.com/festivalminuto90" target="_blank" class="footer-faq">Facebook</a>
      <a href="https://twitter.com/minuto90fest" target="_blank" class="footer-faq">Twitter</a>
      <a href="https://www.youtube.com/channel/UCZr3_RfTvwfsfCPBCkc4FTA" target="_blank" class="footer-faq">Youtube</a>
    </div>
    <div class=footer-col-2></div>
    <div class=footer-col-3>
      <div class=footer-availability><p>Prueba gratis es solo para clientes nuevos</p>
        <p>Minuto90Club® sólo es accesible en Perú, en lugares donde se dispone de una conexión de banda ancha de alta
          velocidad. Se requiere una conexión 3G mínima para ver en dispositivos móviles.</p></div>
      <p class=footer-copyright>&copy;2017 Minuto90Club. Todos los derechos reservados</p></div>
  </footer>
  <!-- Hotjar Tracking Code for www.minuto90club.com -->
  <script> (function (h, o, t, j, a, r) {
      h.hj = h.hj || function () {(h.hj.q = h.hj.q || []).push(arguments)}
      h._hjSettings = {hjid: 409816, hjsv: 5}
      a = o.getElementsByTagName('head')[0]
      r = o.createElement('script')
      r.async = 1
      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
      a.appendChild(r)
    })(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=') </script>
{% endblock %}