{% extends "base.html" %}

{% 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="h-screen flex flex-col items-center justify-center bg-white px-4 sm:px-6 lg:px-8">
            {% if media_exists %}
            <div id="media-main" class="max-w-fit w-full mt-6 flex h-3/4">
                <div class="flex-1">
                    {% if media.is_image %}
                        <img class="w-full h-full object-cover rounded-md focus:outline-none" src="/media/{{ media.id }}/stream" style="aspect-ratio:16/9;object-fit:contain;" />
                    {% else %}
                        <video id="media-player" preload="auto" autoplay="autoplay" loop="loop"
                                controls
                                class="w-full h-full object-cover rounded-md focus:outline-none"
                                src="/media/{{ media.id }}/stream"
                                style="aspect-ratio:16/9;object-fit:contain;"
                        ></video>
                    {% endif %}
                </div>
                <div class="w-96 p-4 bg-gray-100 rounded-md ml-4 flex flex-col justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-2">File Info</h2>
                        <ul>
                            <li class="mb-2">
                                <strong>Name:</strong>
                                <span class="break-all"> {{ media.filename }}</span>
                            </li>
                            <li class="mb-2">
                                <strong>Hash:</strong>
                                <span class="break-all"> {{ media.id }}</span>
                            </li>
                            <li class="mb-2">
                                <strong>Type:</strong>
                                <span class="break-all"> {{ media.content_type }}</span>
                            </li>
                            <li class="mb-2">
                                <strong>Date:</strong>
                                <span class="break-all"> {{ media.created_at }}</span>
                            </li>
                        </ul>
                        <h2 class="text-2xl font-bold mb-2">Tags</h2>
                        <ul>
                            <div id="tag-adder"
                                 hx-get="/media/{{ media.id }}/add-tag?q={{ query }}"
                                 hx-vals="js:{tags: document.querySelector('#tag-search .aa-Input').value}"
                                 hx-trigger="click"
                                 hx-target="#next-tag-stub"
                                 hx-swap="outerHTML">
                                <input type="hidden" value="" name="tag">
                            </div>
                            {% for tag in media.tags %}
                                <li id="li-{{ tag.name }}" class="rounded px-2 py-1 mb-2 flex justify-between items-center"
                                    style="background-color: {{ tag.bg_color }}; color: {{ tag.fg_color }};"
                                >
                                    <a href="/search?q={{ tag.name }}">#{{ tag.name }}</a>
                                    <span class="cursor-pointer hover:text-red-500"
                                        hx-delete="/media/{{ media.id }}/remove-tag?tags={{ tag.name }}"
                                        hx-trigger="click"
                                        hx-target="#li-{{ tag.name }}"
                                        hx-swap="outerHTML">X</span>
                                </li>
                            {% endfor %}
                            <div id="next-tag-stub"></div>
                        </ul>
                        <div class="mt-4">
                            <div class="rounded-md shadow-sm">
                                <div>
                                    <label class="sr-only" for="tag-search">
                                        Search Tags
                                    </label>
                                    <div class="mx-auto w-full" id="tag-search"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-red-600 text-white hover:bg-red-700 h-10 px-4 py-2 w-full"
                                hx-delete="/media/{{ media.id }}" hx-trigger="click" hx-confirm="Are you sure you wish to delete this media?" hx-target="#media-main" hx-swap="outerHTML" >
                            Delete media
                        </button>
                    </div>
                </div>
            </div>
            {% endif %}
        </main>
        <footer class="w-full h-20 flex items-center justify-center bg-white">
            <div class="text-center"><a class="text-gray-600" href="/media/random">Charting digital depths, from Alferaki to Faina</a></div>
        </footer>
        {% include "algolia_autocomplete.html" %}
        <script>
            document.body.addEventListener('htmx:afterRequest', function(event) {
                if (event.detail.elt.id === 'tag-adder') {
                    document.querySelector('#tag-search .aa-Input').value = '';
                    document.querySelector('#tag-search .aa-Input').focus();
                    document.querySelector('#tag-search .aa-Input').value = '';
                }
            });

            window.addEventListener('DOMContentLoaded', () => {
                const video = document.getElementById('media-player');
                video.focus();
                // Attempt to play the video automatically
                video.play().catch(error => console.error("Auto-play was prevented by the browser."));
            });

            autocomplete({
                container: '#tag-search',
                getSources({ query }) {
                    return [
                        {
                            sourceId: 'tag-search',
                            getItems() {
                                return fetch(`/tags/autocomplete?q=${encodeURIComponent(query)}`)
                                    .then((response) => response.json())
                                    .then((data) => {
                                        return data.map((item) => {
                                            return {
                                                ...item,
                                                suggestion: item.suggestion,
                                                _highlightResult: {
                                                    highlighted_suggestion: {
                                                        value: item.highlighted_suggestion
                                                            .replace(/<mark>/g, '__aa-highlight__')
                                                            .replace(/<\/mark>/g, '__/aa-highlight__')
                                                    },
                                                },
                                            };
                                        });
                                    });
                            },
                            onSelect({ item }) {
                                document.querySelector('#tag-adder').click();
                                document.querySelector('#tag-search .aa-Input').value = '';
                            },
                            getItemInputValue: ({ item }) => item.suggestion,
                            templates: {
                                item({ item, components, html }) {
                                    return html`<div className="aa-ItemWrapper">
                                  <div className="aa-ItemContent">
                                    <div className="aa-ItemContentBody">
                                      <div className="aa-ItemContentTitle">
                                        ${components.Highlight({ hit: item, attribute: 'highlighted_suggestion' })}
                                      </div>
                                    </div>
                                  </div>
                                </div>`
                                },
                            },
                        },
                    ];
                },
                onSubmit({ state }) {
                    if (state.query) {
                        document.querySelector('#tag-adder').click();
                        document.querySelector('#tag-search .aa-Input').value = '';
                    }
                },
            });
        </script>
    </div>
{% endblock %}