{% if heading is not empty %}
<h1 class="text-center mb-5">{{heading}}</h1>
{% endif %}
{% if not notrainings %}


  {% if not nocertificates %}

    {% if trainings|length > 0 %}
    {% if current_user.user_firstname is empty or current_user.user_lastname is empty%}
    <div class="alert alert-info" role="alert">
      <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
      {% if isDemoUser %}
      <p>
        Sie können in dieser Demo keine Teilnahmezertifikate herunterladen.
      </p>
      {% else %}
      <p>
        Damit Sie Teilnahmezertifikate herunterladen können, müssen Sie in Ihrem <a class="alert-link" href="{{profile_link}}">Profil</a> Ihren Vor- und Nachnamen angeben.
      </p>
      {% endif %}
    </div>
    {% endif %}
    {% else %}
    <div class="alert alert-info" role="alert">
      <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
      <p>
        Sobald Sie mindestens ein Training vollständig beendet haben, können Sie hier Ihre Teilnahmezertifikate sehen.
      </p> 
    </div>
    {% endif %}
    {% for training in trainings %}
    <div class="border mb-3 p-3">
      <div class="row">
        <div class="col-8 col-sm-8 col-md-8 col-lg-8 d-flex align-items-center">
          <img class="zerti-img mb-0 mr-3" id="zertifikat-image-{{training.getId()}}" src="
            {% if training.getImageUrl() is empty%}
            {{defaultimglink}}
            {% else %}
            {{training.getImageUrl()}}
            {% endif %}" alt="{{training.getTitle()}}"  /> 
            <h4 class="mb-0 mt-0 hyphens-auto">
              {{training.title}} 
            </h4>
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 d-flex">
          <span class="ml-auto">
            {{ trainingFindates[training.getId()] | date("d.m.Y")}}
          </span>
        </div>
        <div class="col-12 col-sm-8 col-md-8 col-lg-8 mt-3 align-items-center">
          <ul class="ml-auto list-unstyled">
            {% for zertifikat in training.getZertifikat() %}
            <li> <a {% if current_user.user_firstname is not empty and current_user.user_lastname is not empty%}href="javascript:generateCertifikate({{zertifikat.getCertificate_header()}},{{zertifikat.getCertificate_content()}}, {{zertifikat.getCertificate_footer()}}, '{{certFindates[zertifikat.getCertificate_id()]}}')"{% endif %} class="text-color-black ml-auto hyphens-auto {% if current_user.user_firstname is empty or current_user.user_lastname is empty %}text-muted{% endif %}"><i class="fas fa-file-pdf mr-2"></i>Download{% if show_certificate_title %} "{{zertifikat.title}}"{% endif %}</a> </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div class="alert alert-info" role="alert">
      <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
      <p>
        Auf diesem System wurden für Ihre Trainings noch keine Teilnahmezertifikate angelegt.
      </p>
    </div>
  {% endif %}
{% else %}
<div class="alert alert-info" role="alert">
  <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
  <p>
      Ihnen wurden noch keine Trainings zugewiesen, sodass auch keine Teilnahmezertifikate anzuzeigen sind.
  </p>
</div>
{% endif %}

{%include 'zertifikate/zertifikate-pdf-template.html' with{'current_user': current_user}%}
<style>
    .zerti-img svg{
      width: 100%;
      height: 100%;
    }

    .zerti-img{
      height: 60px;
      width: 60px;
      object-fit: cover;
    }
  </style>