{% extends 'admin/base_site.html' %}
{% load static i18n %}
{% block title %}{% trans 'Django Log Inspector' %} - {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs" x-data>
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
        <a href="{% url 'log_inspector:home' %}">
            {% if custom_title %}
                {{ custom_title }}
            {% else %}
                {% trans 'Django Log Inspector' %}
            {% endif %}
        </a>
        <i class="fa-solid fa-sun float-right focus:outline-none cursor-pointer text-2xl"
           x-show="$store.darkMode.on"
           @click="$store.darkMode.toggle()">
        </i>
        <i class="fa-solid fa-moon float-right focus:outline-none cursor-pointer text-2xl"
           x-show="!$store.darkMode.on"
           @click="$store.darkMode.toggle()">
        </i>
    </div>
{% endblock %}

{% block dark-mode-vars %}
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'log_inspector/css/output.css' %}">

    {% if custom_style_file %}
        <link type="text/css" href="{{ custom_style_file }}" rel="stylesheet">
    {% endif %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="{% static 'log_inspector/js/htmx.min.js' %}" defer></script>
    <script src="{% static 'log_inspector/js/alpinejs.min.js' %}" defer></script>
    <script src="https://kit.fontawesome.com/7773a61110.js" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
    <div class="loading-spinner" id="spinner">
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <div x-data="{ live: false, isFileSelected: false }" class="p-4 mx-auto">
        <div class="flex">
            <div class="flex-none w-9/12 bg-white shadow-md p-6 dark:bg-slate-800">
                <div class="mb-6">
                    <h1 id="log-entries-title"
                        class="text-3xl font-bold text-black dark:text-white">
                        {% trans 'Django Log Inspector' %}
                    </h1>
                </div>

                <div>
                    <button id="live-button"
                            class="bg-blue-500 text-white px-4 py-2 rounded dark:bg-blue-700"
                            hx-target="#log-entries-table"
                            hx-trigger="click"
                            hx-swap="outerHTML"
                            @click="live = !live"
                            x-show="!live && isFileSelected">
                        {% trans 'Live' %}
                    </button>
                    <button id="stop-button"
                            class="bg-red-500 text-white px-4 py-2 rounded dark:bg-red-700"
                            hx-target="#log-entries-table"
                            hx-trigger="click"
                            hx-swap="outerHTML"
                            @click="live = !live"
                            x-show="live && isFileSelected">
                        {% trans 'Stop' %}
                    </button>
                    <a id="download-link">
                        <button id="download-button"
                                class="bg-green-500 text-white px-4 py-2 mx-2 rounded dark:bg-green-700"
                                x-show="isFileSelected">
                            {% trans 'Download' %}
                        </button>
                    </a>
                    <input id="search-box"
                           class="py-2 px-4 mt-1 border-2 border-gray-300 rounded-md focus:outline-none
                            focus:border-blue-500 transition duration-300 box-border h-10 w-2/5 float-right
                            dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           type="search"
                           name="search"
                           placeholder="{% trans 'Search...' %}"
                           hx-target="#log-entries-table"
                           hx-trigger="input changed delay:300ms, search"
                           hx-swap="outerHTML"
                           x-show="!live && isFileSelected">
                </div>

                <table id="log-entries-table"
                       class="mt-6 w-full border-collapse dark:bg-slate-800">
                    <thead>
                    <tr>
                        <th scope="col"
                            class="border p-2 dark:border-gray-700 dark:bg-slate-700 dark:text-white dark:border-gray-700">
                            {% trans 'No.' %}
                        </th>
                        <th scope="col"
                            class="border p-2 dark:border-gray-700 dark:bg-slate-700 dark:text-white dark:border-gray-700">
                            {% trans 'Log entries' %}
                        </th>
                    </tr>
                    </thead>

                    <tbody id="log-entries-data">
                    <tr>
                        <td colspan="2"
                            class="border p-2 hover:bg-gray-100 dark:hover:bg-gray-500 dark:bg-slate-700 dark:border-gray-700 dark:text-white">
                            {% trans 'No entries!' %}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="flex-none w-3/12 ml-6 bg-white shadow-md p-6 dark:bg-slate-800">
                <h2 class="pl-1 pr-2 py-3 text-2xl font-bold text-black dark:text-white">
                    {% trans 'Log Files' %}
                </h2>
                <input class="w-full py-2 px-4 border-2 border-gray-300 rounded-md focus:outline-none
                              focus:border-blue-500 transition duration-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                       type="search"
                       name="search"
                       placeholder="{% trans 'Search...' %}"
                       hx-get="{% url 'log_inspector:log_files' %}"
                       hx-trigger="input changed delay:300ms, search"
                       hx-target="#log-files-data"
                       hx-swap="outerHTML">

                <table id="log-files-table"
                       class="w-full border-collapse mt-2 dark:bg-slate-800"
                       hx-get="{% url 'log_inspector:log_files' %}"
                       hx-trigger="load"
                       hx-target="#log-files-data"
                       hx-swap="outerHTML">
                    <tbody id="log-files-data">
                    <tr>
                        <td colspan="2"
                            class="p-2 hover:bg-gray-100 dark:hover:bg-gray-500 dark:bg-slate-700 dark:border-gray-100/50 dark:text-white">
                            {% trans 'No entries!' %}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        const elements = document.querySelectorAll('.content');
        elements.forEach((element) => {
            element.classList.add('bg-white')
            element.classList.add('dark:bg-slate-800')
        })

        document.addEventListener('alpine:init', () => {
            Alpine.store('darkMode', {
                on: window.matchMedia('(prefers-color-scheme: dark)').matches,

                init() {
                    document.documentElement.classList.toggle('dark', this.on);
                },

                toggle() {
                    this.on = !this.on;
                    document.documentElement.classList.toggle('dark', this.on);
                }
            })
        })

        document.addEventListener('htmx:configRequest', function (event) {
            const spinner = document.getElementById('spinner');
            if (event.detail.headers['X-ACTION'] === 'LIVE') {
                spinner.style.display = 'none';
            } else {
                spinner.style.display = 'flex';
            }
        });

        document.addEventListener('htmx:afterRequest', function (event) {
            const spinner = document.getElementById('spinner');
            spinner.style.display = 'none';
        })

        function updateFileName(event) {
            const td = event.target;
            const fileName = td.textContent.trim();

            const liveButton = document.getElementById('live-button');
            const stopButton = document.getElementById('stop-button');
            const searchBox = document.getElementById('search-box');
            const downloadLink = document.getElementById('download-link');
            const logEntriesTitle = document.getElementById('log-entries-title')
            liveButton.setAttribute('hx-get', `/logs/start-live/${fileName}/`)
            stopButton.setAttribute('hx-get', `/logs/log-entries/${fileName}/`)
            searchBox.setAttribute('hx-get', `/logs/log-entries/${fileName}/`)
            downloadLink.setAttribute('href', `/logs/download/${fileName}/`)
            logEntriesTitle.innerText = fileName

            htmx.process(document.body)
        }

        function copyText(event) {
            const logEntryDiv = event.target.parentNode.previousElementSibling
            const textToCopy = logEntryDiv.textContent.trim();

            navigator.clipboard.writeText(textToCopy);

            Alpine.store('copiedValue', textToCopy);
        }
    </script>
{% endblock %}