<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
@page {
  size: A4 landscape;
  margin: 1.5cm 1.5cm;
  @bottom-center {
    content: "Seite " counter(page) " von " counter(pages);
    font-size: 9px;
    color: #666;
  }
}
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 9px;
  color: #222;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 18px;
  color: #1a365d;
  margin-bottom: 2px;
}
.subtitle {
  font-size: 10px;
  color: #666;
  margin-bottom: 15px;
}
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-grid th, .calendar-grid td {
  border: 1px solid #ccc;
  vertical-align: top;
}
.time-col {
  width: 50px;
  background: #f5f5f5;
  font-weight: 600;
  text-align: center;
  padding: 2px;
}
.day-header {
  background: #1a365d;
  color: #fff;
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
}
.day-header .date {
  font-size: 14px;
  display: block;
}
.slot {
  height: 28px;
  padding: 1px 2px;
  overflow: hidden;
}
.event {
  background: #3b82f6;
  color: #fff;
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 8px;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event.all-day {
  background: #10b981;
}
.event.task {
  background: #f59e0b;
}
.weekend .day-header { background: #6b7280; }
@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
}
</style>
</head>
<body>
<h1>{{ title|default('Wochenkalender') }}</h1>
<div class="subtitle">Woche {{ week_number|default('') }} &nbsp;|&nbsp; {{ week_start|default('') }} – {{ week_end|default('') }} &nbsp;|&nbsp; Erstellt am: {{ generated_at|default('') }}</div>
<table class="calendar-grid">
  <thead>
    <tr>
      <th class="time-col">Zeit</th>
      {% for day in days %}
      <th class="day-header {{ day.is_weekend|default(False) and 'weekend' or '' }}">
        {{ day.name }}
        <span class="date">{{ day.date }}</span>
      </th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for hour in hours %}
    <tr>
      <td class="time-col">{{ hour.label }}</td>
      {% for day in days %}
      <td class="slot">
        {% for event in day.events|default([]) %}
        {% if event.hour == hour.value %}
        <div class="event {{ event.type|default('') }} {{ event.all_day|default(False) and 'all-day' or '' }}">
          {{ event.title }}
        </div>
        {% endif %}
        {% endfor %}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>
</body>
</html>
