{##
# @file login.html
# Copyright (C) 2015 Pressa. All rights reserved.
#}

{% extends 'base.html' %}
{% block additional_css %}
<link rel="stylesheet" hreflang="en" type="text/css" media="screen" href="{{ config['login']['css']['login'] }}?{{config['common']['version']}}" />
{% endblock %}
{% block additional_js %}
<script charset="UTF-8" src="{{ config['login']['js']['login'] }}?{{config['common']['version']}}">
</script>
{% endblock %}
{% block content %}
<!-- START | LOGIN -->
<div class="container-fluid" id="login">
  <div class="row">
    <div id="session-expired-box" style="display:none;" role="alert" class="alert alert-warning w-100 text-center">
      <span class="fa fa-clock mr-1"></span>
      <strong>Tu sesion ha expirado.</strong> Por favor, inicia sesion nuevamente.
    </div>
    <div id="error-box" hidden="hidden" role="alert" class="alert alert-danger alert-dismissible w-100">
      <button type="button" class="close" data-hide="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <span class="fa fa-solid fa-exclamation-circle" aria-hidden="true"></span>
      <span id="error-message"></span>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col-lg-4" id="box">
      <form id="login_form" accept-charset="UTF-8" name="login_form" method="post"
        enctype="application/x-www-form-urlencoded" role="form">
        <legend>
          {{ lang['login']['box_title'] }}
        </legend>

        <!-- ✅ NUEVO: subtítulo (no rompe nada) -->
        <p class="text-muted small mb-3">
          Ingresá tu empresa, usuario y contraseña para continuar.
        </p>

        <div class="form-group">
          <input type="text" id="empresaCode" name="empresaCode" required="required"
                class="form-control form-control-sm"
                pattern="{{ config['login']['patterns']['login']['empresaCode'] }}"
                placeholder="{{ lang['login']['empresa_placeholder'] }}" />
          <div class="has-error invalid-feedback">
            {{ lang['login']['empresa_error'] }}
          </div>
        </div>

        <div class="form-group">
          <input type="text" id="username" name="username" required="required" class="form-control form-control-sm"
            pattern="{{ config['login']['patterns']['login']['username'] }}"
            placeholder="{{ lang['login']['username_placeholder'] }}" />
          <div class="has-error invalid-feedback">
            {{ lang['login']['username_error'] }}
          </div>
        </div>

        <div class="form-group">
          
          <div class="d-flex align-items-center border rounded p-0 password-wrapper" style="background-color: #fff; overflow: hidden;">
            
            <input type="password" id="password" name="password" required="required"
              class="form-control form-control-sm border-0 shadow-none flex-grow-1 px-2 py-1" 
              style="background-color: transparent;"
              pattern="{{ config['login']['patterns']['login']['password'] }}"
              placeholder="{{ lang['login']['password_placeholder'] }}" />
            
            <button type="submit" class="btn btn-primary btn-sm border-0 m-1 py-0 px-3" id="submit"
              style="min-height: 24px;"
              data-original-text="{{ lang['login']['sign_in'] }}"
              data-loading-text="{{ lang['login']['sign_in_loading'] }}">
              {{ lang['login']['sign_in'] }}
            </button>

          </div>

          <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" id="showPassword">
            <label class="form-check-label small" for="showPassword">
              Mostrar contraseña
            </label>
          </div>

        </div>
      </form>
    </div>
  </div>
</div>
<!-- END | LOGIN -->
<script>
  if (new URLSearchParams(window.location.search).get('expired') === '1') {
    document.getElementById('session-expired-box').style.display = 'block';
  }
</script>
{% endblock %}