{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="display-4 fw-bold text-uppercase">Management Dashboard</h1>
        <a href="{% url 'course_create' %}" class="btn btn-dark btn-lg px-4 rounded-0 shadow-sm border-2">Add New Course</a>
    </div>

    <div class="row">
        {% for course in courses %}
        <div class="col-md-6 mb-4">
            <div class="card h-100 border-2 rounded-0 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title fw-bold text-uppercase">{{ course.title }}</h5>
                    <p class="card-text text-muted">{{ course.description|truncatewords:20 }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <a href="{% url 'course_edit' course.pk %}" class="btn btn-outline-dark btn-sm rounded-0 border-2">Edit</a>
                            <a href="{% url 'course_delete' course.pk %}" class="btn btn-outline-danger btn-sm rounded-0 border-2">Delete</a>
                        </div>
                        <small class="text-muted">Created: {{ course.created_at|date:"M d, Y" }}</small>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5 border-2 border-dashed">
            <p class="lead text-muted mb-4">You haven't created any courses yet.</p>
            <a href="{% url 'course_create' %}" class="btn btn-dark rounded-0 border-2">Get Started</a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
