{% extends "cadhub/base.html" %}

{% block title %}{{ model.name }} - CAD-Hub{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{% url 'cadhub:project-list' %}">Projekte</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{% url 'cadhub:project-detail' model.project.id %}">
                {{ model.project.name }}
            </a>
        </li>
        <li class="breadcrumb-item active">{{ model.name }}</li>
    </ol>
</nav>

<div class="page-header">
    <div>
        <h1 class="page-title">
            <i class="bi bi-file-earmark-code me-2"></i>
            {{ model.name }}
        </h1>
        <p class="text-muted mb-0">
            {{ model.source_format }} · {{ model.file_size_mb }} MB · 
            Hochgeladen am {{ model.created_at|date:"d.m.Y H:i" }}
        </p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-primary">
            <i class="bi bi-download"></i> Download
        </button>
        <button class="btn btn-outline-secondary" data-bs-toggle="dropdown" title="Weitere Aktionen" aria-label="Weitere Modellaktionen">
            <i class="bi bi-three-dots" aria-hidden="true"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li>
                <a class="dropdown-item" href="#">
                    <i class="bi bi-arrow-repeat"></i> Neu analysieren
                </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
                <a class="dropdown-item text-danger" href="#">
                    <i class="bi bi-trash"></i> Löschen
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Statistics -->
<div class="row g-4 mb-4">
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.floor_count }}</div>
            <div class="stat-label">Geschosse</div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.room_count }}</div>
            <div class="stat-label">Räume</div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.window_count }}</div>
            <div class="stat-label">Fenster</div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.door_count }}</div>
            <div class="stat-label">Türen</div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.wall_count }}</div>
            <div class="stat-label">Wände</div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card stat-card">
            <div class="stat-value">{{ stats.slab_count }}</div>
            <div class="stat-label">Decken</div>
        </div>
    </div>
</div>

<!-- Analysis Tabs -->
<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" 
                data-bs-target="#floors" type="button" role="tab"
                aria-controls="floors" aria-selected="true">
            Geschosse
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" 
                data-bs-target="#rooms" type="button" role="tab"
                aria-controls="rooms" aria-selected="false">
            Räume
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" 
                data-bs-target="#windows" type="button" role="tab"
                aria-controls="windows" aria-selected="false">
            Fenster
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" 
                data-bs-target="#din277" type="button" role="tab"
                aria-controls="din277" aria-selected="false">
            DIN 277
        </button>
    </li>
</ul>

<div class="tab-content">
    <!-- Floors Tab -->
    <div class="tab-pane fade show active" id="floors" role="tabpanel" aria-labelledby="floors-tab">
        <div class="card">
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Geschoss</th>
                            <th>Höhe</th>
                            <th>Räume</th>
                            <th>Fenster</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for floor in floors %}
                        <tr>
                            <td>{{ floor.name }}</td>
                            <td>{{ floor.elevation|floatformat:2 }} m</td>
                            <td>{{ floor.rooms.count }}</td>
                            <td>{{ floor.windows.count }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                Keine Geschosse gefunden.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Rooms Tab -->
    <div class="tab-pane fade" id="rooms" role="tabpanel" aria-labelledby="rooms-tab">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Raumliste</span>
                <button class="btn btn-sm btn-outline-primary">
                    <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>Nummer</th>
                            <th>Name</th>
                            <th>Geschoss</th>
                            <th>Fläche</th>
                            <th>DIN 277</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for room in rooms %}
                        <tr>
                            <td>{{ room.number }}</td>
                            <td>{{ room.name }}</td>
                            <td>{{ room.floor.name|default:"-" }}</td>
                            <td>{{ room.area|floatformat:2 }} m²</td>
                            <td>{{ room.usage_category.din_code|default:"-" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">
                                Keine Räume gefunden.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Windows Tab -->
    <div class="tab-pane fade" id="windows" role="tabpanel" aria-labelledby="windows-tab">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Fensterliste</span>
                <button class="btn btn-sm btn-outline-primary">
                    <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>Name</th>
                            <th>Geschoss</th>
                            <th>B × H</th>
                            <th>Fläche</th>
                            <th>U-Wert</th>
                            <th>Material</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for window in windows %}
                        <tr>
                            <td>{{ window.name }}</td>
                            <td>{{ window.floor.name|default:"-" }}</td>
                            <td>{{ window.width|floatformat:2 }} × {{ window.height|floatformat:2 }} m</td>
                            <td>{{ window.area|floatformat:2 }} m²</td>
                            <td>{{ window.u_value|floatformat:2|default:"-" }}</td>
                            <td>{{ window.material|default:"-" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">
                                Keine Fenster gefunden.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- DIN 277 Tab -->
    <div class="tab-pane fade" id="din277" role="tabpanel" aria-labelledby="din277-tab">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>DIN 277 Flächenberechnung</span>
                <button class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-download"></i> Excel Export
                </button>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    DIN 277 Berechnung wird hier angezeigt...
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}