53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n wagtailcore_tags wagtailimages_tags %}
|
|
|
|
{% block title %}{% trans "Courses" %}{% endblock title %}
|
|
|
|
{% block body_class %}template-courseindex{% endblock body_class %}
|
|
|
|
|
|
{% block content %}
|
|
<h1 class="text-3xl font-bold mb-6 text-center">{% trans "Courses" %}</h1>
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">{% trans "Purchased Courses" %}</h2>
|
|
<div class="flex flex-wrap -mx-4">
|
|
{% for course in purchased_courses %}
|
|
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
|
<a href="{{ course.url }}" class="block bg-green-50 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
|
{% image course.specific.course_image original %}
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-xl font-semibold">{{ course.specific.title }}</h2>
|
|
<div class="relative w-8 h-8 rounded-full bg-green-500">
|
|
<i class="fi fi-br-lock-open-alt leading-0 absolute left-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-white" title="{% trans "Purchased" %}"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600">{{ course.specific.description|truncatewords:20 }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">{% trans "Available Courses" %}</h2>
|
|
<div class="flex flex-wrap -mx-4">
|
|
{% for course in other_courses %}
|
|
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
|
<a href="{{ course.url }}" class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
|
{% image course.specific.course_image original %}
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-xl font-semibold">{{ course.specific.title }}</h2>
|
|
<div class="relative w-8 h-8 rounded-full bg-gray-200">
|
|
<i class="fi fi-br-shopping-basket leading-0 absolute left-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-gray-700" title="{% trans "Not Purchased" %}"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600">{{ course.specific.description|truncatewords:20 }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% endblock content %}
|