{% extends "base.html" %}

{% block title %}Dashboard - Frigate Counter{% endblock %}

{% block content %}
    <!-- Today's Stats -->
    <div class="stats-grid">
        <div class="stat-card">
            <h3>{{ today_data|length }}</h3>
            <p>Cameras Active Today</p>
        </div>
        <div class="stat-card">
            <h3>{{ today_data|sum(attribute='counter_value') }}</h3>
            <p>Total Counts Today</p>
        </div>
        <div class="stat-card">
            <h3>{{ summary|length }}</h3>
            <p>Days with Data</p>
        </div>
        <div class="stat-card">
            <h3>{{ cameras|sum(attribute='total_count') }}</h3>
            <p>All Time Total</p>
        </div>
    </div>

    <!-- Today's Details -->
    <div class="card">
        <h2>Today's Activity ({{ today }})</h2>
        {% if today_data %}
            <table>
                <thead>
                    <tr>
                        <th>Camera</th>
                        <th>Count</th>
                        <th>Last Updated</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in today_data %}
                    <tr>
                        <td><a href="{{ url_for('camera_detail', camera_name=item.camera_name) }}">{{ item.camera_name }}</a></td>
                        <td><span class="badge badge-success">{{ item.counter_value }}</span></td>
                        <td>{{ item.timestamp }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="empty-state">
                <h3>No data for today yet</h3>
                <p>Counts will appear here once the counter starts receiving events.</p>
            </div>
        {% endif %}
    </div>

    <!-- Daily Summary -->
    <div class="card">
        <h2>Daily Summary</h2>
        {% if summary %}
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Cameras</th>
                        <th>Total Counts</th>
                        <th>Last Update</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for day in summary %}
                    <tr>
                        <td><strong>{{ day.date }}</strong></td>
                        <td><span class="badge badge-info">{{ day.camera_count }}</span></td>
                        <td><span class="badge badge-success">{{ day.total_count }}</span></td>
                        <td>{{ day.last_update }}</td>
                        <td><a href="{{ url_for('date_detail', date_str=day.date) }}" class="btn btn-primary">View Details</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="empty-state">
                <h3>No data available</h3>
                <p>Daily summaries will appear here once data is recorded.</p>
            </div>
        {% endif %}
    </div>

    <!-- Camera Summary -->
    <div class="card">
        <h2>Camera Summary</h2>
        {% if cameras %}
            <table>
                <thead>
                    <tr>
                        <th>Camera Name</th>
                        <th>Days Active</th>
                        <th>Total Counts</th>
                        <th>Last Update</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for camera in cameras %}
                    <tr>
                        <td><strong>{{ camera.camera_name }}</strong></td>
                        <td><span class="badge badge-info">{{ camera.day_count }}</span></td>
                        <td><span class="badge badge-success">{{ camera.total_count }}</span></td>
                        <td>{{ camera.last_update }}</td>
                        <td><a href="{{ url_for('camera_detail', camera_name=camera.camera_name) }}" class="btn btn-primary">View Details</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="empty-state">
                <h3>No cameras registered</h3>
                <p>Camera data will appear here once events are processed.</p>
            </div>
        {% endif %}
    </div>
{% endblock %}