{% extends 'micboard/base.html' %}
{% load static %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-4">
                        <img src="{% static 'micboard/logo.png' %}" alt="Micboard project logo" style="height: 64px; margin-right: 1rem;">
                        <div>
                            <h1 class="display-5 mb-0">Micboard</h1>
                            <p class="text-muted mb-0" id="project-desc">Real-time Wireless Microphone Monitoring</p>
                        </div>
                    </div>
                    <p class="lead">Monitor battery, audio, and RF levels for supported wireless microphones in real time. Integrates with Shure, Sennheiser, and more.</p>
                    <div class="row g-3 mb-4" aria-label="Monitoring summary">
                        <div class="col-sm-6">
                            <div class="border rounded p-3">
                                <strong class="fs-4">{{ device_count }}</strong>
                                <span>managed device{{ device_count|pluralize }}</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="border rounded p-3">
                                <strong class="fs-4">{{ group_count }}</strong>
                                <span>monitoring group{{ group_count|pluralize }}</span>
                            </div>
                        </div>
                    </div>
                    <hr aria-hidden="true">
                    <div class="row">
                        <div class="col-md-6">
                            <h2 class="h5">Quick Links</h2>
                            <ul class="list-unstyled">
                                <li><a href="{% url 'micboard:alerts' %}">View system alerts</a></li>
                                <li><a href="{% url 'micboard:about' %}">About this project</a></li>
                                <li><a href="https://github.com/justprosound/django-micboard" target="_blank" rel="noopener">GitHub Project (opens in new tab)</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h2 class="h5">Views</h2>
                            <ul class="list-unstyled">
                                <li><a href="{% url 'micboard:all_buildings_view' %}">Browse by building</a></li>
                                <li><a href="{% url 'micboard:all_rooms_view' %}">Browse by room</a></li>
                                <li><a href="{% url 'micboard:device_type_view' device_type='all' %}">Browse by device type</a></li>
                                <li><a href="{% url 'micboard:priority_view' priority='high' %}">Browse by priority</a></li>
                                <li><a href="{% url 'micboard:charger_dashboard' %}">Charger dashboard</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<!-- No static-app JS needed. Add Django-specific JS here if required. -->
{% endblock %}