{% extends "django_fundamentals/layouts/app.html" %}

{% block head_title %}Home · {{ block.super }}{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-semibold tracking-tight text-ink">Welcome</h1>
    <p class="mt-2 max-w-content text-sm leading-relaxed text-muted">
        This project is built on
        <a href="https://github.com/thespacedoctor/django-fundamentals" class="rounded text-brand hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand">django-fundamentals</a>.
        The routes below are wired up already — replace this page by adding your
        own <code class="rounded bg-sunken px-1 py-0.5 font-mono text-xs">path("", ...)</code>
        or by overriding
        <code class="rounded bg-sunken px-1 py-0.5 font-mono text-xs">templates/django_fundamentals/home.html</code>.
    </p>
</div>

<div class="overflow-hidden rounded-lg border border-line">
    <table class="w-full text-left text-sm">
        <thead class="bg-sunken text-xs uppercase tracking-wider text-muted">
            <tr>
                <th class="px-4 py-2.5 font-medium">URL</th>
                <th class="px-4 py-2.5 font-medium">Description</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-line">
            {% for url in homepage_urls %}
            <tr class="hover:bg-raised">
                <td class="whitespace-nowrap px-4 py-2.5">
                    <a href="{{ url.path }}" class="rounded font-mono text-xs text-brand hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand">{{ url.path }}</a>
                </td>
                <td class="px-4 py-2.5 text-muted">{{ url.description }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}