{% extends "base.html" %}

{% block title %}{{ lesson.title }} - Marimo Learn{% endblock %}

{% block content %}
    <header class="bg-white">
        <div class="container mx-auto px-4 py-12 max-w-6xl">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
                    <a href="../" class="link-primary text-sm mb-4 inline-block">&larr; All Courses</a>
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ lesson.title }}</h1>
                    {% if lesson.description_html %}
                        <div class="text-lg text-gray-600">{{ lesson.description_html|safe }}</div>
                    {% endif %}
                </div>
                <div class="md:w-1/2">
                    <div class="logo-container">
                        <img src="{{ root_path }}assets/marimo-learn.png" alt="Marimo Logo" class="w-64 h-64 mx-auto object-contain">
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4 max-w-6xl">
            <div class="flex flex-col md:flex-row gap-8">

                <aside class="md:w-1/3">
                    <div class="content-card">
                        <div class="card-accent"></div>
                        <div class="p-6">
                            <h2 class="text-xl font-semibold mb-4">Notebooks</h2>
                            <ol class="space-y-1 list-decimal pl-5">
                                {% for notebook in lesson.notebooks %}
                                    <li>
                                        <a href="{{ notebook.molab_url }}" class="link-primary">
                                            {{ notebook.title }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ol>
                        </div>
                    </div>
                    {% if lesson.tracking %}
                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden card-shadow mt-6">
                        <div class="card-accent"></div>
                        <div class="p-6">
                            <h2 class="text-xl font-semibold mb-2">Help us improve this course</h2>
                            <p class="text-sm text-gray-600">Please visit the <a href="https://github.com/marimo-team/learn/issues/{{ lesson.tracking }}" class="link-primary">GitHub issue</a> to leave feedback or contribute.</p>
                        </div>
                    </div>
                    {% endif %}
                </aside>

                <div class="md:w-2/3 prose">
                    {{ lesson.body_html|safe }}
                    {% include "running_notebooks.html" %}
                </div>

            </div>
        </div>
    </section>
{% endblock %}