{% extends "allauth/layouts/manage.html" %}
{% load i18n %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-6">{% trans "Hello, " %}{{ user.first_name }}!</h1>
  <p class="text-xl">{% trans "Your courses:" %}</p>
  <ul class="list-disc list-inside mt-4">
    <!-- courses as cards -->
    {% for course in courses %}
    <li class="mb-4">
      <a href="{{ course.url }}" class="block p-4 bg-white rounded-lg shadow hover:bg-gray-50 transition">
        <h2 class="text-2xl font-semibold">{{ course.title }}</h2>
        <p class="text-gray-600">{{ course.description }}</p>
      </a>
    </li>
    {% empty %}
    <li class="text-gray-600">{% trans "You haven't enrolled in any courses yet." %}</li>
    {% endfor %}
  </ul>
</div>
{% endblock %}