{% extends 'base.html' %}
{% block title %}Manage Courses | Try English{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-300 py-10 px-4 sm:px-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header Section -->
        <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center bg-primary/10 rounded-full p-4 mb-3">
                <i class="fas fa-books text-3xl text-primary"></i>
            </div>
            <h2 class="text-3xl sm:text-4xl font-extrabold mb-2">Manage Courses</h2>
            <p class="text-base-content/70 max-w-xl mx-auto">Create and manage course outlines for your English learning programs.</p>
        </div>
        
        <!-- Global Add Outline Button -->
        <div class="flex justify-center mb-10">
            <a href="{{ url_for('teacher.select_course_for_outline') }}" class="btn btn-primary btn-lg gap-2">
                <i class="fas fa-plus-circle"></i>
                Add Course Outline
            </a>
        </div>

        <!-- Empty Space - No Tabs -->
        <div class="text-center p-12">
            <div class="theme-card p-10">
                <i class="fas fa-list-check text-5xl text-primary mb-6"></i>
                <h3 class="text-2xl font-bold mb-3">Outlines Management</h3>
                <p class="text-base-content/70 mb-6">Click the button above to add or manage outlines for any course.</p>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<dialog id="delete-modal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">Confirm Deletion</h3>
        <p>Are you sure you want to delete this course outline? This action cannot be undone.</p>
        <div class="modal-action">
            <form method="POST" id="delete-form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="button" class="btn btn-ghost mr-2" onclick="closeDeleteModal()">Cancel</button>
                <button type="submit" class="btn btn-error">Delete</button>
            </form>
        </div>
    </div>
</dialog>

{% endblock %}

{% block extra_js %}
<script>
    const deleteModal = document.getElementById('delete-modal');
    const deleteForm = document.getElementById('delete-form');

    document.querySelectorAll('.delete-outline').forEach(button => {
        button.addEventListener('click', () => {
            const courseId = button.dataset.courseId;
            const courseType = button.dataset.courseType;
            deleteForm.action = `/teacher/courses/${courseType}/${courseId}/outline/delete`;
            deleteModal.showModal();
        });
    });

    function closeDeleteModal() {
        deleteModal.close();
    }
</script>
{% endblock %}