{% extends 'base.html' %}

{% block content %}

<section class="container-fluid d-flex justify-content-center">
    <div class="container-md my-5 mb-3 mx-2 shadow-lg p-4">
        <div class="container-sm">
            <div class="row">
                <div class="col">
                    <h2>User Activity Distribution</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <form method="POST" action="{{ url_for('views.analyze') }}">
                        <!-- Dropdown for selecting data file -->
                        <label for="data_file" class="form-label">Choose Data File:</label>
                        <select name="data_file" id="data_file" class="form-select">
                            {% if data_files %}
                                {% for file in data_files %}
                                {{ file }}
                                {{ selected_file }}
                                <option value="{{ file }}" {% if file == selected_file %}selected{% endif %}>{{ file.split('/')[-1] }}</option>
                                {% endfor %}
                            {% else %}
                                <option disabled>No CSV files found</option>
                            {% endif %}
                        </select>
                        
                        <!-- Analysis Selection Table -->
                        <label for="analyses" class="form-label">Select Analyses:</label>
                        <table id="analysesTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="2%"><input type="checkbox" id="checkAllAnalyses" class="form-check-input"  onclick="checkAllCheckboxes('analysesTable', 'checkAllAnalyses')"></th>
                                    <th>Analysis Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if analyses %}
                                    {% for analysis in analyses %}
                                    <tr>
                                        <td>
                                            <input class="form-check-input" type="checkbox" name="analyses" value="{{ analysis.name }}" 
                                                {% if analysis.name in selected_analyses %}checked{% endif %}>
                                        </td>
                                        <td>{{ analysis.name }}</td>
                                        <td>{{ analysis.description }}</td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center">No analyses available</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                        <button type="submit" class="btn btn-primary mt-3">Run Analyses</button>
                    </form>
                </div>
            </div>
            {% include 'includes/error.html' %}
        </div>
    </div>
</section>

{% if plot_url %}
<section class="container-fluid d-flex justify-content-center">
    <div class="container-md my-1 mx-2 shadow-lg p-4">
        <div class="container-sm">
            <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>
        </div>
    </div>
</section>
{% endif %}

{% if results %}
{% for analysis_name, result in results.items() %}
<section class="container-fluid d-flex justify-content-center">
    <div class="container-md my-2 mx-2 shadow p-4 pt-0">
        <div class="container-sm">
            <div class="results mt-4">
                <h3>{{ analysis_name }}</h3>
                <div class="analysis-output">
                    {{ result | safe }}  <!-- This allows HTML output -->
                </div>
            </div>
        </div>
    </div>
</section>
{% endfor %}
{% endif %}

{% endblock %}