<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>{{ name }} - Web App Store</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Discover the apps of the web!">
    <base href="/">
    <link href="static/output.css" rel="stylesheet">
</head>

<body>
    <nav>
        <a href="/apps"
            class="rounded-full block px-2.5 py-1 text-xs font-semibold text-indigo-600 hover:text-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            <svg class="w-16 h-16" stroke-width="1.5" stroke="currentColor" fill="none" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
            </svg>
        </a>
    </nav>
    <main class="mx-auto px-4 sm:px-6 lg:px-8">
        <article class="mx-auto max-w-7xl space-y-4">
            <header class="flex flex-wrap gap-4">
                <img class="inline w-40" src="{{ source }}">
                <div class="flex flex-col justify-between">
                    <div>
                        <h1 class="text-7xl font-bold text-slate-900">
                            {{ name }}
                        </h1>
                        <p class="text-slate-400">
                            by {{ id }}
                        </p>
                    </div>
                    <a href="{{ start_url }}" target="_blank"
                        class="rounded-3xl text-center w-full max-w-sm self-end bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                        Open
                    </a>
                </div>
            </header>
            <section class="overflow-y-scroll flex gap-4 max-h snap-x">
                {% for screenshot in screenshots %}
                <img class="rounded-3xl max-h-96 snap-start" src="{{ screenshot.source }}">
                {% endfor %}
            </section>
            {% if description %}
            <section>
                <h2 class="text-2xl font-semibold text-slate-900 leading-loose">Description</h2>
                <p class="text-lg text-slate-800 font-normal">{{ description }}</p>
            </section>
            {% endif %}
            {% if categories %}
            <section>
                <h2 class="text-2xl font-semibold text-slate-900 leading-loose">Categories</h2>

                <ul class="space-x-4">
                    {% for category in categories %}
                    <li class="inline">
                        {# <a href="/categories/{{ category }}"
                            class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                            {{ category }}
                        </a> #}
                        <div
                            class="rounded-full inline bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                            {{ category }}
                        </div>
                    </li>
                    {% endfor %}
                </ul>

            </section>
            {% endif %}

        </article>
    </main>

</body>

</html>