<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>

     <style>
          .container {
               margin: 0 auto;
          }

          .italic-text {
               font-style: italic;
               opacity: 0.8;
          }

          .main {
               text-align: center;
               margin: 10px;
               color: #333;
               min-width: 300px;
               max-width: 300px;
          }

          /* Sección Card */
          .card {
               width: 100%;
               height: 100%;
               background: #ffffff;
               border: 1px solid #e9e9e9;
               border-radius: 5px;
               margin-bottom: 10px;
          }

          .card-content {
               padding: 0 20px;
          }

          .card-title {
               margin-bottom: 10px;
               color: #333;
          }

          /* Fin Card */

          /* Sección footer */
          .copyright-section {
               color: gray;
               padding: 25px 0;
               font-size: 15px;
          }

          .copyright-text {
               text-align: center;
               font-size: x-small;
          }

          /* Fin footer */
     </style>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background: #f4f4f4; display: flex; width: auto;">
<div class="container">
     <div class="main">
          <div class="card">
               <div class="card-title" style="border-radius: 5px; background: #2F3659; color: #ffffff;">
                    <div style="padding:10px;">
                         <h2>
                              Bienvenido al sistema
                              <br>
                              <span style="color: #10b5fa">LABSOL ACADEMY</span>
                              <br>
                         </h2>
                         <p class="italic-text">
                              Un administrador te ha proporcionado acceso al sistema.
                         </p>
                    </div>
               </div>
               <div class="card-content">
                    <h3 class="italic-text">Tús credenciales son:</h3>
                    <p class="italic-text">Usuario: <strong>{{ usuario.username }}</strong></p>
                    <p class="italic-text">Contraseña: <strong> {{ password1 }} </strong></p>
               </div>
          </div>
     </div>
     <div class="copyright-section">
          <div class="copyright-text">
               &copy; <a style="color: gray;" href="#">Labsol Academy</a> Todos los derechos reservados, 2023. <br>
               Hecho por el <a href='#' style="color: gray;">Laboratorio de Software Libre.</a><br><br>
          </div>
     </div>
</div>
</body>
</html>
