{% extends "base.html" %}
{% block content %}
<div class="spreadsheet-container">
    <style>
    .spreadsheet-container { padding: 20px; }
    .sheet-navigation {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:20px; padding:10px; background:#f8f9fa; border-radius:5px;
    }
    .sheet-navigation h2 { margin:0; font-size:20px; font-weight:bold; }
    .sheet-navigation a { text-decoration:none; color:#007bff; font-weight:bold; }
    .unit-cell {
    text-align: center;
    font-weight: 600;
    background: #f9f9f9;
    }
    .table-container {
      background:#fff; border-radius:5px; padding:10px;
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
    }
    .sheet-table { width:100%; border-collapse:collapse; font-size:14px; }
    .sheet-table th, .sheet-table td { border:1px solid #dee2e6; padding:4px 6px; }
    .sheet-table th { background:#f2f2f2; font-weight:bold; text-align:center; }
    .row-label { background:#f9f9f9; font-weight:bold; white-space:nowrap; }
    .number-cell { text-align:right; white-space:nowrap; }
    .sheet-table tbody tr:nth-child(even) { background:#fcfcfc; }
    .sheet-table tbody tr:hover { background:#f1f3f5; }

    .cell-input {
      width: 100%;
      box-sizing: border-box;
      text-align: right;
      border: 1px solid #ced4da;
      border-radius: 3px;
      padding: 2px 4px;
      font-size: 14px;
      background: #fff;
    }
    .sheet-table {
        table-layout: fixed;
        width: auto;
    }
    .cell-input {
        width: 80px;
        box-sizing: border-box;
    }
    .sheet-table th,
    .sheet-table td {
        padding: 4px 6px;
        font-size: 13px;
    }
    .actions-bar { margin-top: 12px; display:flex; gap:10px; align-items:center; }
    .btn {
      padding: 6px 10px; border:1px solid #ced4da; border-radius:4px;
      background:#fff; cursor:pointer; font-weight:600;
    }
  </style>

  <div class="sheet-navigation">
    <a href="{% url 'clients_list' %}">&larr; Übersicht</a>
    <h2>Rechnung</h2>
    <a href="{% url 'abrechnung' %}">Abrechnung</a>
  </div>

  {% if needs_interval %}
    <div class="table-container">
      <p style="margin:0;">Bitte zuerst ein 6-Monats-Intervall auf der Übersichtsseite auswählen.</p>
    </div>
  {% else %}

  <div class="table-container">
    <table class="sheet-table spreadsheet-table">
      <thead>
        <tr>
          <th>Arbeitsgruppe</th>
          <th>Tabellenkürzel</th>
          <th>Name</th>
          <th>Heliumverluste (€)</th>
          <th>Heliumverluste (l)</th>
          <th>Verbr. u. Repar. (€)</th>
          <th>Gesamtverflüssigung (l)</th>
          <th>Preis (€/l)</th>
          <th>Bezogene Menge (l)</th>
          <th>Verflüssigungskosten (€)</th>
          <th>Verlustkosten (€)</th>
          <th>Gaskosten (€)</th>
          <th>Gutschriften (€)</th>
          <th>Personalkosten (€)</th>
          <th>Anteil Personalkosten (€)</th>
          <th>Gesamtkosten (€)</th>
        </tr>
      </thead>

      <tbody>
        {% for r in rows %}
        <tr>
          <td>{{ r.arbeitsgruppe }}</td>
          <td>{{ r.tabellenkuerzel }}</td>
          <td>{{ r.name }}</td>

          <td>{{ r.heliumverluste_eur|floatformat:2 }}</td>
          <td>{{ r.heliumverluste_l|floatformat:2 }}</td>
          <td>{{ r.verbr_u_repar_eur|floatformat:2 }}</td>
          <td>{{ r.gesamtverfluessigung_l|floatformat:2 }}</td>
          <td>{{ r.preis_eur_l|floatformat:4 }}</td>

          <td>{{ r.bezogene_menge_l|floatformat:2 }}</td>
          <td>{{ r.verfluessigungskosten_eur|floatformat:2 }}</td>
          <td>{{ r.verlustkosten_eur|floatformat:2 }}</td>
          <td>{{ r.gaskosten_eur|floatformat:2 }}</td>
          <td>{{ r.gutschriften_eur|floatformat:2 }}</td>
          <td>{{ r.personalkosten_eur|floatformat:2 }}</td>
          <td>{{ r.anteil_personal_eur|floatformat:2 }}</td>
          <td>{{ r.gesamtkosten_eur|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% endif %}
</div>
{% endblock %}