{% comment %}
  collabDoo · TRMNL Private Plugin · Layout "Half Vertical" (400×480)
  Datenquelle: Strategie "Polling" auf https://team.collabdoo.app/d/<token>.json
  Oben "Heute" groß, darunter die folgenden Tage mit Einträgen als kompakte Liste.
  Gruß an alle ([greetings] note): kompakter Post-it unten rechts über den Listen, mit Symbol des Effekts (note.icon_svg).
{% endcomment %}
<div class="view view--half_vertical" style="position:relative;">
  <style>
    /* [greetings] kompakter Post-it (Gruß an alle) unten rechts über den Listen: randlos, weiß, harter Schatten, Symbol des Effekts */
    .postit-mini { position: absolute; right: 14px; bottom: 40px; width: 220px; max-width: 52%; background: #fff; border: 0; box-shadow: 5px 5px 0 #000;
      transform: rotate(-2.5deg); padding: 12px 12px 8px; z-index: 2; font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; color: #000; }
    .postit-mini .note-icon { position: absolute; top: -9px; left: -9px; width: 20px; height: 20px; padding: 4px; box-sizing: content-box; background: #fff;
      border-radius: 6px; box-shadow: 2px 2px 0 #000; transform: rotate(-8deg); color: #000; }
    .postit-mini .note-icon svg { display: block; width: 20px; height: 20px; }
    .postit-mini .note-text { font-size: 15px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; word-break: break-word;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .postit-mini .note-from { margin-top: 4px; font-size: 11px; text-align: right; }
  </style>
  <div class="layout layout--col layout--stretch-x gap--small">
    <div class="flex flex--row" style="justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:2px;">
      <span class="title">{{ labels.today }}</span>
      <span class="value value--small value--tnums">{{ today.label.day_month }}</span>
    </div>
    <div class="flex flex--col gap--xsmall" data-list-limit="true" data-list-max-height="200" data-list-hidden-count="true">
      {% for l in today.lines %}
      <div class="flex flex--col">
        <span class="label label--small{% if l.done %} text--gray-4{% endif %}" data-clamp="1"><span class="value--tnums">{{ l.time }}</span> {{ l.title }}</span>
        {% if l.who != "" %}<span class="label label--xsmall text--gray-3" data-clamp="1">{{ l.who }}</span>{% endif %}
      </div>
      {% endfor %}
      {% if today.line_count == 0 %}<span class="label label--small text--gray-3">{{ labels.nothing_planned }}</span>{% endif %}
    </div>
    <div class="flex flex--col gap--xsmall" style="border-top:1px solid #000;padding-top:4px;" data-list-limit="true" data-list-hidden-count="true">
      {% for d in days %}{% if d.is_today == false and d.line_count > 0 %}
      <span class="label label--xsmall" style="font-weight:700;">{{ d.label.weekday_short }} {{ d.label.day }}.</span>
      {% for l in d.lines limit: 3 %}
      <span class="label label--xsmall" data-clamp="1"><span class="value--tnums">{{ l.time }}</span> {{ l.title }}{% if l.who != "" %} <span class="text--gray-3">· {{ l.who }}</span>{% endif %}</span>
      {% endfor %}
      {% endif %}{% endfor %}
    </div>
  </div>
  {% if note %}
    <div class="postit-mini"><span class="note-icon">{{ note.icon_svg }}</span><div class="note-text">{{ note.text }}</div><div class="note-from">– {{ note.sender_name }}</div></div>
  {% endif %}
  <div class="title_bar">
    <img class="image image--adaptive" src="https://team.collabdoo.app/trmnl/collabdoo-mark.svg">
    <span class="title">{{ household.name }}</span>
    <span class="instance">{% if weather %}{{ weather.label.temp }} · {% endif %}{{ updated }}</span>
  </div>
</div>