{% extends 'base.html' %}
{% load static %}
{% block title %}Courses
{% endblock title %}

{% block head %}
{% endblock head %}

{% block body %}
<div class="container my-4">
    <div class="row">
        {% for course in course reversed %}
        <div class="col-sm-4">
            <div class="card my-4 mx-3 shadow-lg p-3 mb-5 bg-white rounded" style="width: 18rem;">
                <img src="{{ course.thumbnail_url }}" class="card-img-top" alt="Course Thumbnail" height="150">
                <div class="card-body">
                    <h5 class="card-title">{{ course.title }}</h5>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><img src="https://img.icons8.com/android/20/000000/time.png" />
                        {{ course.course_length }}</li>
                    <li class="list-group-item"><img src="https://img.icons8.com/metro/20/000000/price-tag-euro.png" />
                        {% if course.course_type == "PAID" %}₹ {{ course.course_price }} /-{% else %}{{ course.course_type }}{% endif %}</li>
                </ul>
                <div class="card-body">
                    <center>
                        <a href="{% url 'course_detail' course.course_slug %}" class="btn btn-info py-2 my-1">View Course Details</a>
                    </center>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock body %}