<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Labsol Academy</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <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;
        border-radius: 5px; 
        background: #2F3659; 
        color: #ffffff;
        padding: 10px;
    }
  
      /* Fin Card */
  
      /* Sección footer */
      .copyright-section {
           color: gray;
           padding: 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">
          <h2>
            Conferencia en
            <br>
            <span style="color: #10b5fa">LABSOL ACADEMY</span>
          </h2>
          <p class="italic-text"></p>
        </div>
        <div class="card-content">
          <div style="border-bottom: 1px solid #000;">
            <h2 style="margin: 10px auto;">{{ videollamada.titulo }}</h2>
            <h5 class="italic-text" style="margin: 10px auto;">Impartido por {{videollamada.instructor}}</h5>
          </div>
          <p class="italic-text">{{ videollamada.descripcion }}</p>
          <div style="margin-bottom: 15px;">
            <h5 style="font-size: x-small; margin-bottom: 10px;">Datos de realización: </h5>
            <ul style="padding: 0; list-style: none; font-size: xx-small; white-space: nowrap; color: #333;">
              <li style="margin: 0; color: #333;">
                Fecha: {{ videollamada.fecha_reunion }}
              </li>
              <li style="margin: 0;">
                Hora: {{ videollamada.hora }}
              </li>
              <li style="margin: 0; overflow: hidden; text-overflow: ellipsis;">
                Enlace: {{ videollamada.enlace }}
              </li>
            </ul>
          </div>            
        </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>
</body>
</html>
