{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/next.json {% endcomment %}
<div class="layout layout--row layout--top gap--xlarge">

  <div class="flex flex--col gap--small h--full" style="flex: 3 1 0; min-width: 0; justify-content: center; align-items: flex-start; text-align: left;">
    {% if status == "now" %}
      <div><span class="label label--filled">Happening now</span></div>
      <span class="title title--xlarge" data-clamp="2">{{ current.title }}</span>
      <span class="value value--large 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>
      {% if current.note != "" %}<div><span class="label label--small label--outline">{{ current.note }}</span></div>{% endif %}
    {% elsif status == "next" %}
      <div><span class="label label--outline">Next up · {{ next.rel }}</span></div>
      <span class="title title--xlarge" data-clamp="2">{{ next.title }}</span>
      <span class="value value--large 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 %}
      <div><span class="label label--outline">Next up</span></div>
      <span class="title title--xlarge">Nothing planned</span>
      <span class="description">No activities in the next three weeks.</span>
    {% endif %}
  </div>

  <div class="flex flex--col gap--xsmall h--full" style="flex: 2 1 0; min-width: 0; align-items: stretch; text-align: left;">
    {% if status == "now" and next %}
      <span class="label label--small label--gray">Then</span>
      <div class="flex flex--row gap--small w--full" style="align-items: baseline;">
        <span class="value value--xsmall value--tnums" style="flex: 0 0 56px;">{{ next.day_short }}</span>
        <div class="flex flex--col" style="min-width: 0; align-items: flex-start; 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>
      <div class="divider"></div>
    {% endif %}
    {% if all_day_today.size > 0 %}
      <span class="label label--small label--gray">Today, all day</span>
      {% for a in all_day_today %}
      <div class="flex flex--col w--full" style="align-items: flex-start;">
        <span class="title title--small" data-clamp="1">{{ a.title }}</span>
        <span class="description" data-clamp="1">{{ a.who }}{% if a.multi_day %} · day {{ a.day_of }}{% endif %}</span>
      </div>
      {% endfor %}
      <div class="divider"></div>
    {% endif %}
    <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="330" data-list-hidden-count="true">
    {% for a in upcoming %}
      <div class="flex flex--row gap--small w--full" style="align-items: baseline;">
        <span class="value value--xsmall value--tnums" style="flex: 0 0 56px;">{{ a.day_short }}</span>
        <div class="flex flex--col" style="min-width: 0; align-items: flex-start; 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">{{ today_label }} · {{ time_now }}</span>
</div>