{% extends 'main/base.html' %}
{% block title %}{{ course.title }} - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>{{ course.title }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'courses' %}">Courses</a></li>
                <li class="breadcrumb-item active">{{ course.title }}</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="course-detail-header mb-4" data-aos="fade-up">
                    <span class="course-badge">{{ course.get_course_type_display }}</span>
                    <h2 class="section-title mt-2">{{ course.title }}</h2>
                    <div class="d-flex gap-3 text-muted mt-3">
                        <span><i class="fas fa-clock me-1"></i>Duration: <strong>{{ course.duration }}</strong></span>
                        {% if course.fees %}<span><i class="fas fa-tag me-1"></i>Fees: <strong>${{ course.fees }}</strong></span>{% endif %}
                    </div>
                </div>

                {% if course.image %}
                <img src="{{ course.image.url }}" alt="{{ course.title }}" class="img-fluid rounded mb-4 w-100" style="max-height:350px;object-fit:cover;">
                {% endif %}

                <h4 class="section-title">Course Overview</h4>
                <div class="title-bar"></div>
                <p class="mt-3">{{ course.description }}</p>

                {% if course.entry_requirements %}
                <h4 class="section-title mt-4">Entry Requirements</h4>
                <div class="title-bar"></div>
                <p class="mt-3">{{ course.entry_requirements }}</p>
                {% endif %}

                <div class="mt-4">
                    <a href="{% url 'admissions' %}" class="btn btn-primary-custom me-3">
                        <i class="fas fa-pencil-alt me-2"></i>Apply for This Course
                    </a>
                    <a href="{% url 'contact' %}" class="btn btn-outline-primary">
                        <i class="fas fa-envelope me-2"></i>Enquire Now
                    </a>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="sidebar-widget mb-4" data-aos="fade-left">
                    <h5 class="widget-title">Course Details</h5>
                    <table class="table table-borderless small">
                        <tr><td class="fw-bold">Type:</td><td>{{ course.get_course_type_display }}</td></tr>
                        <tr><td class="fw-bold">Duration:</td><td>{{ course.duration }}</td></tr>
                        {% if course.fees %}<tr><td class="fw-bold">Fees:</td><td>${{ course.fees }}</td></tr>{% endif %}
                    </table>
                    <a href="{% url 'admissions' %}" class="btn btn-primary-custom w-100 mt-2">
                        <i class="fas fa-pencil-alt me-2"></i>Apply Now
                    </a>
                </div>

                {% if related_courses %}
                <div class="sidebar-widget" data-aos="fade-left" data-aos-delay="200">
                    <h5 class="widget-title" style="background: #2980b9;">Related Courses</h5>
                    <ul class="footer-links mt-0" style="color: #000;">
                        {% for rc in related_courses %}
                        <li><a href="{% url 'course_detail' rc.pk %}" style="color: #000;"><i class="fas fa-chevron-right me-1 small"></i>{{ rc.title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}