chore: remove unneeded templates

kursy/templates/allauth/elements/alert.html

@@ -1,6 +0,0 @@
-{% load allauth %}
-<div role="alert"
-     class="mb-3 rounded-md border px-4 py-3 text-sm {% if attrs.level == "error" %}border-amber-200 bg-amber-50 text-amber-800{% else %}border-blue-200 bg-blue-50 text-blue-800{% endif %}">
-    {% slot message %}
-    {% endslot %}
-</div>

kursy/templates/allauth/elements/badge.html

@@ -1,19 +0,0 @@
-{% load allauth %}
-{% setvar variant %}
-    {% if "warning" in attrs.tags %}
-        warning
-    {% elif "danger" in attrs.tags %}
-        danger
-    {% elif "secondary" in attrs.tags %}
-        secondary
-    {% elif "success" in attrs.tags %}
-        success
-    {% else %}
-        primary
-    {% endif %}
-{% endsetvar %}
-<span {% if attrs.title %}title="{{ attrs.title }}"{% endif %}
-      class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {% if variant == "warning" %}bg-amber-100 text-amber-800{% elif variant == "danger" %}bg-red-100 text-red-800{% elif variant == "secondary" %}bg-slate-100 text-slate-700{% elif variant == "success" %}bg-green-100 text-green-800{% else %}bg-blue-100 text-blue-800{% endif %}">
-    {% slot %}
-    {% endslot %}
-</span>

kursy/templates/allauth/elements/button.html

