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

{% block title %}Räume - CAD-Hub{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Räume</h1>
    <div class="d-flex gap-2">
        <input type="text" 
               class="form-control" 
               placeholder="Suchen..."
               name="search"
               hx-get="{% url 'cadhub:room-list' %}"
               hx-trigger="keyup changed delay:300ms"
               hx-target="#room-table"
               hx-include="[name='floor_filter']"
               aria-label="Räume suchen">
        <select name="floor_filter" 
                class="form-select" 
                style="width: auto;"
                hx-get="{% url 'cadhub:room-list' %}"
                hx-trigger="change"
                hx-target="#room-table"
                hx-include="[name='search']"
                aria-label="Nach Etage filtern">
            <option value="">Alle Etagen</option>
            {% for floor in floors %}
            <option value="{{ floor.id }}">{{ floor.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

<!-- Summary -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card stat-card bg-primary text-white">
            <div class="stat-value">{{ total_area|floatformat:2 }} m²</div>
            <div class="stat-label">Gesamtfläche</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card">
            <div class="stat-value">{{ room_count }}</div>
            <div class="stat-label">Räume</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card">
            <div class="stat-value">{{ floor_count }}</div>
            <div class="stat-label">Etagen</div>
        </div>
    </div>
</div>

<!-- Room Table -->
<div class="card">
    <div class="card-body p-0">
        <div id="room-table">
            {% include "cadhub/rooms/partials/room_table.html" %}
        </div>
    </div>
</div>
{% endblock %}