{% extends "base.html" %}

{% block title %}{{ date }} - Daily Details{% endblock %}

{% block content %}
    <div class="card">
        <h2>Details for {{ date }}</h2>

        <div class="date-selector">
            <label for="date-select">Jump to date: </label>
            <select id="date-select" onchange="window.location.href=this.value">
                <option value="">Select a date...</option>
                {% for d in available_dates %}
                <option value="{{ url_for('date_detail', date_str=d) }}" {% if d == date %}selected{% endif %}>{{ d }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <h3>{{ counts|length }}</h3>
                <p>Camera Entries</p>
            </div>
            <div class="stat-card">
                <h3>{{ total }}</h3>
                <p>Total Counts</p>
            </div>
        </div>

        {% if counts %}
            <table>
                <thead>
                    <tr>
                        <th>Camera Name</th>
                        <th>Count</th>
                        <th>Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in counts %}
                    <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 this date</h3>
                <p>There are no records for {{ date }}.</p>
            </div>
        {% endif %}

        <a href="{{ url_for('index') }}" class="btn btn-primary">← Back to Dashboard</a>
    </div>
{% endblock %}