@@ -1,36 +0,0 @@
-{% load allauth %}
-{% comment %} djlint:off {% endcomment %}
-<{% if attrs.href %}a href="{{ attrs.href }}"{% else %}button{% endif %}
-{% if attrs.form %}form="{{ attrs.form }}"{% endif %}
-{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
-{% if attrs.name %}name="{{ attrs.name }}"{% endif %}
-{% if attrs.type %}type="{{ attrs.type }}"{% endif %}
-{% if attrs.value %}value="{{ attrs.value }}"{% endif %}
-class="{% block class %}
-    inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
-    {% if "link" in attrs.tags %}bg-transparent p-0 text-blue-600 hover:text-blue-700 hover:underline focus:ring-blue-500
-    {% else %}
-      {% if "prominent" in attrs.tags %}px-5 py-3 text-base{% elif "minor" in attrs.tags %}px-2.5 py-1.5 text-sm{% else %}px-4 py-2 text-sm{% endif %}
-      {% if "outline" in attrs.tags %}
-        border
-        {% if "danger" in attrs.tags %}border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500{% elif "secondary" in attrs.tags %}border-slate-500 text-slate-600 hover:bg-slate-100 focus:ring-slate-500{% elif "warning" in attrs.tags %}border-amber-500 text-amber-700 hover:bg-amber-50 focus:ring-amber-500{% else %}border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500{% endif %}
-      {% else %}
-        {% if "danger" in attrs.tags %}bg-red-600 text-white hover:bg-red-700 focus:ring-red-500{% elif "secondary" in attrs.tags %}bg-slate-600 text-white hover:bg-slate-700 focus:ring-slate-500{% elif "warning" in attrs.tags %}bg-amber-500 text-slate-900 hover:bg-amber-600 focus:ring-amber-500{% else %}bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500{% endif %}
-      {% endif %}
-    {% endif %}{% endblock %}">
-    {% if "tool" in attrs.tags %}
-    {% if "delete" in attrs.tags %}
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="h-4 w-4" viewBox="0 0 16 16">
-  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-    </svg>
-    {% elif "edit" in attrs.tags %}
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793L14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5L3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"/></svg>
-    {% endif %}
-    {% endif %}
-
-{% if not "tool" in attrs.tags %}
-{% slot %}
-{% endslot %}
-{% endif %}
-</{% if attrs.href %}a{% else %}button{% endif %}>

kursy/templates/allauth/elements/button__entrance.html

@@ -1,6 +0,0 @@
-{% extends "allauth/elements/button.html" %}
-{% load allauth %}
-{% block class %}
-    {{ block.super }}
-    w-full
-{% endblock %}

kursy/templates/allauth/elements/button_group.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<div class="flex w-full flex-col gap-2" role="group">
-    {% slot %}
-    {% endslot %}
-</div>

kursy/templates/allauth/elements/details.html

@@ -1,9 +0,0 @@
-{% load allauth %}
-<details {% if attrs.open %}open{% endif %}>
-    <summary>
-        {% slot summary %}
-        {% endslot %}
-    </summary>
-    {% slot body %}
-    {% endslot %}
-</details>

kursy/templates/allauth/elements/field.html

@@ -1,101 +0,0 @@
-{% load allauth %}
-{% if attrs.type == "checkbox" or attrs.type == "radio" %}
-    <div class="mb-3 flex items-start gap-3">
-        <input {% if attrs.required %}required{% endif %}
-               name="{{ attrs.name }}"
-               class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
-               id="{{ attrs.id }}"
-               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
-               {% if attrs.disabled %}disabled{% endif %}
-               type="{{ attrs.type }}">
-        <label class="text-sm font-medium text-slate-700" for="{{ attrs.id }}">
-            {% slot label %}
-            {% endslot %}
-        </label>
-        {% if slots.help_text %}
-            <div class="text-xs text-slate-500">
-                {% slot help_text %}
-                {% endslot %}
-            </div>
-        {% endif %}
-    </div>
-{% elif attrs.type == "textarea" %}
-    <div class="mb-3">
-        <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
-            {% slot label %}
-            {% endslot %}
-        </label>
-        <textarea {% if attrs.required %}required{% endif %}
-                  {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
-                  class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  name="{{ attrs.name }}"
-                  {% if attrs.readonly %}readonly{% endif %}
-                  id="{{ attrs.id }}"
-                  {% if attrs.disabled %}disabled{% endif %}>{% slot value %}{% endslot %}</textarea>
-    </div>
-{% elif attrs.type == "hidden" %}
-    <input {% if attrs.required %}required{% endif %}
-           name="{{ attrs.name }}"
-           id="{{ attrs.id }}"
-           {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
-           type="hidden">
-{% elif attrs.type == "select" %}
-    <div class="mb-3">
-        {% if not attrs.unlabeled %}
-            <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
-                {% slot label %}
-                {% endslot %}
-            </label>
-        {% endif %}
-        <select id="{{ attrs.id }}"
-                name="{{ attrs.name }}"
-                class="block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
-            {% for option in attrs.choices %}
-                <option {% if option.0 == attrs.value %}selected{% endif %}
-                        value="{{ option.0 }}">{{ option.1 }}</option>
-            {% endfor %}
-        </select>
-        {% if attrs.unlabeled %}
-            <label class="sr-only" for="{{ attrs.id }}">
-                {% slot label %}
-                {% endslot %}
-            </label>
-        {% endif %}
-    </div>
-{% else %}
-    <div class="mb-3">
-        {% if not attrs.unlabeled %}
-            <label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
-                {% slot label %}
-                {% endslot %}
-            </label>
-        {% endif %}
-        <input {% if attrs.required %}required{% endif %}
-               name="{{ attrs.name }}"
-               {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}" {% elif attrs.unlabeled %}placeholder="{% slot label %}{% endslot %}"{% endif %}
-               class="block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 {% if attrs.errors %}border-red-500 focus:border-red-500 focus:ring-red-500{% else %}border-slate-300 focus:border-blue-500 focus:ring-blue-500{% endif %}"
-               id="{{ attrs.id }}"
-               {% if attrs.readonly %}readonly{% endif %}
-               {% if attrs.disabled %}disabled{% endif %}
-               {% if attrs.tabindex %}tabindex="{{ attrs.tabindex }}"{% endif %}
-               {% if attrs.style %}style="{{ attrs.style }}"{% endif %}
-               {% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
-               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
-               type="{{ attrs.type }}">
-        {% if attrs.unlabeled %}
-            <label class="sr-only" for="{{ attrs.id }}">
-                {% slot label %}
-                {% endslot %}
-            </label>
-        {% endif %}
-        {% if slots.help_text %}
-            <div class="mt-1 text-xs text-slate-500">
-                {% slot help_text %}
-                {% endslot %}
-            </div>
-        {% endif %}
-        {% if attrs.errors %}
-            {% for error in attrs.errors %}<div role="alert" class="mt-1 text-xs text-red-600">{{ error }}</div>{% endfor %}
-        {% endif %}
-    </div>
-{% endif %}

kursy/templates/allauth/elements/fields.html

@@ -1,13 +0,0 @@
-{% load allauth %}
-{% for bound_field in attrs.form %}
-    {% element field unlabeled=attrs.unlabeled name=bound_field.name type=bound_field.field.widget.input_type required=bound_field.field.required value=bound_field.value id=bound_field.auto_id errors=bound_field.errors placeholder=bound_field.field.widget.attrs.placeholder tabindex=bound_field.field.widget.attrs.tabindex autocomplete=bound_field.field.widget.attrs.autocomplete style=bound_field.field.widget.attrs.style choices=bound_field.field.choices %}
-        {% slot label %}
-            {{ bound_field.label }}
-        {% endslot %}
-        {% if bound_field.field.help_text %}
-            {% slot help_text %}
-                {{ bound_field.field.help_text }}
-            {% endslot %}
-        {% endif %}
-    {% endelement %}
-{% endfor %}

kursy/templates/allauth/elements/form.html

@@ -1,14 +0,0 @@
-{% load allauth %}
-{% for err in attrs.form.non_field_errors %}<div role="alert" class="mb-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ err }}</div>{% endfor %}
-<form class="{% block form_class %}{% if not attrs.no_visible_fields %}rounded-xl border border-slate-200 bg-white shadow-sm{% endif %}{% endblock %}"
-      method="{{ attrs.method }}"
-      {% if attrs.action %}action="{{ attrs.action }}"{% endif %}>
-    {% if not attrs.no_visible_fields %}<div class="space-y-4 p-6">{% endif %}
-        {% slot body %}
-        {% endslot %}
-        {% if not attrs.no_visible_fields %}</div>{% endif %}
-    {% if not attrs.no_visible_fields %}<div class="flex flex-wrap justify-end gap-2 border-t border-slate-200 bg-slate-50 p-4">{% endif %}
-        {% slot actions %}
-        {% endslot %}
-        {% if not attrs.no_visible_fields %}</div>{% endif %}
-</form>

kursy/templates/allauth/elements/form__entrance.html

@@ -1,2 +0,0 @@
-{% extends "allauth/elements/form.html" %}
-{% block form_class %}{% endblock %}

kursy/templates/allauth/elements/h1.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<h1 class="mt-4">
-    {% slot %}
-    {% endslot %}
-</h1>

kursy/templates/allauth/elements/h1__entrance.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<h1 class="fw-bold fs-2">
-    {% slot %}
-    {% endslot %}
-</h1>

kursy/templates/allauth/elements/h2.html

@@ -1 +0,0 @@
-{% comment %} djlint:off {% endcomment %}{% load allauth %}<h2>{% slot %}{% endslot %}</h2>

kursy/templates/allauth/elements/h2__entrance.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<h2 class="fw-bold fs-5">
-    {% slot %}
-    {% endslot %}
-</h2>

kursy/templates/allauth/elements/hr.html

@@ -1 +0,0 @@
-<hr>

kursy/templates/allauth/elements/img.html

@@ -1,5 +0,0 @@
-<div class="text-center">
-    <img class="img-fluid"
-         src="{{ attrs.src }}"
-         {% if attrs.alt %}alt="{{ attrs.alt }}"{% endif %}>
-</div>

kursy/templates/allauth/elements/p.html

@@ -1 +0,0 @@
-{% comment %} djlint:off {% endcomment %}{% load allauth %}<p>{% slot %}{% endslot %}</p>

kursy/templates/allauth/elements/panel.html

@@ -1,17 +0,0 @@
-{% load allauth %}
-<div class="mb-4 rounded-xl border border-slate-200 bg-white shadow-sm">
-    <div class="p-6">
-        <h5 class="text-lg font-semibold text-slate-900">
-            {% slot title %}
-            {% endslot %}
-        </h5>
-        {% slot body %}
-        {% endslot %}
-    </div>
-    {% if slots.actions %}
-        <div class="flex flex-wrap justify-end gap-2 border-t border-slate-200 bg-slate-50 p-4">
-            {% slot actions %}
-            {% endslot %}
-        </div>
-    {% endif %}
-</div>

kursy/templates/allauth/elements/provider.html

@@ -1,6 +0,0 @@
-{% load allauth %}
-<li class="border-b border-slate-200 last:border-b-0">
-    <a class="block w-full px-4 py-3 text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-900"
-       title="{{ attrs.name }}"
-       href="{{ attrs.href }}">{{ attrs.name }}</a>
-</li>

kursy/templates/allauth/elements/provider_list.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<ul class="list-group">
-    {% slot %}
-    {% endslot %}
-</ul>

kursy/templates/allauth/elements/table.html

@@ -1,7 +0,0 @@
-{% load allauth %}
-<div class="overflow-x-auto rounded-lg border border-slate-200">
-    <table class="min-w-full divide-y divide-slate-200 text-sm">
-        {% slot %}
-        {% endslot %}
-    </table>
-</div>

kursy/templates/allauth/elements/tbody.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<tbody>
-    {% slot %}
-    {% endslot %}
-</tbody>

kursy/templates/allauth/elements/td.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<td {% if attrs.align %}align="{{ attrs.align }}"{% endif %}>
-    {% slot %}
-    {% endslot %}
-</td>

kursy/templates/allauth/elements/th.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<th>
-    {% slot %}
-    {% endslot %}
-</th>

kursy/templates/allauth/elements/thead.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<thead>
-    {% slot %}
-    {% endslot %}
-</thead>

kursy/templates/allauth/elements/tr.html

@@ -1,5 +0,0 @@
-{% load allauth %}
-<tr>
-    {% slot %}
-    {% endslot %}
-</tr>

kursy/templates/allauth/layouts/entrance.html

@@ -1,26 +0,0 @@
-{% extends "allauth/layouts/base.html" %}
-{% load i18n allauth %}
-{% block body %}
-    <div class="flex flex-grow flex-col justify-center bg-slate-100">
-        <div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-center">
-                <div class="w-full max-w-lg">
-                    {% if messages %}
-                        {% for message in messages %}
-                            {% element alert level=message.tags %}
-                                {% slot message %}
-                                    {{ message }}
-                                {% endslot %}
-                            {% endelement %}
-                        {% endfor %}
-                    {% endif %}
-                    <div class="bg-white shadow rounded-4">
-                        <div id="content" class="p-5">
-                            {% block content %}{% endblock %}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}

kursy/templates/allauth/layouts/manage.html

@@ -1,68 +0,0 @@
-{% extends "allauth/layouts/base.html" %}
-{% load allauth %}
-{% block body %}
-    <div class="flex flex-grow flex-col md:flex-row">
-        <aside class="bg-slate-900 md:w-72">
-            <ul class="flex flex-col gap-1 p-3">
-                {% url 'account_email' as email_url_ %}
-                {% if email_url_ %}
-                    <li>
-                        <a class="{% block nav_class_email %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ email_url_ }}">Change Email</a>
-                    </li>
-                {% endif %}
-                {% url 'account_change_password' as change_password_url_ %}
-                {% if change_password_url_ %}
-                    <li>
-                        <a class="{% block nav_class_password %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ change_password_url_ }}">Change Password</a>
-                    </li>
-                {% endif %}
-                {% url 'account_change_phone' as phone_url_ %}
-                {% if phone_url_ %}
-                    <li>
-                        <a class="{% block nav_class_phone %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ phone_url_ }}">Change Phone</a>
-                    </li>
-                {% endif %}
-                {% url 'socialaccount_connections' as connections_url_ %}
-                {% if connections_url_ %}
-                    <li>
-                        <a class="{% block nav_class_socialaccount %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ connections_url_ }}">Third-Party Accounts</a>
-                    </li>
-                {% endif %}
-                {% url 'mfa_index' as mfa_index_url_ %}
-                {% if mfa_index_url_ %}
-                    <li>
-                        <a class="{% block nav_class_mfa %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ mfa_index_url_ }}">Two-Factor Authentication</a>
-                    </li>
-                {% endif %}
-                {% url 'usersessions_list' as usersessions_list_url_ %}
-                {% if usersessions_list_url_ %}
-                    <li>
-                        <a class="{% block nav_class_usersessions %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
-                           href="{{ usersessions_list_url_ }}">Sessions</a>
-                    </li>
-                {% endif %}
-            </ul>
-        </aside>
-        <main class="flex-1">
-            <div id="content" class="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8">
-                {% if messages %}
-                    <div class="pt-4">
-                        {% for message in messages %}
-                            {% element alert level=message.tags %}
-                                {% slot message %}
-                                    {{ message }}
-                                {% endslot %}
-                            {% endelement %}
-                        {% endfor %}
-                    </div>
-                {% endif %}
-                {% block content %}{% endblock %}
-            </div>
-        </main>
-    </div>
-{% endblock %}

kursy/templates/base.html

@@ -1,7 +1,7 @@
-{% load static i18n wagtailcore_tags wagtailuserbar tailwind_tags %}
+{% load static i18n wagtailcore_tags wagtailuserbar tailwind_tags allauth_ui %}
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="{% allauth_ui_theme %}">
     <head>
         <meta charset="utf-8" />
         <title>
@@ -16,7 +16,8 @@
         {% if page.search_description %}
         <meta name="description" content="{{ page.search_description }}" />
         {% endif %}
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
         {# Force all links in the live preview panel to be opened in a new tab #}
         {% if request.in_preview_panel %}
@@ -25,6 +26,7 @@
 
         {# Global stylesheets #}
         <link rel="stylesheet" type="text/css" href="{% static 'css/kursy.css' %}">
+        <link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
         {% tailwind_css %}
 
         {% block extra_css %}
@@ -35,9 +37,8 @@
         {% endblock extra_head %}
     </head>
 
-    <body class="flex grow flex-col h-screen {% block body_class %}{% endblock %}">
+    <body class="flex grow flex-col min-h-screen {% block body_class %}{% endblock %}">
         {% include "header.html" %}
-        {% wagtailuserbar %}
 
         {% block body %}
             {% block content %}
@@ -52,5 +53,6 @@
         {% block extra_js %}
         {# Override this in templates to add extra javascript #}
         {% endblock %}
+        {% wagtailuserbar %}
     </body>
 </html>

kursy/templates/profile.html

@@ -4,5 +4,19 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
   <h1 class="text-3xl font-bold mb-6">{% trans "Witaj, " %}{{ user.first_name }}!</h1>
+  <p class="text-xl">Twoje kursy:</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">Nie masz jeszcze żadnych kursów. <a href="/coursesTODO" class="text-blue-500 hover:underline">Znajdź kursy</a> dla siebie!</li>
+    {% endfor %}
+  </ul>
 </div>
 {% endblock %}