Liste: Leer

{% set level = level ??? 2 %}
{% set colors = ['cyan', 'green', 'yellow', 'purple', 'blue', 'red', 'orange'] %}
{% set id = id ??? html_id('list') -%}

<div {{ html_attributes({
  id: id,
  class: {
    'list': true,
  },
}, attrs ?? {}) }}>
  {% if headline|default %}
    <div class="list__headline">
      {% include '@headline' with headline | merge({
        level: level,
        size: 2,
      }) only %}
    </div>
  {% endif %}

  {% if searchBox|default %}
    <div class="list__search-box">
      {% include '@search-box' with searchBox | merge({
        id: 'search-box' | namespaceInputId(id),
      }) only %}
    </div>
  {% endif %}

  {% if searchResults|default %}
    <div class="list__search-results">
      {% include '@headline' with {
        tag: 'span',
        size: false,
        text: searchResults,
      } only %}
    </div>
  {% endif %}

  {% if pagination|default %}
    <div class="list__pagination">
      {% include '@pagination' with pagination | merge({
        id: 'top-pagination' | namespaceInputId(id),
        jump: false,
      }) only %}
    </div>
  {% endif %}

  <div class="list__list-teasers">
    {% for listTeaser in listTeasers %}
      <div class="list__list-teaser">
        {% include (listTeaser.use ??? '@card') with {
          id: "teaser-#{loop.index}" | namespaceInputId(id),
          level: level + 1,
          color: color ?? colors[loop.index0 % (colors|length)],
          showDetailLabels: showDetailLabels ?? true,
        } | merge(listTeaser) only %}
      </div>
    {% else %}
      {% if emptyMessage|default %}
        <div class="list__empty">
          {{ emptyMessage | componentize }}
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if pagination|default %}
    <div class="list__pagination">
      {% include '@pagination' with pagination | merge({
        id: 'bottom-pagination' | namespaceInputId(id),
      }) only %}
    </div>
  {% elseif button|default %}
    <div class="list__button">
      {% include '@button' with button only %}
    </div>
  {% endif %}
</div>