<div class="top-bar np-certificate-top-bar-spacing">
  <div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
    <div class="top-bar__col">
      <h2 class="np-certificate-title" >
        {{certificate.certificate_name}}
      </h2>
    </div>
    <div class="button-container np-certificate-button-container">
      {% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
        <a
          class="np-button np-certificate-button np-certificate-button-secondary"
          href="{{certificate.linkedin_share_url}}"
          target="_blank"
        >
          <i class="fab fa-linkedin np-certificate-share-icon"></i>
          {% t .share %}
        </a>
      {% endif %}
      <button
        id="print"
        type="button"
        class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
      >
        {% t .print %}
      </button>
      {% if certificate.generating_pdf %}
        <div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
          <i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
        </div>
      {% else %}
        <a
        href="{{ certificate.download_url }}"
        aria-label="{% t .download %}"
        target="_blank"
        rel="noopener noreferrer"
        download
        class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
        >
          {% t .download %}
        </a>
      {% endif %}
    </div>
  </div>
</div>
