{% extends "base.html" %}

{% block head %}
    {% if query == "" %}
        <meta http-equiv="refresh" content="0; url=/" />
    {% endif %}
{% endblock %}

{% block content %}
    <div class="flex flex-col h-screen">
        <header class="flex items-center justify-between bg-white px-4 py-4 sm:px-6 lg:px-8">
            <form action="/" method="get" class="flex items-center space-x-4">
                <button tabindex="-1" type="submit" class="border-none focus:outline-none">
                    <h1 class="flex items-center text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl"><span class="text-6xl font-extrabold text-red-500"> Tag </span><span class="ml-2 text-5xl"> anrog </span></h1>
                </button>
            </form>
            <div class="mx-auto w-full max-w-xl" id="autocomplete"></div>
            <a class="border-none focus:outline-none mx-1.5" href="/tags">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#EF4444" class="h-6 w-6">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                    <g id="SVGRepo_iconCarrier"> <path d="M20 11L3 11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M11 16H3" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M14 18L17.5 15L21 18" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 6L13.5 6M20 6L17.75 6" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> </g>
                </svg>
            </a>
            <a class="border-none focus:outline-none mx-1.5" href="/upload">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF4444" class="h-6 w-6">
                    <path stroke-linecap="round" color="#EF4444" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
                </svg>
            </a>
        </header>
        <main class="flex flex-col items-center justify-center bg-white px-4 sm:px-6 lg:px-8 overflow-y-auto flex-grow">
            <div class="max-w-7xl w-full mt-6 max-h-full">
                {% for media in media_vec %}
                    <div class="rounded-md shadow-sm p-4 flex items-start space-x-4 mt-4 bg-gray-50">
                        <a href="/media/{{ media.id }}?q={{ query }}">
                            <img src="/media/{{ media.id }}/thumbnail" class="w-32 h-32 object-contain rounded-md" style="aspect-ratio:100/100;object-fit:contain;" />
                        </a>
                        <div>
                            <a href="/media/{{ media.id }}?q={{ query }}">
                                <h2 class="text-xl font-bold">{{ media.filename }}</h2>
                            </a>
                            <p class="text-gray-600">File Size: {{ media.size }} bytes</p>
                            <p class="text-gray-600">File Type: {{ media.content_type }}</p>
                            <p class="text-gray-600">Created: {{ media.created_at }}</p>
                            <div class="flex flex-wrap gap-2">
                                {% for tag in media.tags %}
                                {% if tag.is_in_query %}
                                <a href="/search?q={{ query }}%20-{{ tag.name }}" class="rounded px-2 py-1 text-sm border-4 border-black"
                                   style="background-color: {{ tag.bg_color }}; color: {{ tag.fg_color }};"
                                >#{{ tag.name }}</a>
                                {% else %}
                                <a href="/search?q={{ query }}%20{{ tag.name }}" class="rounded px-2 py-1 text-sm"
                                   style="background-color: {{ tag.bg_color }}; color: {{ tag.fg_color }};"
                                >#{{ tag.name }}</a>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </main>
        <footer class="w-full h-20 flex items-center justify-center bg-white">
            <div class="fixed bottom-1 right-1 text-gray-600">{{ time_elapsed_ms }} ms</div>
            <div class="flex justify-center mt-4">
                {% if min_page_navigation > 1 %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p=1">
                    1
                </a>
                {% endif %}
                {% if has_pages_before %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p={{ min_page_navigation }}">
                    ...
                </a>
                {% endif %}
                {% for page in page_navigation %}
                {% if self.is_current_page(page) %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm !font-bold ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p={{ page }}">
                    {{ page }}
                </a>
                {% else %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p={{ page }}">
                    {{ page }}
                </a>
                {% endif %}
                {% endfor %}
                {% if has_pages_after %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p={{ max_page_navigation }}">
                    ...
                </a>
                {% endif %}
                {% if max_page_navigation < max_page_number %}
                <a class="mx-1 my-3 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-gray-100 hover:bg-gray-200 transition-colors text-black"
                   href="/search?q={{ query }}&p={{ max_page_number }}">
                    {{ max_page_number }}
                </a>
                {% endif %}
            </div>
        </footer>
        {% include "algolia_autocomplete.html" %}
    </div>
{% endblock %}