{% extends "base.html" %}

{% block head %}
    <script src="/scripts/jquery.min.js"></script>
    {% if query == "" %}
        <meta http-equiv="refresh" content="0; url=/" />
    {% endif %}
{% endblock %}

{% block content %}
    <div class="flex flex-col h-screen">
        {% include "default_header.html" %}
        <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" id="search-results">
                {% 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 }}&p={{ current_page_number }}">
                            <img src="{{ media.thumbnail_location_url }}" 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 }}&p={{ current_page_number }}">
                                <h2 class="text-xl font-bold">{{ media.filename }}</h2>
                            </a>
                            <p class="text-gray-600">File Size: {{ media.human_size }}</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 }}&p=1" 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 }}&p=1" 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 "search_autocomplete.html" %}
    </div>
    <script>
        function getTotalHeight(element) {
            const style = window.getComputedStyle(element);

            const marginTop = parseFloat(style.marginTop);
            const marginBottom = parseFloat(style.marginBottom);
            const borderTop = parseFloat(style.borderTopWidth);
            const borderBottom = parseFloat(style.borderBottomWidth);
            const offsetHeight = element.offsetHeight; // Includes padding

            return offsetHeight + marginTop + marginBottom + borderTop + borderBottom;
        }

        function optimizePageSize() {
            const windowWidth = $(window).width();
            const windowHeight = $(window).height();
            console.log("Window size: " + windowWidth + "x" + windowHeight);

            const searchResults = document.getElementById("search-results");
            const childCount = searchResults.children.length;
            if (childCount === 0) {
                return;
            }

            const firstChild = searchResults.firstElementChild;
            const itemHeight = getTotalHeight(firstChild);

            const header = document.querySelector("header");
            const headerHeight = header ? getTotalHeight(header) : 0;

            const footer = document.querySelector("footer");
            const footerHeight = footer ? getTotalHeight(footer) : 0;

            const urlParams = new URLSearchParams(window.location.search);
            const pageNumber = urlParams.get('p');
            const pageSize = Number(urlParams.get('ps')) || 3;
            console.log("Page size: " + pageSize);

            const newPageSize = Math.max(1, Math.floor((windowHeight - headerHeight - footerHeight) / itemHeight));
            console.log("New page size: " + newPageSize);
            if (pageSize === newPageSize) {
                return;
            }

            const newPageNumber = Math.floor((pageNumber - 1) * pageSize / newPageSize) + 1;
            console.log("New page number: " + newPageNumber);
            window.location.href = window.location.pathname + "?q=" + urlParams.get('q') + "&p=" + newPageNumber + "&ps=" + newPageSize;
        }

        $(window).resize(function() {
            clearTimeout(window.resizedFinished);
            window.resizedFinished = setTimeout(function(){
                optimizePageSize();
            }, 250);
        });

        optimizePageSize();
    </script>
{% endblock %}