{# each module draws its own content, its title and frame included, over the columns and rows it takes; arranged, a card goes where it is dragged, the frames left as they are #}
<div class="board" id="board">
  {% for item in items %}
  <article class="slot c{{ item.columns }} r{{ item.rows }}" data-key="{{ item.key }}">
    <button class="grip" type="button" aria-label="{{ t.text('overview.arrange.move', {'name': t.text(item.title)}) }}">{% include "overview/grip-horizontal.svg" %}</button>
    <iframe src="{{ item.src }}" data-fit title="{{ t.text(item.title) }}"></iframe>
  </article>
  {% else %}
  <p class="empty">{{ t.text("overview.empty") }}</p>
  {% endfor %}
  <form hx-post="arrange" hx-swap="none" hidden><input type="hidden" name="order"></form>
</div>