{% comment %} TRMNL private plugin · Polling · half vertical · data: /api/screens/next.json {% endcomment %}
<div class="layout layout--col layout--top gap--small">
  <div class="flex flex--col gap--xsmall stretch-x" style="align-items: stretch; text-align: left;">
    {% if status == "now" %}
      <div><span class="label label--small label--filled">Happening now</span></div>
      <span class="title title--large" data-clamp="2">{{ current.title }}</span>
      <span class="value value--small value--tnums">{{ current.time }}</span>
      <span class="title title--small">{{ current.ends_in }} left</span>
      <span class="description" data-clamp="2">{{ current.who }}{% if current.location != "" %} · {{ current.location }}{% endif %}{% if current.driver != "" %} · {{ current.driver }} drives{% endif %}</span>
    {% elsif status == "next" %}
      <div><span class="label label--small label--outline">Next up · {{ next.rel }}</span></div>
      <span class="title title--large" data-clamp="2">{{ next.title }}</span>
      <span class="value value--small value--tnums">{% if next.days_until > 0 %}{{ next.day_short }} {% endif %}{{ next.time }}</span>
      <span class="title title--small">{{ next.starts_in }}</span>
      <span class="description" data-clamp="2">{{ next.who }}{% if next.location != "" %} · {{ next.location }}{% endif %}{% if next.driver != "" %} · {{ next.driver }} drives{% endif %}</span>
      {% if next.note != "" %}<div><span class="label label--small label--outline">{{ next.note }}</span></div>{% endif %}
    {% else %}
      <span class="title title--large">Nothing planned</span>
      <span class="description">No activities in the next three weeks.</span>
    {% endif %}
  </div>
  <div class="divider"></div>
  <div class="flex flex--col gap--xsmall stretch-x" style="align-items: stretch; text-align: left;">
    <span class="label label--small label--gray">Coming up</span>
    <div class="flex flex--col gap--xsmall w--full" data-list-limit="true" data-list-max-height="200" data-list-hidden-count="true">
    {% if status == "now" and next %}
      <div class="flex flex--row gap--small w--full" style="align-items: baseline; justify-content: flex-start;">
        <span class="value value--xsmall value--tnums" style="flex: 0 0 48px; text-align: left;">{{ next.day_short }}</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">{{ next.title }}</span>
          <span class="description" data-clamp="1">{{ next.time }} · {{ next.who }}</span>
        </div>
      </div>
    {% endif %}
    {% for a in upcoming limit: 5 %}
      <div class="flex flex--row gap--small w--full" style="align-items: baseline; justify-content: flex-start;">
        <span class="value value--xsmall value--tnums" style="flex: 0 0 48px; text-align: left;">{{ a.day_short }}</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">{{ a.title }}</span>
          <span class="description" data-clamp="1">{{ a.time }} · {{ a.who }}</span>
        </div>
      </div>
    {% endfor %}
    </div>
  </div>
</div>
<div class="title_bar">
  <img class="image image--adaptive" src="https://trmnl.com/images/plugins/trmnl--render.svg">
  <span class="title">Next up</span>
  <span class="instance">{{ time_now }}</span>
</div>