{% 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 %}