{% block content %}
{% load static %}

{% if image_content and certificate_url %}
<meta property="og:description" content="Obtuve este certificado, ¡compartilo también!" />
<meta property="og:image" content="{{ image_content }}" crossorigin="anonymous" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="{{ certificate_url }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="¡Obtuve mi certificado '{{ course_title }}' en {{ platform_name }}!" />

<!-- Para Twitter (ahora X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ image_content }}" />
<meta name="twitter:title" content="¡Obtuve mi certificado '{{ course_title }}'!" />
<meta name="twitter:description" content="Mirá mi certificado de finalización de curso en {{ platform_name }}." />
{% endif %}

<link rel="stylesheet" href="{% static 'theme/css/lms-main-v1.css' %}" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
  integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    transition: background-color 0.8s ease-in-out;
    background-color: white;
    overflow-x: hidden;
  }

  .header-section {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 36px;
    position: relative;
  }

  .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .logo {
    height: 30px;
  }

  .menu {
    display: flex;
    gap: 20px;
    margin-left: auto;
  }

  .hamburger {
    font-size: 28px;
    cursor: pointer;
    display: none;
    user-select: none;
  }

  .boton-superior {
    background: var(--primary);
    color: white !important;
    border: 1px solid var(--primary);
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 20px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
  }

  .boton-superior:hover {
    background-color: white !important;
    color: var(--primary);
    border: 1px solid var(--primary);
  }

  input[type="submit"]:active:not(:disabled),
  input[type="submit"]:focus:not(:disabled),
  input[type="button"]:active:not(:disabled),
  input[type="button"]:focus:not(:disabled),
  button:active:not(:disabled),
  button:focus:not(:disabled),
  .button:active:not(:disabled),
  .button:focus:not(:disabled) {
    box-shadow: none !important;
  }

  .certificate-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .certificate-section {
    padding-top: 5px;
  }

  .iframe-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }

  .iframe-container img {
    width: 100%;
    height: auto;
    display: block;
  }

  footer {
    display: none;
  }

  .social-sharing {
    background: var(--gray-l4);
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    line-height: 1.2;
  }

  .social-sharing span {
    font-size: 20px;
  }

  .social-links {
    display: flex;
    gap: 1rem;
  }

  .link-pok {
    margin-top: 1rem;
    font-size: 15px !important;
  }

  .share {
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .logo-container {
      position: static;
      transform: none;
    }

    .hamburger {
      display: block;
    }

    .menu {
      position: absolute;
      top: 60px;
      right: 10px;
      background-color: white;
      flex-direction: column;
      align-items: flex-end;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: none;
      z-index: 999;
      gap: 0;
    }

    .menu.show {
      display: flex;
    }

    .boton-superior {
      background-color: white !important;
      color: var(--primary) !important;
      box-shadow: none !important;
      border: none !important;
      background-image: none !important;
      transform: none !important;
      text-decoration: none !important;
      border-radius: 0;
    }

    .boton-superior:hover {
      color: var(--primary);
      box-shadow: none;
    }

    .social-sharing {
      height: auto !important;
      flex-direction: column;
    }
  }

  /* //modal  */

  #modal_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }

  #modal {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background: #ffffff;
    padding: 20px;
    flex-direction: column;
  }

  .butonCancelModal {
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
    background: transparent;
    color: black;
    border: none;
    box-shadow: none;
    font-size: 1rem;
  }

  .butonCancelModal:hover {
    background: none !important;
  }

  .MuiPaper-root {
    padding: 32px 32px 0px;
    border-radius: 16px;
    max-width: 500px;
  }

  .css-8azq84 {
    height: 100%;
    outline: 0px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    --Paper-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  }

  .css-m7bnyg {
    height: 69px;
    overflow: hidden;
  }

  .css-1ohi3s7 img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
  }

  .css-37japd {
    font-weight: 500;
    font-size: 1rem;
  }

  .css-37japd img {
    width: 24px;
    height: 24px;
  }

  .css-amfkon {
    margin: 0px;
    color: rgb(30, 30, 30);
    font-size: 24px;
    font-family: Poppins;
    font-weight: 700;
    line-height: 1.167;
  }

  .css-1b07nng {
    font: inherit;
    font-size: 14px;
    letter-spacing: inherit;
    color: currentcolor;
    border: 0px;
    box-sizing: content-box;
    background: none;
    margin: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    min-width: 0px;
    width: 100%;
    animation-name: mui-auto-fill-cancel;
    animation-duration: 10ms;
    height: auto;
    resize: none;
    padding: 0px;
    line-height: 2;
  }

  .css-unux02 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: rgb(58, 67, 78);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .css-1v2tvb4 {
    margin: 0px;
    color: rgb(255, 255, 255);
    font-size: 1rem;
    padding: 2%;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }

  .css-sb40dm {
    display: flex;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 16px;
  }

  .css-1b07nng a {
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 4px;
    background: rgb(255, 255, 255);
    cursor: pointer;
  }

  .MuiStack-root {
    margin-top: 4px !important;
  }

  .css-wnpqyk {
    margin: 0px 0px 0px 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: Poppins;
    color: rgb(84, 140, 255);
  }
