<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kurse — IIL Learn Hub</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #e2e8f0;
            min-height: 100vh;
        }
        .header {
            padding: 2rem;
            text-align: center;
            border-bottom: 1px solid #334155;
        }
        .header h1 {
            font-size: 2rem;
            background: linear-gradient(90deg, #38bdf8, #818cf8);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .header p { color: #94a3b8; margin-top: 0.5rem; }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 2rem;
        }
        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .course-card {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 0.75rem;
            padding: 1.5rem;
            transition: transform 0.15s, border-color 0.15s;
        }
        .course-card:hover {
            transform: translateY(-3px);
            border-color: #3b82f6;
        }
        a.course-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .course-card h2 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #f1f5f9;
        }
        .course-card p {
            font-size: 0.9rem;
            color: #94a3b8;
            line-height: 1.5;
        }
        .badge {
            display: inline-block;
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
            border-radius: 999px;
            background: #334155;
            color: #94a3b8;
            margin-top: 0.75rem;
        }
        .empty {
            text-align: center;
            padding: 4rem 2rem;
            color: #64748b;
        }
        .empty h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #94a3b8; }
        .back-link {
            display: inline-block;
            margin-top: 1rem;
            color: #3b82f6;
            text-decoration: none;
        }
        .back-link:hover { text-decoration: underline; }
        .nav { padding: 1rem 2rem; }
        .nav a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; }
        .nav a:hover { color: #e2e8f0; }
    </style>
</head>
<body>
    <div class="nav"><a href="/">&larr; Startseite</a></div>
    <div class="header">
        <h1>Kurse</h1>
        <p>Verfügbare Lernkurse</p>
    </div>
    <div class="container">
        {% if courses %}
        <div class="course-grid">
            {% for course in courses %}
            <a href="{% url 'iil_learnfw:course-detail' course.slug %}" class="course-card-link">
            <div class="course-card">
                <h2>{{ course.title }}</h2>
                {% if course.description %}
                <p>{{ course.description|truncatewords:30 }}</p>
                {% endif %}
                {% if course.estimated_duration_minutes %}
                <span class="badge">{{ course.estimated_duration_minutes }} Min.</span>
                {% endif %}
                {% if course.category %}
                <span class="badge">{{ course.category.name }}</span>
                {% endif %}
            </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty">
            <h2>Noch keine Kurse</h2>
            <p>Es sind noch keine Kurse veröffentlicht.</p>
            <a href="/" class="back-link">Zurück zur Startseite</a>
        </div>
        {% endif %}
    </div>
</body>
</html>
