{% comment %} TRMNL private plugin · Polling · quadrant · data: /api/screens/next.json {% endcomment %}
<div class="layout layout--col layout--top gap--xsmall">
  <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">Now</span></div>
      <span class="title title--large" data-clamp="2">{{ current.title }}</span>
      <span class="title title--small">until {{ current.end }} · {{ current.ends_in }} left</span>
      <span class="description" data-clamp="1">{{ current.who }}{% if current.location != "" %} · {{ current.location }}{% endif %}</span>
    {% elsif status == "next" %}
      <div><span class="label label--small label--outline">Next · {{ next.rel }}</span></div>
      <span class="title title--large" data-clamp="2">{{ next.title }}</span>
      <span class="title title--small">{% if next.days_until > 0 %}{{ next.day_short }} {% endif %}{{ next.time }} · {{ next.starts_in }}</span>
      <span class="description" data-clamp="1">{{ next.who }}{% if next.location != "" %} · {{ next.location }}{% endif %}</span>
    {% else %}
      <span class="title title--large">Nothing planned</span>
      <span class="description">Next three weeks are free.</span>
    {% endif %}
  </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>