</style>

<section class="header-section">
  <div class="header-content">
    <div class="logo-container">
      <a href="{% url 'dashboard' %}">
        <img src="{{ logo_src }}" alt="Logo" class="logo">
      </a>
    </div>
    <div class="menu" id="menu">
      <button id="botonToggle" class="boton-superior">Back</button>
    </div>
    <div class="hamburger" id="hamburger">&#9776;</div>
  </div>
</section>

<section>
  <div class="social-sharing">
    <div>Congratulations! You did it! Share it with your family, friends, and colleagues on your social and professional
      networks.
    </div>

    <div class="social-links">
      <a href="{{ social_links.twitter }}" class="share" target="_blank" rel="noopener noreferrer"
        title="Compartir en Twitter">
        <span class="icon fab fa-x-twitter"></span>
      </a>

      <a href="{{ social_links.facebook }}" class="share" target="_blank" rel="noopener noreferrer"
        title="Compartir en Facebook">
        <span class="icon fab fa-facebook"></span>
      </a>

      <a class="share" id="linkedinShareBtn" rel="noopener noreferrer" title="Compartir en LinkedIn">
        <span class="icon fab fa-linkedin"></span>
      </a>

      <a href="{{ lms_base_url }}/api/pok/certificate?course_id={{ course_id }}&user_id={{ user_id }}"
        class="share" id="downloadPdfBtn" title="Descargar certificado">
        <i class="fas fa-download"></i>
      </a>
    </div>

  </div>
</section>

<section id="section-v1" class="certificate-section">
  <div id="previewFrame" class="iframe-container">
    <img id="certImage" src="{{ image_content }}" alt="Certificate">
  </div>
  <a class="link-pok" href="{{ certificate_url }}" target="_blank">View Certificate in Pok</a>
</section>

<!-- Modal de Linkedin -->

