{% use '@Contao/component/_figure.html.twig' %}

<link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">

<section class="pinboard" data-pinboard>
  <div class="pinboard__surface" data-pinboard-surface>
    {% for entry in entries %}
      <article
        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
        data-pin-note
        data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
        data-seed="{{ entry.id }}"
        aria-label="{{ entry.headline }}"
      >
        {% if entry.imageFigure %}
          <figure class="pin-note__image-wrap">
            {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
          </figure>
        {% endif %}

        <h3 class="pin-note__headline">{{ entry.headline }}</h3>
        <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>

        {% if entry.link %}
          <p class="pin-note__link-wrap">
            <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
          </p>
        {% endif %}
      </article>
    {% else %}
      <p class="pinboard__empty">Keine veröffentlichten Pinnwandeinträge vorhanden.</p>
    {% endfor %}
  </div>
</section>

<script src="{{ asset('bundles/contaopinboard/js/pinboard.js') }}" defer></script>