{% extends 'base.html' %}

{% block content %}
<section class="container-fluid d-flex justify-content-center">
    <div class="container-md my-5 mx-2 shadow-lg p-4 ">
        <div class="container-sm">
            <div class="row">
                <div class="col">
                    <h2>User Activity Distribution</h2>
                </div>
                <div class="col text-end">
                    <!-- Dropdown for selecting data file -->
                    <form method="POST" action="{{ url_for('views.data_visualization') }}">
                        <label for="data_file" class="form-label">Choose Data File:</label>
                        <select name="data_file" id="data_file" class="form-select" onchange="this.form.submit()">
                            {% for file in data_files %}
                            <option value="{{ file }}" {% if file == selected_file %}selected{% endif %}>
                                {{ file.split('/')[-1] }}
                            </option>
                            {% endfor %}
                        </select>
                    </form>
                </div>
            </div>

            {% if error %}
            <div class="alert alert-danger mt-3" role="alert">
                {{ error }}
            </div>
            {% endif %}

            {% if plot_url %}
            <div class="row mt-4">
                <div class="col">
                    <h4>Selected File: {{ selected_file.split('/')[-1] }}</h4>
                    <img src="{{ plot_url }}" class="img-fluid rounded shadow" alt="User Activity Distribution">
                </div>
            </div>
            {% endif %}

            {% if statistics %}
            <div class="row mt-4">
                <div class="col">
                    <h2>Activity Statistics</h2>
                    <table class="table table-bordered table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>Hour</th>
                                <th>Activity Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for hour, count in statistics.items() %}
                            <tr>
                                <td>{{ hour }}</td>
                                <td>{{ count }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</section>
{% endblock content %}