<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Perfil de Usuario - Epicrisis IA</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Arial", sans-serif;
      }

      body {
        background-color: #f5f5f5;
        color: #333;
        line-height: 1.6;
      }

      .header {
        background: linear-gradient(135deg, #1a3a6a 0%, #2a5298 100%);
        color: white;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .logo {
        height: 50px;
        margin-right: 20px;
      }

      .header-text {
        flex-grow: 1;
      }

      .header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
      }

      .header p {
        font-size: 1rem;
        opacity: 0.9;
      }
      .user-menu {
        position: relative;
        display: flex;
        align-items: center;
      }

      .user-button {
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0.5rem 0.8rem;
        border-radius: 8px;
        transition: background 0.2s ease-in-out;
      }

      .user-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .user-button .avatar {
        background-color: #93c5fd;
        color: #1e3a8a;
        font-weight: bold;
        font-size: 0.95rem;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
      }

      .arrow {
        margin-left: 0.4rem;
        font-size: 0.75rem;
        transition: transform 0.3s ease;
      }

      .dropdown {
        position: absolute;
        right: 0;
        top: 115%;
        background-color: #ffffff;
        color: #1e3a8a;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        z-index: 20;
        min-width: 160px;
        animation: fadeIn 0.2s ease-out;
      }

      .dropdown a {
        display: block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: inherit;
        font-weight: 500;
        transition: background-color 0.2s;
      }

      .dropdown a:hover {
        background-color: #f1f5f9;
        color: #1e40af;
      }

      .hidden {
        display: none;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 0 20px;
      }

      .profile-card {
        background: white;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }

      .profile-header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
      }

      .profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #2a5298;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        margin-right: 20px;
      }

      .profile-info h2 {
        color: #2a5298;
        margin-bottom: 5px;
        font-size: 1.8rem;
      }

      .profile-info p {
        color: #666;
        font-size: 1rem;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #444;
      }

      input[type="password"] {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        transition: all 0.3s ease;
      }

      input[type="password"]:focus {
        outline: none;
        border-color: #2a5298;
        box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.2);
      }

      .btn {
        background-color: #2a5298;
        color: white;
        border: none;
        padding: 12px 25px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
      }

      .btn:hover {
        background-color: #1a3a6a;
        transform: translateY(-2px);
      }

      .btn:active {
        transform: translateY(0);
      }

      .alert {
        padding: 15px;
        border-radius: 6px;
        margin: 20px 0;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
      }

      .alert.error {
        color: #d32f2f;
        background-color: #ffebee;
        border-left: 4px solid #d32f2f;
      }

      .alert.success {
        color: #388e3c;
        background-color: #e8f5e9;
        border-left: 4px solid #388e3c;
      }

      .alert-icon {
        margin-right: 10px;
        font-size: 1.2rem;
      }

      @media (max-width: 768px) {
        .profile-header {
          flex-direction: column;
          text-align: center;
        }

        .profile-avatar {
          margin-right: 0;
          margin-bottom: 15px;
        }

        .profile-info h2 {
          font-size: 1.5rem;
        }
      }
    </style>
  </head>

  <body>
    <header class="header">
      <a href="/dashboard">
        <img src="/static/logo.png" alt="Logo" class="logo" />
      </a>

      <div class="header-text">
        <h1>Epicrisis IA</h1>
        <p>
          Modelo de generación de epicrisis basado en inteligencia artificial
        </p>
      </div>

      {% if user %}
      <div class="user-menu">
        <button class="user-button" onclick="toggleMenu()">
          👤 {{ user.username }}
          <span class="arrow">&#9662;</span>
        </button>
        <div id="dropdown" class="dropdown hidden">
          {% if user.role != "admin" %}
          <a href="/perfil">Mi perfil</a>
          {% endif %}
          <a href="/logout">Cerrar sesión</a>
        </div>
      </div>
      {% endif %}
    </header>

    <div class="container">
      <div class="profile-card">
        <div class="profile-header">
          <div class="profile-avatar">{{ user.username|first|upper }}</div>
          <div class="profile-info">
            <h2>Hola, {{ user.username }}</h2>
            <p>Administra tu información personal y seguridad</p>
          </div>
        </div>

        <form method="post" action="/perfil/cambiar-password">
          <div class="form-group">
            <label for="new_password">Nueva contraseña</label>
            <input
              type="password"
              id="new_password"
              name="new_password"
              placeholder="Ingresa tu nueva contraseña"
              required
            />
          </div>

          <div class="form-group">
            <label for="confirm_password">Confirmar nueva contraseña</label>
            <input
              type="password"
              id="confirm_password"
              name="confirm_password"
              placeholder="Confirma tu nueva contraseña"
              required
            />
          </div>

          <button type="submit" class="btn">Cambiar contraseña</button>
        </form>

        {% if error %}
        <div class="alert error">
          <span class="alert-icon">⚠️</span>
          {{ error }}
        </div>
        {% endif %} {% if success %}
        <div class="alert success">
          <span class="alert-icon">✓</span>
          {{ success }}
        </div>
        {% endif %}
      </div>
    </div>

    <script>
      function toggleMenu() {
        const dropdown = document.getElementById("dropdown");
        dropdown.classList.toggle("hidden");
      }

      document.addEventListener("click", function (e) {
        const btn = document.querySelector(".user-button");
        const dropdown = document.getElementById("dropdown");
        if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
          dropdown.classList.add("hidden");
        }
      });
    </script>
  </body>
</html>