<div id="modal_overlay">
  <section id="modal">
    <button class="butonCancelModal" id="cancelShare">X</button>
    <div class="MuiPaper-root MuiDialog-container MuiDialog-scrollPaper css-8azq84" role="dialog" aria-labelledby=":r8:"
      aria-modal="true">
      <h2 class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-11b89pq" id=":r8:">
        <span class="MuiTypography-root MuiTypography-h3 css-amfkon">Crear publicación en LinkedIn</span>
      </h2>
      <div class="MuiDialogContent-root css-1nbx5hx">
        <span
          class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-wr5c52">

          <div class="MuiStack-root css-jj2ztu">
            <div class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-multiline css-m7bnyg">
              <textarea placeholder="¿Sobre qué quieres hablar?" aria-label=""
                class="MuiInputBase-input MuiInputBase-inputMultiline css-1b07nng">¡Feliz de obtener mi credencial como Certificate de Aulasneo! 🎉🎓
                  #POK #DigitalCredentials #Aulasneo 🌐✨</textarea>
              <textarea aria-hidden="true" class="MuiInputBase-input MuiInputBase-inputMultiline css-1b07nng"
                readonly="" tabindex="-1">
              </textarea>
            </div>
          </div>
          <div class="MuiStack-root no-margin-stack css-1fe818t">
            <div class="MuiStack-root no-margin-stack css-1ohi3s7">
              <img src="{{ image_content }}">
            </div>
          </div>
          <div class="MuiStack-root no-margin-stack css-unux02">
            <span class="MuiTypography-root MuiTypography-shareTitle css-1v2tvb4">
              <div class="MuiBox-root css-1hb97yd">Recibí la credencial de Certificate emitida por Aulasneo</div>
          </div>
          <div class="MuiStack-root css-sb40dm">
            <button id="linkedinCustomShareBtn"
              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-37japd"
              tabindex="0" type="button">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFySURBVHgB7deNTcMwEAXgV8QAjBAmgBHCBmzQdoMyAR0BJiAjsEGyQbsBYQKyQXimRooibFo7ldz4fdIpjX2V6mv8E0BEREREREREJEDf9yWjZnz1B+bzCjkwA+3dHjF3HOTOU4AdErdAJDNKX/+CkLArxGsD++aBD8DGMwVWyIFdCD+Gc98UBrnhoG9MQC7HFLuA+cdd/3rHTaALzC15uWfc2aZPxp4570gJf2jlWQS3o9ytJ/fN5pSj9WTM9D1jIlNsg5PhwJa81IzCk2b6TCHrKdablApQMKoT8ktG9JOQUgFKnG5j14pgSU2BgZbR4LiTZNQLV2oFMLvAA1f6W8bPlfdr2+6yRITUCrDmoJthA+8rXl493zGHrwKBUipA49njX+AXvBukVIDW1WEPSL5pMIsC/KfDGVxSAc5CBUDmVABkTgVA5lQAZC77AlwjXoXDu/tf9qN787LTOnJd7b+e4D7ztxARERERERERkeN8A1EmMkXByhwxAAAAAElFTkSuQmCC"
                alt="linkedin">Compartir como publicación<span class="MuiTouchRipple-root css-4mb1j7"></span>
            </button>
          </div>
          <div class="MuiStack-root css-sb40dm">
            <a href="https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&amp;organizationName=Aulasneo&amp;name=Certificate&amp;certUrl={{image_content}}&amp;certId=&amp;issueYear=2025&amp;issueMonth=5"
              target="_blank" title="" rel="noreferrer">

              <div class="MuiStack-root css-1hyoz7m">
                <span class="MuiTypography-root MuiTypography-bodyMenu css-wnpqyk">Agregar a mi perfil de
                  LinkedIn</span>
              </div>
            </a>
          </div>
        </span>
      </div>
      <div class="MuiDialogActions-root MuiDialogActions-spacing css-1batjdu"></div>
    </div>
  </section>
</div>

<!-- Script para el modal de Linkedin -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const linkedinBtn = document.getElementById('linkedinShareBtn');
    const modal = document.getElementById('modal_overlay');
    const cancelShare = document.getElementById('cancelShare');

    linkedinBtn.addEventListener('click', function (event) {
      event.preventDefault();
      if (modal) {
        modal_overlay.style.display = 'block';
      }
    });
    cancelShare.addEventListener('click', function () {
      modal.style.display = 'none';
    });
  });
</script>

<!-- Script para compartir en Linkedin -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const linkedinShareBtn = document.getElementById('linkedinCustomShareBtn');
    const linkedinUrl = '{{ social_links.linkedin }}';

    linkedinShareBtn.addEventListener('click', function () {
      window.open(linkedinUrl, '_blank');
    });
  });
</script>

<!-- Script para el menu -->
<script>
  const boton = document.getElementById('botonToggle');
  const hamburger = document.getElementById('hamburger');
  const menu = document.getElementById('menu');
  const sectionV1 = document.getElementById('section-v1');
  const authoringUrl = "{{ authoring_microfrontend_url|escapejs }}";

  boton.addEventListener('click', () => {
    if (window.innerWidth <= 768) {
      menu.classList.remove('show');
    }

    if (window.history.length > 1) {
      history.back();
      setTimeout(() => {
        if (window.location.href === localStorage.getItem('lastVisited')) {
          window.location.href = authoringUrl;
        }
      }, 500);
    } else {
      window.location.href = authoringUrl;
    }
  });

  hamburger.addEventListener('click', () => {
    menu.classList.toggle('show');
  });
</script>

{% endblock %}