{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/special.json {% endcomment %}
<div class="layout layout--col layout--top gap--small">
  {% if count == 0 %}
  <div class="flex flex--col flex--center h--full text--center gap--small">
    <span class="title">Nothing special coming up</span>
    <span class="description">No one-off events in the next {{ horizon_days }} days.</span>
  </div>
  {% else %}
  <div class="grid grid--cols-2 gap--small stretch-x" data-list-limit="true" data-list-max-height="380" data-list-hidden-count="true">
    {% for e in items %}
    <div class="item{% if e.days_until == 0 %} item--emphasis-2{% endif %}">
      <div class="meta">
        <span class="index">{{ e.day_num }}</span>
      </div>
      <div class="content">
        <span class="title title--small" data-clamp="1">{{ e.title }}</span>
        <span class="description" data-clamp="1">{{ e.weekday }} {{ e.day_num }} {{ e.month }} · {{ e.time }}{% if e.multi_day %} · {{ e.day_of }}{% endif %} · {{ e.rel }}</span>
        <span class="label label--small label--gray" data-clamp="1">{{ e.who }}{% if e.location != "" %} · {{ e.location }}{% endif %}{% if e.driver != "" %} · {{ e.driver }}{% endif %}{% if e.note != "" %} · {{ e.note }}{% endif %}</span>
      </div>
    </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">Coming up</span>
  <span class="instance">{{ count }} event{% if count != 1 %}s{% endif %} · next {{ horizon_days }} days</span>
</div>