{% extends "base.html" %}

{% block title %}Saved Timetables - Timetable Generator{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-folder-open me-2"></i>Saved Timetables
    </h2>
    <div>
        <a href="{{ url_for('generate_timetable_view') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Create New
        </a>
    </div>
</div>

{% if saved_timetables %}
<div class="row">
    {% for saved in saved_timetables %}
    <div class="col-lg-6 col-xl-4 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-calendar-alt me-2"></i>{{ saved.name }}
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>
                        Saved {{ saved.created_at | timestamp_to_date }}
                    </small>
                </div>
                
                <div class="mb-3">
                    <strong>Sections ({{ saved.sections|length }}):</strong>
                    <ul class="list-unstyled mt-2">
                        {% for section in saved.sections %}
                        <li>
                            <i class="fas fa-users me-1"></i>
                            <small>{{ section.name }} ({{ section.year }})</small>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('load_saved_timetable', saved_id=saved.id) }}" 
                       class="btn btn-primary btn-sm">
                        <i class="fas fa-edit me-1"></i>Load & Edit
                    </a>
                    <button class="btn btn-danger btn-sm" 
                            onclick="deleteSavedTimetable({{ saved.id }})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="card">
    <div class="card-body text-center py-5">
        <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
        <h5 class="text-muted">No Saved Timetables</h5>
        <p class="text-muted">Create and save timetables to see them here.</p>
        <a href="{{ url_for('generate_timetable_view') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Create Your First Timetable
        </a>
    </div>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
function deleteSavedTimetable(savedId) {
    if (confirm('Are you sure you want to delete this saved timetable?')) {
        fetch('/delete_saved_timetable/' + savedId, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting timetable: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error deleting timetable: ' + error);
        });
    }
}
</script>
{% endblock %}