{% extends 'base.html' %}

{% block content %}
<style>
  :root {
    --medical-blue: #0a4275; 
    --accent-blue: #0d6efd;
    --glass-bg: rgba(255, 255, 255, 0.9);
  }

  body {
    background: linear-gradient(rgba(10, 66, 117, 0.6), rgba(10, 66, 117, 0.4)), 
                url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?q=80&w=2053&auto=format&fit=crop') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    overflow: hidden; 
  }

  .main-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .split-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    max-width: 900px;
    width: 100%;
    display: flex;
    overflow: hidden;
    max-height: 85vh; 
  }

  /* Lado Login */
  .login-side {
    flex: 1;
    padding: 2.5rem;
    background: white;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* --- CORRECCIÓN DE CENTRADO --- */
  .brand-header {
    text-align: center; /* Centra el H2 y el P */
    margin-bottom: 2rem;
  }

  .brand-logo {
    height: 55px;
    display: block;
    margin: 0 auto 1rem auto; /* Centra la imagen horizontalmente */
  }

  /* Lado Carrusel */
  .info-side {
    flex: 1.2;
    padding: 2.5rem;
    background: rgba(240, 244, 248, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(0,0,0,0.05);
  }

  .form-control {
    border-radius: 10px;
    padding: 0.6rem 1rem;
    background-color: #f8f9fa;
  }

  .btn-login {
    border-radius: 10px;
    padding: 0.8rem;
    font-weight: 700;
    background-color: var(--medical-blue);
    border: none;
    margin-top: 10px;
    transition: all 0.3s;
  }

  .btn-login:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
  }

  .carousel-title {
    color: var(--medical-blue);
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }

  @media (max-height: 650px) {
    .login-side, .info-side { padding: 1.5rem; }
    .brand-logo { height: 40px; }
  }

  @media (max-width: 850px) {
    .info-side { display: none; }
    .split-card { max-width: 400px; max-height: none; }
  }
</style>

<div class="main-container">
  <div class="split-card">
    
    <div class="login-side">
      <div class="brand-header">
        {% if site_settings.logo_path %}
          <img src="{{ url_for('static', filename=site_settings.logo_path) }}" alt="Logo" class="brand-logo">
        {% else %}
          <img src="https://cdn-icons-png.flaticon.com/512/883/883360.png" alt="Logo" class="brand-logo">
        {% endif %}
      
        <h2 class="fw-bold text-dark h4">{{ site_settings.title or "Acceso Staff" }}</h2>
        
        <p class="text-muted small">{{ site_settings.tagline or "Sanatorio Profesional" }}</p>
      </div>

      <form method="post" autocomplete="off">
        <div class="mb-3">
          <label class="form-label small fw-bold text-secondary text-uppercase">Email</label>
          <input type="email" name="email" class="form-control" placeholder="usuario@sanatorio.com" required>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-bold text-secondary text-uppercase">Contraseña</label>
          <input type="password" name="password" class="form-control" placeholder="••••••••" required>
        </div>
        <button type="submit" class="btn btn-primary btn-login w-100 shadow">
          INICIAR SESIÓN
        </button>
      </form>

      <div class="mt-4 p-3 rounded-4 border bg-light">
        <div class="d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
          <span class="text-muted fw-bold">Admin:</span>
          <code>admin@demo.com</code>
          <span class="text-muted fw-bold">Pass:</span>
          <code class="text-primary">admin1234</code>
        </div>
        <div class="d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
          <span class="text-muted fw-bold">Prof:</span>
          <code>laura@demo.com</code>
          <span class="text-muted fw-bold">Pass:</span>
          <code class="text-primary">profesional1234</code>
        </div>
        <div class="d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
          <span class="text-muted fw-bold">Recep:</span>
          <code>recepcion@demo.com</code>
          <span class="text-muted fw-bold">Pass:</span>
          <code class="text-primary">recepcion1234</code>
        </div>
      </div>
    </div>

    <div class="info-side">
      <div id="medicalCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner text-center">
          <div class="carousel-item active">
            <h3 class="carousel-title">Historia Clínica</h3>
            <p class="carousel-text small text-muted">Gestión segura y centralizada de pacientes bajo normas vigentes.</p>
          </div>
          <div class="carousel-item">
            <h3 class="carousel-title">Turnos Online</h3>
            <p class="carousel-text small text-muted">Optimice la agenda médica y reduzca el ausentismo.</p>
          </div>
          <div class="carousel-item">
            <h3 class="carousel-title">Seguridad SISA</h3>
            <p class="carousel-text small text-muted">Validación de profesionales mediante estándares nacionales.</p>
          </div>
        </div>
        
        <div class="carousel-indicators" style="position: relative; margin-top: 1.5rem; bottom: 0;">
          <button type="button" data-bs-target="#medicalCarousel" data-bs-slide-to="0" class="active" style="background-color: var(--medical-blue); width: 8px; height: 8px; border-radius: 50%; border: none;"></button>
          <button type="button" data-bs-target="#medicalCarousel" data-bs-slide-to="1" style="background-color: var(--medical-blue); width: 8px; height: 8px; border-radius: 50%; border: none;"></button>
          <button type="button" data-bs-target="#medicalCarousel" data-bs-slide-to="2" style="background-color: var(--medical-blue); width: 8px; height: 8px; border-radius: 50%; border: none;"></button>
        </div>
      </div>
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var myCarousel = document.querySelector('#medicalCarousel');
    var carousel = new bootstrap.Carousel(myCarousel, {
      interval: 4000,
      ride: 'carousel',
      wrap: true
    });
  });
</script>
{% endblock %}