{% comment %} TRMNL private plugin · Polling · half horizontal · data: /api/screens/birthdays.json {% endcomment %}
<div class="layout layout--col layout--top gap--xsmall">
  {% if count == 0 %}<span class="description">No birthdays on file.</span>{% endif %}
  <div class="grid grid--cols-3 gap--small stretch-x" data-list-limit="true" data-list-max-height="150" data-list-hidden-count="true">
    {% for b in items limit: 6 %}
    <div class="flex flex--row gap--small w--full" style="align-items: center; justify-content: flex-start;">
      <span class="value value--small value--tnums" style="flex: 0 0 56px; text-align: left;">{% if b.is_today %}🎂{% else %}{{ b.days_until }}d{% endif %}</span>
      <div class="flex flex--col" style="min-width: 0; flex: 1 1 auto; align-items: stretch; text-align: left;">
        <span class="title title--small" data-clamp="1">{{ b.name }}{% if b.turns %} · {{ b.turns }}{% endif %}</span>
        <span class="description" data-clamp="1">{{ b.date_label }}{% if b.is_family == false %} · {{ b.friend_of }}{% endif %}</span>
      </div>
    </div>
    {% endfor %}
  </div>
</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">friends & family</span>
</div>