{% extends "base.html" %}

{% block title %}Sessions - {{ title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title mb-4">
                    <i class="bi bi-list-task"></i> Analysis Sessions
                </h1>

                {% if sessions %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Session ID</th>
                                <th>Filename</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Updated</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for session in sessions %}
                            <tr>
                                <td><code>{{ session.session_id[:8] }}...</code></td>
                                <td>{{ session.filename }}</td>
                                <td>
                                    <span class="session-status status-{{ session.status }}">
                                        {{ session.status }}
                                    </span>
                                </td>
                                <td>{{ session.created_at[:19] }}</td>
                                <td>{{ session.updated_at[:19] }}</td>
                                <td>
                                    <a href="/session/{{ session.session_id }}" class="btn btn-sm btn-primary">
                                        <i class="bi bi-eye"></i> View
                                    </a>
                                    <button class="btn btn-sm btn-danger" onclick="deleteSession('{{ session.session_id }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> No sessions yet. <a href="/">Upload a file</a> to get started.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    async function deleteSession(sessionId) {
        if (!confirm('Delete this session?')) return;

        try {
            const response = await fetch(`/api/session/${sessionId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to delete session');
            }
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }
</script>
{% endblock %}
