{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/countdowns.json {% endcomment %}
<div class="layout layout--col layout--center">
  {% if count == 0 %}
  <div class="text--center">
    <span class="title">Nothing to count down to</span>
    <span class="description">Add dates to data/countdowns.json.</span>
  </div>
  {% else %}
  <div class="grid grid--cols-3 gap--large w--full">
    {% for c in items %}
    <div class="flex flex--col flex--center text--center gap--xsmall{% if c.is_ongoing %} bg--black text--white rounded p--4{% endif %}">
      <span class="value value--xlarge value--tnums">{{ c.big }}</span>
      <span class="label label--small{% if c.is_ongoing %} label--outline{% else %} label--gray{% endif %}">{{ c.big_label }}</span>
      <span class="title title--small" data-clamp="2">{{ c.title }}</span>
      <span class="description">{% if c.is_ongoing %}until {{ c.end_label }}{% else %}{{ c.date_label }}{% endif %}{% if c.note != "" %} · {{ c.note }}{% endif %}</span>
    </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">Countdowns</span>
  <span class="instance">{{ today_label }}</span>
</div>