{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/chores.json {% endcomment %}
<div class="layout layout--col layout--top gap--small">
  {% if kid_count == 0 %}
  <div class="flex flex--col flex--center h--full text--center">
    <span class="title">No kids configured</span>
    <span class="description">Add members with role "kid" to data/family.json.</span>
  </div>
  {% else %}
  <div class="grid grid--cols-{{ kid_count }} gap--large stretch-x">
    {% for col in columns %}
    <div class="flex flex--col gap--small">
      <span class="title text--center">{{ col.name }}</span>
      <div class="divider"></div>
      {% if col.chores.size == 0 %}
      <span class="description text--center">Nothing this week</span>
      {% endif %}
      {% for chore in col.chores %}
      <div class="item">
        <div class="content">
          <span class="title title--small" data-clamp="2">{{ chore.title }}</span>
          <span class="description">{% if chore.rotating %}rotating{% else %}every week{% endif %}</span>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>

<div class="title_bar">
  <img class="image image--adaptive" src="https://trmnl.com/images/plugins/trmnl--render.svg">
  <span class="title">Chores</span>
  <span class="instance">{{ week_label }} · {{ week_range }} · rotates {{ rotates_on }}</span>
</div>