{% comment %} TRMNL private plugin · Polling · quadrant · data: /api/screens/today.json {% endcomment %}
<div class="layout layout--col layout--top gap--xsmall">
  {% if today_count == 0 %}
  <div class="flex flex--col stretch-x" style="align-items: flex-start; text-align: left;">
    <span class="title title--small">Nothing planned today</span>
    {% if tomorrow_count > 0 %}<span class="description">Tomorrow: {{ tomorrow_items[0].start }} {{ tomorrow_items[0].title }}</span>{% endif %}
  </div>
  {% endif %}
  <div class="flex flex--col gap--xsmall stretch-x" style="align-items: stretch; text-align: left;" data-list-limit="true" data-list-max-height="150" data-list-hidden-count="true">
  {% for a in today_items limit: 4 %}
    <div class="flex flex--row gap--small w--full" style="align-items: baseline; justify-content: flex-start;">
      <span class="value value--xsmall value--tnums{% if a.is_past %} text--gray-50{% endif %}" style="flex: 0 0 60px; text-align: left;">{% if a.all_day %}—{% else %}{{ a.start }}{% endif %}</span>
      <span class="title title--small{% if a.is_past %} text--gray-50{% endif %}" data-clamp="1">{{ a.title }} <span class="description">{{ a.who }}</span></span>
    </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">Today</span>
  <span class="instance">{{ today_label }}</span>
</div>