{% if results %}
<!-- DIN 277 Summary Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-2">
        <div class="card stat-card text-center" style="border-left: 4px solid #22c55e;">
            <div class="stat-value text-success">{{ results.nuf_total|floatformat:2 }}</div>
            <div class="stat-label">NUF (m²)</div>
            <small class="text-muted">Nutzungsfläche</small>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card text-center" style="border-left: 4px solid #eab308;">
            <div class="stat-value text-warning">{{ results.tf_total|floatformat:2 }}</div>
            <div class="stat-label">TF (m²)</div>
            <small class="text-muted">Technikfläche</small>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card text-center" style="border-left: 4px solid #a855f7;">
            <div class="stat-value text-purple">{{ results.vf_total|floatformat:2 }}</div>
            <div class="stat-label">VF (m²)</div>
            <small class="text-muted">Verkehrsfläche</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card text-center bg-primary text-white">
            <div class="stat-value">{{ results.ngf_total|floatformat:2 }}</div>
            <div class="stat-label">NGF (m²)</div>
            <small>Netto-Grundfläche</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card text-center bg-dark text-white">
            <div class="stat-value">{{ results.bgf_total|floatformat:2 }}</div>
            <div class="stat-label">BGF (m²)</div>
            <small>Brutto-Grundfläche</small>
        </div>
    </div>
</div>

<!-- Category Breakdown -->
{% if results.categories %}
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Aufschlüsselung nach Nutzungsart</span>
        <button class="btn btn-sm btn-outline-primary"
                hx-get="{% url 'cadhub:din277-export' results.model_id %}"
                hx-swap="none">
            <i class="bi bi-download"></i> Excel Export
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Kategorie</th>
                    <th>Bezeichnung</th>
                    <th class="text-end">Fläche (m²)</th>
                    <th class="text-end">Anteil</th>
                </tr>
            </thead>
            <tbody>
                {% for cat in results.categories %}
                <tr>
                    <td><span class="badge bg-{{ cat.color }}">{{ cat.code }}</span></td>
                    <td>{{ cat.name }}</td>
                    <td class="text-end font-monospace">{{ cat.area|floatformat:2 }}</td>
                    <td class="text-end">
                        <div class="progress" style="width: 100px; height: 20px;">
                            <div class="progress-bar bg-{{ cat.color }}" 
                                 style="width: {{ cat.percentage }}%"
                                 role="progressbar"
                                 aria-valuenow="{{ cat.percentage }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                {{ cat.percentage|floatformat:1 }}%
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- Floor Breakdown -->
{% if results.floors %}
<div class="card">
    <div class="card-header">Aufschlüsselung nach Geschoss</div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Geschoss</th>
                    <th class="text-end">NUF</th>
                    <th class="text-end">TF</th>
                    <th class="text-end">VF</th>
                    <th class="text-end">NGF</th>
                </tr>
            </thead>
            <tbody>
                {% for floor in results.floors %}
                <tr>
                    <td class="fw-medium">{{ floor.name }}</td>
                    <td class="text-end font-monospace">{{ floor.nuf|floatformat:2 }}</td>
                    <td class="text-end font-monospace">{{ floor.tf|floatformat:2 }}</td>
                    <td class="text-end font-monospace">{{ floor.vf|floatformat:2 }}</td>
                    <td class="text-end font-monospace fw-bold">{{ floor.ngf|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot class="table-light">
                <tr class="fw-bold">
                    <td>Gesamt</td>
                    <td class="text-end font-monospace">{{ results.nuf_total|floatformat:2 }}</td>
                    <td class="text-end font-monospace">{{ results.tf_total|floatformat:2 }}</td>
                    <td class="text-end font-monospace">{{ results.vf_total|floatformat:2 }}</td>
                    <td class="text-end font-monospace">{{ results.ngf_total|floatformat:2 }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
{% endif %}

{% else %}
<div class="text-center py-5 text-muted">
    <i class="bi bi-calculator" style="font-size: 48px;"></i>
    <p class="mt-3">Wählen Sie ein Modell aus und klicken Sie auf "Berechnen"</p>
</div>
{% endif %}