{% extends "master-login.html" %} {% block body %}

{% block stylesheets %}
    {{ parent() }}  

<style>
  .alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
  }
  
  .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .closebtn:hover {
    color: black;
  }
  </style>
  {% endblock %}


 <!-- Log In page -->
 <div class="sm:flex">
    
    <div class="relative lg:w-[580px] md:w-96 w-full p-10 min-h-screen bg-white shadow-xl flex items-center pt-2 dark:bg-slate-900 z-10">

      <div class="w-full lg:max-w-sm mx-auto space-y-10" uk-scrollspy="target: > *; cls: uk-animation-scale-up; delay: 100 ;repeat: true">

        <!-- logo image-->
        <a href="#"> <img src="{{assets}}/images/{{portal[5].imagen}}" class="w-40" alt=""></a>
       
        <!-- title -->
        <div class="mt-0">
          <h2 class="text-2xl font-semibold mb-1.5" style="color: black !important;"> Ingrese con su cuenta </h2>
          <!--<p class="text-sm text-gray-700 font-normal">Si presenta problemas para ingresar. <a href="{{assets}}Login/soporte" class="text-blue-700">Ingrese aquí</a></p>-->
        </div>

       {% if login == 'false'%}
        <div class="alert">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
          {{mensaje}}
        </div>
        {% endif %}


        {% if captcha == 'false'%}
        <div class="alert">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
          {{mensaje}}
        </div>
        {% endif %}
 

        <!-- form -->
        <form method="POST" id="login-form" action="{{host}}{{directory}}Login/validate" class="needs-validation space-y-7 text-sm text-black font-medium"  uk-scrollspy="target: > *; cls: uk-animation-scale-up; delay: 100 ;repeat: true">
            
          <!-- email -->
          <div>
              <label for="email" class="">Correo electrónico y/o usuario</label>
              <div class="mt-2.5">
                  <input id="usuario" name="usuario" type="email" autofocus="" value="{{usuario}}"  placeholder="Email" required="" style="color: black !important;" class="!w-full !rounded-lg !bg-transparent !shadow-sm !border-slate-200 dark:!border-slate-800 dark:!bg-white/5"> 
              </div>
          </div>
          <!-- password -->
          <div>
            <label for="email" class="">Contraseña</label>
            <div class="mt-2.5">
                <input id="password" name="password" type="password" placeholder="***" required="" value="{{password}}" style="color: black !important;" class="!w-full !rounded-lg !bg-transparent !shadow-sm !border-slate-200 dark:!border-slate-800 dark:!bg-white/5">  
            </div>
          </div>

          <div class="flex items-center justify-between">

            <div class="flex items-center gap-2.5">
              <input id="rememberme" name="recordar" value="1" type="checkbox" {% if recordar==1 %} checked  {% endif%}>
              <label for="rememberme" class="font-normal">Recordar</label>
            </div>
            <a href="../Login/recuperar" class="text-blue-700">Olvidé mi contraseña </a>
          </div>

          {% if portal[6].valor == 1 %}
          <div class="g-recaptcha" data-sitekey="6LekLGgqAAAAAE3xsZoDdOcoEP8rrKKVd9oT841Z"></div>
          {% endif %}
          <!-- submit button -->
          <div>
            <button type="submit" class="button bg-primary text-white w-full">Ingresar</button>
            
            
          </div>

         
          
        </form>


      </div>

    </div>

    <!-- image slider -->
    <div class="flex-1 relative bg-primary max-md:hidden">


      <div class="relative w-full h-full" tabindex="-1" uk-slideshow="animation: slide; autoplay: true">
    
        <ul class="uk-slideshow-items w-full h-full"> 

          {% for slide in slider %}
            <li class="w-full">
                {% if slide.video==1 %}
              
                <iframe width="100%" height="100%" src="{{slide.video_url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                {% else %}

                <img src="{{assets}}/images/login/{{slide.imagen}}"  alt="" class="w-full h-full object-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left">

                {% endif %}
                
                {% if slide.video==0 %}
                <div class="absolute bottom-0 w-full uk-tr ansition-slide-bottom-small z-10">
                    <div class="max-w-xl w-full mx-auto pb-32 px-5 z-30 relative"  uk-scrollspy="target: > *; cls: uk-animation-scale-up; delay: 100 ;repeat: true" > 
                        
                        <h4 class="!text-white text-2xl font-semibold mt-7"  uk-slideshow-parallax="y: 600,0,0">  {{slide.titulo}} </h4> 
                        <p class="!text-white text-lg mt-7 leading-8"  uk-slideshow-parallax="y: 800,0,0;">{{slide.descripcion}}</p>   
                    </div> 
                </div>
                {% endif %}
                
                {% if slide.video==0 %}
                <div class="w-full h-96 bg-gradient-to-t from-black absolute bottom-0 left-0"></div>
                {% endif %}
            </li>

            {% endfor %}
           
        </ul>
 
        <!-- slide nav -->
        <div class="flex justify-center">
            <ul class="inline-flex flex-wrap justify-center  absolute bottom-8 gap-1.5 uk-dotnav uk-slideshow-nav"> </ul>
        </div>
      
        
    </div>
  

    </div>
  
  </div>
<!-- End Log In page -->

   {% endblock %}