{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/birthdays.json {% endcomment %}
<div class="layout layout--col layout--top">
  {% if count == 0 %}
  <div class="flex flex--col flex--center h--full text--center">
    <span class="title">No birthdays on file</span>
    <span class="description">Add some to data/birthdays.json.</span>
  </div>
  {% else %}
  <table class="table table--small stretch-x" data-table-limit="true">
    <thead>
      <tr>
        <th><span class="title title--small">Who</span></th>
        <th><span class="title title--small">When</span></th>
        <th><span class="title title--small">In</span></th>
        <th><span class="title title--small">Turns</span></th>
        <th><span class="title title--small">Friend of</span></th>
      </tr>
    </thead>
    <tbody>
      {% for b in items %}
      <tr>
        <td><span class="label{% if b.is_today %} label--filled{% endif %}" data-clamp="1">{{ b.name }}</span></td>
        <td><span class="label label--gray">{{ b.date_label }}</span></td>
        <td><span class="label value--tnums">{% if b.is_today %}today{% elsif b.days_until == 1 %}tomorrow{% else %}{{ b.days_until }} days{% endif %}</span></td>
        <td><span class="label">{% if b.turns %}{{ b.turns }}{% else %}–{% endif %}</span></td>
        <td><span class="label label--gray" data-clamp="1">{% if b.is_family %}Family{% else %}{{ b.friend_of }}{% endif %}{% if b.note != "" %} · {{ b.note }}{% endif %}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
</div>

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