<!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: 20px;
  color: #1a365d;
  margin-bottom: 2px;
}
.subtitle {
  font-size: 10px;
  color: #666;
  margin-bottom: 15px;
}
.month-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.month-grid th {
  background: #1a365d;
  color: #fff;
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #1a365d;
}
.month-grid td {
  border: 1px solid #ccc;
  vertical-align: top;
  width: 14.28%;
  height: 70px;
  padding: 2px 4px;
}
.day-num {
  font-weight: 600;
  font-size: 11px;
  color: #333;
  margin-bottom: 2px;
}
.day-num.today {
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
}
.day-num.other-month { color: #ccc; }
.weekend { background: #fafafa; }
.event {
  background: #3b82f6;
  color: #fff;
  border-radius: 2px;
  padding: 1px 3px;
  font-size: 8px;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event.all-day { background: #10b981; }
.event.task { background: #f59e0b; }
@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('Monatskalender') }}</h1>
<div class="subtitle">{{ month_name|default('') }} {{ year|default('') }} &nbsp;|&nbsp; Erstellt am: {{ generated_at|default('') }}</div>
<table class="month-grid">
  <thead>
    <tr>
      {% for day_name in weekday_names|default(['Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag']) %}
      <th>{{ day_name }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for week in weeks %}
    <tr>
      {% for day in week %}
      <td class="{{ day.is_weekend|default(False) and 'weekend' or '' }}">
        <div class="day-num {{ day.is_today|default(False) and 'today' or '' }} {{ day.is_other_month|default(False) and 'other-month' or '' }}">{{ day.day }}</div>
        {% for event in day.events|default([]) %}
        <div class="event {{ event.type|default('') }} {{ event.all_day|default(False) and 'all-day' or '' }}">{{ event.title }}</div>
        {% endfor %}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>
</body>
</html>
