{% extends 'base.html' %}

{% block title %}nbsp.space - Dashboard{% endblock %}

{% block content %}
<div id="status-alerts" data-no-out-of-service="{{ 'true' if current_user and current_user.is_authenticated and current_user.no_out_of_service else 'false' }}" data-out-of-service-exceptions='{{ (current_user.out_of_service_exceptions | tojson) if current_user and current_user.is_authenticated else "[]" }}' data-no-maintenance="{{ 'true' if current_user and current_user.is_authenticated and current_user.no_maintenance else 'false' }}" data-no-events="{{ 'true' if current_user and current_user.is_authenticated and current_user.no_events else 'false' }}" data-no-infra-downtime="{{ 'true' if current_user and current_user.is_authenticated and current_user.no_infra_downtime else 'false' }}" data-infra-downtime-exceptions='{{ (current_user.infra_downtime_exceptions | tojson) if current_user and current_user.is_authenticated else "[]" }}' data-no-feinstaub="{{ 'true' if current_user and current_user.is_authenticated and current_user.no_feinstaub else 'false' }}"></div>

{% if current_user and current_user.is_authenticated and first_login %}
<div class="alert alert-info text-center mb-4" role="alert" id="welcome-message">
    <h4><i class="fas fa-hand-wave me-2"></i>Willkommen bei nbsp.space!</h4>
    <p>Hier findest du alle wichtigen Links für den nobreakspace. Du kannst Links als Favoriten markieren oder verstecken.</p>
    <button class="btn btn-sm btn-primary" id="dismiss-welcome">Verstanden</button>
</div>
{% endif %}

{% include 'components/db_health_alert.html' %}

{% if space_open_duration %}
<div class="alert alert-success text-center mb-4" role="alert">
    <i class="fas fa-door-open me-2"></i>Der Space ist seit 
    {% if space_open_duration.hours > 0 %}{{ space_open_duration.hours }} Stunde{% if space_open_duration.hours != 1 %}n{% endif %} und {% endif %}{{ space_open_duration.minutes }} Minute{% if space_open_duration.minutes != 1 %}n{% endif %} geöffnet.
</div>
{% endif %}

{% if garbage_tomorrow %}
<div class="alert alert-info text-center mb-4" role="alert">
    <i class="fas fa-trash me-2"></i><strong>Morgen ist Müllabfuhr!</strong>
    {% for collection in garbage_tomorrow %}
        <span class="badge {% if collection.garbage_type == 'RESTMUELL' %}bg-secondary{% elif collection.garbage_type == 'PAPIER' %}bg-info{% elif collection.garbage_type == 'GELBER_SACK' %}bg-warning text-dark{% else %}bg-dark{% endif %} ms-1">{{ collection.type_display }}</span>
    {% endfor %}
</div>
{% endif %}

{% if garbage_missing_types %}
<div class="alert alert-warning text-center mb-4" role="alert">
    <i class="fas fa-exclamation-triangle me-2"></i><strong>Achtung:</strong> Für folgende Müllarten gibt es keine Termine in den nächsten 20 Tagen:
    {% for gtype in garbage_missing_types %}
        <span class="badge bg-danger ms-1">{{ gtype.value }}</span>
    {% endfor %}
    <br><small>Bitte <a href="{{ url_for('garbage.index') }}">Termine aktualisieren</a>.</small>
</div>
{% endif %}

<!-- Desktop Layout Switcher -->
<div class="layout-switcher desktop-layout-switcher">
    <div class="layout-buttons">
        <button id="desktop-categorized" class="layout-button {% if desktop_layout == 'categorized' %}active{% endif %}" title="Kategorisierte Ansicht">
            <i class="fas fa-th-large"></i>
        </button>
        <button id="desktop-compact" class="layout-button {% if desktop_layout == 'compact' %}active{% endif %}" title="Kompakte Ansicht">
            <i class="fas fa-th"></i>
        </button>
    </div>
</div>

<!-- Mobile Layout Switcher -->
<div class="layout-switcher mobile-layout-switcher">
    <div class="layout-buttons">
        <button id="mobile-categorized" class="layout-button {% if mobile_layout == 'categorized' %}active{% endif %}" title="Kategorisierte Ansicht">
            <i class="fas fa-th-large"></i>
        </button>
        <button id="mobile-compact" class="layout-button {% if mobile_layout == 'compact' %}active{% endif %}" title="Kompakte Ansicht">
            <i class="fas fa-th"></i>
        </button>
    </div>
</div>
<div class="container-fluid">
    {% if current_user and current_user.is_authenticated and current_user.favorites %}
    <div class="category-section mb-5">
        <h2 class="category-title">Favoriten</h2>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">
            {% for favorite_url in current_user.favorites %}
                {% for link in all_links %}
                    {% if link.url == favorite_url %}
                        {% include 'components/tile.html' %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- Compact layout view (hidden by default) -->
    <div class="compact-tiles mb-5">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">
            {% for link in all_links %}
                {% include 'components/tile.html' %}
            {% endfor %}
        </div>
    </div>
    
    <!-- Categorized layout view -->
    {% for category, links in categories.items() %}
        {% include 'components/category_section.html'%}
    {% endfor %}
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/tiles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/layout-switcher.css') }}">
{% endblock %}

{% block extra_js %}
<!-- Include external JavaScript files -->
<script src="{{ url_for('static', filename='js/status-alerts.js') }}"></script>
<script src="{{ url_for('static', filename='js/search.js') }}"></script>
<script src="{{ url_for('static', filename='js/favorites.js') }}"></script>
<script src="{{ url_for('static', filename='js/section-controls.js') }}"></script>
<script src="{{ url_for('static', filename='js/welcome-message.js') }}"></script>
<script src="{{ url_for('static', filename='js/layout-switcher.js') }}"></script>
{% endblock %}