<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
@page {
  size: A4 landscape;
  margin: 1.5cm 2cm;
  @bottom-center {
    content: "Seite " counter(page) " von " counter(pages);
    font-size: 9px;
    color: #666;
  }
}
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 11px;
  color: #222;
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 20px;
  color: #1a365d;
  margin-bottom: 4px;
}
.subtitle {
  font-size: 10px;
  color: #666;
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  background: #1a365d;
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #e0e0e0;
}
tbody tr:nth-child(even) {
  background: #f7f7f7;
}
.contact-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
}
.type-customer { background: #e6f4ea; color: #1b7334; }
.type-supplier { background: #fef7e0; color: #8a6d00; }
.type-partner  { background: #e8f0fe; color: #1a56c4; }
.type-other    { background: #f0f0f0; color: #555; }
@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('Kontaktliste') }}</h1>
<div class="subtitle">Erstellt am: {{ generated_at|default('') }} &nbsp;|&nbsp; Anzahl: {{ contacts|length }}</div>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>E-Mail</th>
      <th>Telefon</th>
      <th>Typ</th>
      <th>Firma</th>
    </tr>
  </thead>
  <tbody>
    {% for contact in contacts %}
    <tr>
      <td>{{ loop.index }}</td>
      <td>{{ contact.name|default('') }}</td>
      <td>{{ contact.email|default('—') }}</td>
      <td>{{ contact.phone|default('—') }}</td>
      <td>
        {% set ctype = contact.type|default('other') %}
        <span class="contact-type type-{{ ctype }}">{{ ctype|capitalize }}</span>
      </td>
      <td>{{ contact.company|default('—') }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% if contacts|length == 0 %}
<p style="text-align:center; padding:40px; color:#999;">Keine Kontakte gefunden.</p>
{% endif %}
</body>
</html>
