<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hot-diagnose</title>
    <!--  tailwindcss + daisyui  -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.8.3/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="index.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
</head>
<body>
    <div class="flex flex-row">
        <div class="basis-1/12"></div>
        <div class="basis-10/12">
            <div class="card w-full bg-base-100 shadow-sm sticky top-0 z-50">
                <div class="card-body">
                    <h1 class="card-title">Hot Diagnose</h1>
                    <div class="card-actions justify-start">
                        <button id="control" class="btn btn-sm">
                            START
                        </button>
                        <button id="stop" class="btn btn-sm" disabled="disabled">
                            STOP
                        </button>
                        <button id="speed_down" class="btn btn-sm" onclick="window.ctrl.speed_down()">
                            <<
                        </button>
                        <button id="speed_up" class="btn btn-sm" onclick="window.ctrl.speed_up()">
                            >>
                        </button>
                    </div>
                </div>
            </div>
            <br>
            <br>

            {% if Directories %}
            <script type="application/javascript">
                window.is_directory = true
            </script>
            {# XXX: Pick the first Directory in the list for init showing directory #}
            <div class="main_dir px-8">
                <div class="font-sans text-lg text-gray-800 inline">{{Directories.0.basename}}</div>
                <br>
                <br>
                <div class="border-2 rounded">
                    <table class="table">
                    <tbody>
                        <tr class="font-bold">
                            <td class="px-4 py-2">filename</td>
                            <td class="px-4 py-2">size</td>
                            <td class="px-4 py-2">last modified</td>
                        </tr>
                    {% for content in Directories.0.files_or_directories %}
                    <tr class="hover:bg-red-50">
                        <td class="px-4 py-2">
                            <a href="#" onclick="show('{{content.__hash__}}')">
                                {% if content|is_file %}
                                &#128462;&nbsp;
                                {% else %}
                                &#128448;&nbsp;
                                {% endif %}
                                {{content.basename}}</a>
                        </td>
                        <td class="px-4 py-2">{{content.size}}</td>
                        <td class="px-4 py-2">{{content.last_modified}}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </div>
            </div>
            {% for d in Directories%}
            <div class="{{d.__hash__}} invisible px-8">
                <div class="font-sans text-lg text-gray-800 inline">{{d.basename}}</div>
                <button class="btn btn-sm inline" onclick="back()">&#8634;</button>
                <br>
                <br>
                <div class="border-2 rounded">
                    <table class="table">
                        <tbody>
                            <tr class="font-bold">
                                <td class="px-4 py-2">filename</td>
                                <td class="px-4 py-2">size</td>
                                <td class="px-4 py-2">last modified</td>
                            </tr>
                            <tr class="hover:bg-red-50">
                                <td class="px-4 py-2">
                                    <a href="#" onclick="back()">..</a>
                                </td>
                                <td></td>
                                <td></td>
                            </tr>
                    {% for content in d.files_or_directories %}
                        <tr class="hover:bg-red-50">
                            <td class="px-4 py-2">
                                <a href="#" onclick="show('{{content.__hash__}}')">
                                {% if content|is_file %}
                                &#128462;&nbsp;
                                {% else %}
                                &#128448;&nbsp;
                                {% endif %}
                                {{content.basename}}</a>
                            </td>
                            <td class="px-4 py-2">{{content.size}}</td>
                            <td class="px-4 py-2">{{content.last_modified}}</td>
                        </tr>
                    {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endfor %}
            {% for f in Files %}
            <div class="{{f.__hash__}} invisible px-8">
                <div class="font-sans text-lg text-gray-800 inline">{{f.basename}}</div>
                <button class="btn btn-sm inline" onclick="back()">&#8634;</button>
                <br>
                <br>
                <code>
                    <div class="border-2 rounded">
                        <table class="table leading-[0.5rem]">
                        <tbody>
                        {% for l in f.lines %}
                            <tr class="{{l.__hash__}} border-0" style="background-color: rgb(255, 255, 255)">
                                <td>{{l.lineno}}:{{l.content|escape}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        </table>
                    </div>
                </code>
            </div>
            {% endfor %}
            <script type="application/javascript">

                window.showing = "main_dir"
                window.lastshowing = ["main_dir"]

                let show = (classname) => {
                    window.lastshowing.push(window.showing)
                    let lastEl = document.getElementsByClassName(window.showing)[0]
                    lastEl.classList.add("invisible")

                    window.showing = classname
                    let currEl = document.getElementsByClassName(window.showing)[0]
                    currEl.classList.remove("invisible")
                }

                let back = () => {
                    let lastEl = document.getElementsByClassName(window.showing)[0]
                    lastEl.classList.add("invisible")

                    let currshowing = window.lastshowing.pop()
                    window.showing = currshowing
                    let currEl = document.getElementsByClassName(currshowing)[0]
                    currEl.classList.remove("invisible")
                }
            </script>
            {% else %}
                {% for f in Files %}
                    <div class="{{f.__hash__}} px-8">
                        <div class="font-sans text-lg text-gray-800 inline">{{f.basename}}</div>
                        <br>
                        <br>
                        <code>
                            <div class="border-2 rounded">
                                <table class="table leading-[0.5rem]">
                                    <tbody>
                                    {% for l in f.lines %}
                                        <tr class="{{l.__hash__}} border-0" style="background-color: rgb(255, 255, 255)">
                                            <td>{{l.lineno}}:{{l.content|escape}}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </code>
                    </div>
                {% endfor %}
            {% endif %}

        </div>
        <div class="basis-1/12"></div>
    </div>
<script src="control.js"></script>
</body>
</html>