{% comment %} TRMNL private plugin · Polling · full layout · data: /api/screens/board.json {% endcomment %}
<div class="layout layout--col layout--top gap--medium">
  {% if headline != "" %}
  <div class="stretch-x">
    <span class="title title--large" data-clamp="2">{{ headline }}</span>
    <div class="divider" style="margin-top: 8px;"></div>
  </div>
  {% endif %}

  {% if items.size > 0 %}
  <div class="flex flex--col gap--small stretch-x" data-list-limit="true" data-list-max-height="260" data-list-hidden-count="true">
    {% for line in items %}
    <div class="item">
      <div class="meta"><span class="index">{{ forloop.index }}</span></div>
      <div class="content">
        <span class="title title--small" data-clamp="2">{{ line }}</span>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if headline == "" and items.size == 0 and quote == "" %}
  <div class="flex flex--col text--center stretch-x">
    <span class="title">The board is empty</span>
    <span class="description">Edit data/board.json.</span>
  </div>
  {% endif %}

  {% if quote != "" %}
  <div class="flex flex--col gap--xsmall stretch-x" style="margin-top: auto;">
    <span class="description" data-clamp="2">“{{ quote }}”</span>
    {% if quote_by != "" %}<span class="label label--small label--gray">{{ quote_by }}</span>{% endif %}
  </div>
  {% endif %}
</div>

<div class="title_bar">
  <img class="image image--adaptive" src="https://trmnl.com/images/plugins/trmnl--render.svg">
  <span class="title">{{ family_name }} board</span>
  <span class="instance">{{ today_label }}</span>
</div>