{% comment %}
  collabDoo · TRMNL Private Plugin · Layout "Full" · Wochenansicht
  Portiert aus Stefans Terminus-Vorlage (terminus_extension_pro.liquid, _stuff/): Tageskacheln 4 × 2, rechts Wetter + Foto,
  Public Sans, graue Kacheln. Datenquelle: Strategie "Polling" auf https://team.collabdoo.app/d/<token>.json
  Je Kachel: Wochentag mit "HEUTE"-Plakette, Datum, Einträge chronologisch (Termine + Aufgaben; Aufgabe = Zeit · Vorname
  bzw. Zeit · Zu vergeben), "+n weitere". Bei 7 Tagen zeigt die achte Kachel "Zu vergeben".
  Liegt das JSON unter einem Wurzelknoten (mehrere Polling-URLs), "days" → "IDX_0.days" usw.
{% endcomment %}
<div class="view view--full">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;500;600;700;800;900&family=Roboto+Condensed:wght@400;500;600;700&family=Caveat:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    .view--full { padding: 0 !important; margin: 0 !important; }
    .board * { box-sizing: border-box; margin: 0; padding: 0; }
    .board { width: 100%; height: 100%; background: #fff;
      display: grid; grid-template-columns: repeat(4, 1fr) 37%; grid-template-rows: 1fr 1fr;
      gap: 11px; padding: 11px; overflow: hidden; color: #000; font-family: 'Public Sans', system-ui, sans-serif; }

    /* Kalendertag */
    .day { background: #ddd; padding: 14px 13px; display: flex; flex-direction: column; overflow: hidden; }
    .day-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
    .wd { font-size: 21px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .today { margin-left: auto; font-size: 7px; font-weight: 800; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
      color: #fff; background: #000; padding: 3px 4px; border-radius: 2px; }
    .date { font-size: 15px; font-weight: 600; margin-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .events, .hours { font-family: 'Roboto Condensed', 'Public Sans', system-ui, sans-serif; }
    .events { display: flex; flex-direction: column; gap: 9px; }
    .time { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 5px; margin-top: 7px; }
    .title { font-size: 14px; font-weight: 500; line-height: 1.25; }
    .done { text-decoration: line-through; color: #555; }
    .more { font-size: 9px; font-weight: 600; }

    /* Wetter */
    .weather { grid-column: 5; grid-row: 1; background: #ddd; padding: 27px; display: flex; flex-direction: column; justify-content: space-between; }
    .weather-head { display: flex; justify-content: space-between; font-size: 21px; font-weight: 700; margin-top: -15px; gap: 10px; }
    .weather-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .temp { display: flex; align-items: flex-start; justify-content: center; line-height: 0.8; }
    .temp .num { font-size: 167px; font-weight: 400; line-height: 0.8; letter-spacing: -0.03em; }
    .deg { width: 22px; height: 22px; border: 3px solid #000; border-radius: 50%; margin-top: 9px; margin-left: 3px; }
    .hours { display: flex; }
    .hour { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .hh { font-size: 12px; font-weight: 800; }
    .ic { height: 30px; display: flex; align-items: center; justify-content: center; }
    .ic img { display: block !important; width: 30px !important; height: 30px !important; max-width: none !important; max-height: none !important; }
    .htemp { font-size: 10px; font-weight: 600; }

    /* Foto — mit [greetings] Post-it (note: Gruß an alle der letzten 24 h) ÜBER dem Foto. Der Zettel ist RANDLOS, weiß,
       leicht gedreht und hebt sich nur über den harten, versetzten Schatten ab (1-Bit-fest; box-shadow ohne Unschärfe).
       Ohne Foto liegt der Zettel auf Weiß. Symbol des Effekts (note.icon_svg, monochromer Pfad) als Sticker oben links. */
    .photo { grid-column: 5; grid-row: 2; overflow: hidden; background: #d8d5cf; min-height: 0; position: relative; }
    .photo.photo--blank { background: #fff; }
    .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .postit { position: absolute; right: 6%; bottom: 8%; width: 66%; max-height: 80%; background: #fff; border: 0; box-shadow: 6px 6px 0 #000;
      transform: rotate(-2.5deg); padding: 22px 18px 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
      font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive; font-weight: 600; color: #000; }
    .photo--blank .postit { right: 8%; bottom: 10%; width: 84%; max-height: 82%; transform: rotate(-2deg); }
    .note-icon { position: absolute; top: -12px; left: -12px; width: 28px; height: 28px; padding: 6px; box-sizing: content-box; background: #fff;
      border-radius: 9px; box-shadow: 3px 3px 0 #000; transform: rotate(-8deg); color: #000; }
    .note-icon svg { display: block; width: 28px; height: 28px; }
    .note-text { font-size: 24px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; word-break: break-word;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .note-from { margin-top: 10px; font-size: 15px; text-align: right; }
  </style>

  <div class="board">

    {% for d in days limit: 8 %}
      {% assign lines = d.lines | sort: "time" %}
      <div class="day">
        <div class="day-head"><span class="wd">{{ d.label.weekday_short }}</span>{% if d.is_today %}<span class="today">{{ labels.today }}</span>{% endif %}</div>
        <div class="date">{{ d.label.day }}. {{ d.label.month_short }}</div>
        <div class="events">
          {% for l in lines limit: 6 %}
            <div><div class="time">{{ l.time }}{% if l.kind == "task" %} · {{ l.who | default: labels.unassigned }}{% endif %}</div><div class="title{% if l.done %} done{% endif %}">{{ l.title }}</div></div>
          {% endfor %}
          {% if d.line_count > 6 %}<div class="more">{{ labels.more | replace: "{n}", d.line_count | minus: 6 }}</div>{% endif %}
        </div>
      </div>
    {% endfor %}

    {% if days.size == 7 %}
      <div class="day">
        <div class="day-head"><span class="wd">{{ labels.unassigned }}</span></div>
        <div class="date">{{ unassigned.size }}</div>
        <div class="events">
          {% for u in unassigned limit: 6 %}
            <div><div class="time">{{ u.day_label }} {{ u.time }}</div><div class="title">{{ u.title }}</div></div>
          {% endfor %}
          {% if unassigned.size > 6 %}<div class="more">{{ labels.more | replace: "{n}", unassigned.size | minus: 6 }}</div>{% endif %}
        </div>
      </div>
    {% endif %}

    <div class="weather">
      {% if weather %}
        <div class="weather-head"><span>{{ weather.label.location }}</span><span>{{ weather.label.condition }}</span></div>
        <div class="temp"><span class="num">{{ weather.current.temp_c | round }}</span><span class="deg"></span></div>
        <div class="hours">
          {% for x in weather.hourly %}{% assign hh = x.hour | plus: 0 %}{% if hh <= 20 %}
            <div class="hour"><span class="hh">{{ x.hour }}</span><span class="ic"><img src="https://team.collabdoo.app/trmnl/wx-{{ x.glyph }}.svg"></span><span class="htemp">{{ x.temp }}</span></div>
          {% endif %}{% endfor %}
        </div>
      {% endif %}
    </div>

    <div class="photo{% if note %}{% unless photo_url %} photo--blank{% endunless %}{% endif %}">
      {% if photo_url %}<img src="{{ photo_url }}">{% endif %}
      {% if note %}
        <div class="postit"><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>

  </div>
</div>