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

<head>
    <meta charset="utf-8">
    <title> Apps - Web App Store</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ url_for('static', path='/output.css') }}" rel="stylesheet">
</head>

<body class="bg-slate-50">
    <header class="p-8">

        <h1 class="text-4xl font-bold leading-7 text-slate-900 sm:truncate sm:text-5xl sm:tracking-tight">Apps
        </h1>

    </header>

    <main class="p-8">
        <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 ">
            {% for app in apps %}
            {# Remember to repeat with add item #}
            <li class="relative bg-slate-100 rounded-2xl group hover:opacity-75 shadow-md">
                <section class="block aspect-square overflow-hidden rounded-xl bg-slate-200 focus-within:ring-2 shadow
                           focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-slate-100">
                    <img src="{{ app['icon_url'] }}" alt="App icon for {{ app['name'] }}"
                        class="pointer-events-none w-full h-full object-center group-hover:opacity-75">

                </section>
                <section class="px-4 pt-2">
                    <p class="pointer-events-none block text-xs font-normal text-slate-500 leading-relaxed">
                        {% for category in app["categories"] %}
                        <span class="capitalize">
                            {{ category }}
                        </span>
                        {% if loop.length > 1 and loop.index != loop.length %}
                        ·
                        {% endif %}
                        {% endfor %}
                    </p>
                </section>
                <section class="px-4 pb-4">


                    <h2 class="pointer-events-none block truncate text-base font-normal text-slate-900">
                        {{
                        app["name"]
                        }}
                    </h2>


                    <p class="pointer-events-none block text-sm font-normal text-slate-500">{{
                        app["description"] }}</p>



                </section>
                <a href="apps/{{ app['id'] }}" class="absolute inset-0 focus:outline-none ">
                    <span class="sr-only">View details for {{ app["name"] }} </span>
                </a>
            </li>
            {% endfor %}
            <li class="relative bg-slate-100 rounded-2xl group hover:opacity-75 shadow-md ">
                <section class="block aspect-square overflow-hidden rounded-xl bg-slate-200 focus-within:ring-2 shadow
                           focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-slate-100">
                    <svg class="fill-none stroke-slate-300 pointer-events-none w-full h-full object-center group-hover:opacity-75"
                        fill="none" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <!-- <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6"></path> -->
                        <path stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
                    </svg>
                    <!-- <img src="" alt="" class="pointer-events-none w-full h-full object-center group-hover:opacity-75"> -->

                </section>
                <section class="p-4">

                    <h2 class="pointer-events-none block truncate text-base font-normal text-slate-900 ">
                        Add new App
                    </h2>

                    <p class="pointer-events-none block text-sm font-normal text-slate-500">Add an
                        app from its web manifest url</p>
                </section>
                <a href="apps/new" class="absolute inset-0 focus:outline-none ">
                    <span class="sr-only">Add new App</span>
                </a>
            </li>
        </ul>
    </main>

</body>

</html>