{% extends '@Contao/frontend_module/_base.html.twig' %}

{% block content %}
  <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.imagePath %}
            <figure class="pin-note__image-wrap">
              <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
            </figure>
          {% endif %}

          <h3 class="pin-note__headline">{{ entry.headline }}</h3>
          <div class="pin-note__text">{{ entry.text|raw }}</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>
{% endblock %}