{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/week.json {% endcomment %}
<div class="layout layout--col layout--top gap--small">
  <table class="table table--small stretch-x" style="table-layout: fixed;">
    <thead>
      <tr>
        <th style="width: 11%;"></th>
        {% for day in days %}
        <th class="text--center">
          {% if day.is_today %}
          <span class="label label--small label--filled">{{ day.short }} {{ day.num }}</span>
          {% else %}
          <span class="label label--small{% if day.is_past %} label--gray{% endif %}">{{ day.short }} {{ day.num }}</span>
          {% endif %}
        </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td><span class="title title--small">{{ row.name }}</span></td>
        {% for cell in row.cells %}
        <td style="vertical-align: top;">
          {% for a in cell %}
          <div class="text--small" style="margin-bottom: 4px;">
            {% if a.time != "" %}<span class="text--bold">{{ a.time }}</span><br>{% endif %}
            <span{% if a.is_special %} class="text--bold" style="text-decoration: underline;"{% endif %}>{{ a.title }}</span>
          </div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if total_items == 0 %}
  <span class="description text--center">Nothing planned this week.</span>
  {% endif %}
</div>

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