<!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">
    <meta name="description" content="Discover the apps of the web!">
    <base href="/">
    <link href="static/output.css" rel="stylesheet">
</head>

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

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


        {% if not is_delete %}
        <a href="/apps/delete" class="h-10 w-10 p-2 text-slate-500">
            <svg fill="none" stroke="currentColor" 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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
                </path>
            </svg>
        </a>
        {% else %}
        <a href="/apps" class="h-10 w-10 p-2 text-slate-500">
            <svg fill="none" stroke="currentColor" 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="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </a>


        {% endif %}

    </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">
                {% if is_delete %}
                <a href="apps/delete/{{ app['id']}}"
                    class="absolute -top-4 -right-4 p-2 rounded-full bg-red-600 text-slate-50 w-10 h-10">
                    <svg fill="none" stroke="currentColor" 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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </a>
                {% endif %}
                <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>


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



                </section>

                {% if not is_delete %}
                <a href="apps/{{ app['id'] }}" class="absolute inset-0 focus:outline-none ">
                    <span class="sr-only">View details for {{ app["name"] }} </span>
                </a>
                {% endif %}
            </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>