<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>List</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            .issuu-embed-container {
                position: relative;
                padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */
                height: 0;
                overflow: hidden;
                max-width: 100%;
            }
            .issuu-embed-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="bg-white relative ">
            <div id="previewContainer" class="bg-[#313131] origin-center absolute flex flex-col scale-0 top-0 left-0 h-full w-full transition-all duration-500 z-50">
                <svg onclick="preview('{{ file.2 }}')" width="32" height="32" class="top-5 right-20 fixed top-0 bg-red-500 p-1 hover:scale-110 transition-all cursor-pointer z-50 rounded-full" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M11.293 3.293a1 1 0 1 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z"/>
                </svg>

                <iframe id="previewIframe" src="" frameborder="0" seamless="" draggable="false" loading="lazy" decoding="async" data-nimg="1" class="fixed top-0 h-[100vh] w-full z-10 rounded-sm object-cover object-center" style="color: transparent"></iframe>
            </div>
            <header class="h-20 flex m-4 justify-between items-center mb-4">
                <!-- logo - start -->
                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
                        </g>
                    </svg>
                    Cloud Storage
                </a>
                <!-- logo - end -->

                <!-- nav - start -->
                <nav class="hidden lg:flex gap-12">
                    <a href="/" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
                    <a href="/list" class="text-indigo-500 text-lg font-semibold">List</a>
                    <a href="/upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
                    <a href="/logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
                </nav>
                <!-- nav - end -->

                <!-- buttons - start -->
                <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
                    <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                        </svg>
                        Menu
                    </button>
                    <a href="../" class="mt-2 hidden bg-white rounded-t-lg px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
                    <a href="../list" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
                    <a href="../upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
                    <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
                </div>
                <!-- buttons - end -->
            </header>
            {% if back == True %}
            <button onclick="history.back()" class="bg-indigo-500 hover:bg-indigo-400 text-white mx-8 font-bold p-3 mb-3 rounded-lg inline-flex items-center">
                <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                </svg>

                <span>Back</span>
            </button>
            {% endif %}
            <div class="px-4 md:px-8 mx-auto">
                <div class="w-full overflow-y-auto p-5">
                    {% if folders|length > 0 %}
                    <div class="mb-5 flex flex-col space-y-4">
                        <h2>Folders</h2>
                        <div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
                            {% for folder in folders%}
                            <div title="{{ folder.0 }}" onclick="location.href = '{{ folder.1 }}';" class="relative flex w-64 cursor-pointer items-center justify-between rounded-xl bg-[#edf2fc] p-3 hover:bg-[#e1e5ea]">
                                <div class="flex items-center space-x-2">
                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z"></path></svg><span class="w-32 truncate text-sm font-medium text-[#444746]">{{ folder.0 }}</span>
                                </div>
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="h-6 w-6 cursor-pointer rounded-full p-1 hover:bg-[#ccc]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %} {% if files|length > 0 %}
                    <div class="mb-5 flex flex-col space-y-4">
                        <h2>Files</h2>
                        <div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
                            {% for file in files%}
                            <div class="relative">
                                <div class="flex w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-[#edf2fc] px-2.5 hover:bg-[#e1e5ea]">
                                    <div title="{{ file.0 }}" class="relative flex w-full items-center justify-between px-1 py-3">
                                        <div class="flex items-center space-x-4">
                                            <div class="h-6 w-6">
                                                <img src="{{file.3}}" class="h-full w-full text-[#CA2E24]" height="1em" width="1em"/>
                                            </div>
                                            <span class="w-48 truncate text-sm font-medium text-[#444746]">{{ file.0 }}</span>
                                        </div>
                                        <svg onclick="menuOpener(this)" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="h-6 w-6 cursor-pointer rounded-full p-1 hover:bg-[#ccc]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
                                        </svg>
                                    </div>
                                    <div onclick="preview('{{ file.2 }}')" class="flex h-44 w-80 items-center justify-center pb-2.5 cursor-pointer">
                                        <img src="https://drive.google.com/thumbnail?id={{ file.2 }}&sz=w1000" onerror="imageError(this,'{{file.3}}')" loading="lazy" class="h-full w-full rounded-sm object-cover object-center"></img>
                                    </div>
                                </div>
                                <section class="absolute top-10 right-5 scale-y-0 origin-top transition-all z-10 h-fit w-48 rounded-md border bg-white shadow-sm shadow-[#777]">
                                    <div onclick="preview('{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
                                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
                                        </svg>
                                        <span class="text-sm">Open File</span>
                                    </div>
                                    <a href="{{file.4}}" download="08.JPG" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
                                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                            <path d="M7 11l5 5l5 -5"></path>
                                            <path d="M12 4l0 12"></path>
                                        </svg>
                                        <span class="text-sm">Download</span>
                                    </a>
                                    <div onclick="renameFile(this,'{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
                                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                            <path d="M18.41 5.8L17.2 4.59c-.78-.78-2.05-.78-2.83 0l-2.68 2.68L3 15.96V20h4.04l8.74-8.74 2.63-2.63c.79-.78.79-2.05 0-2.83zM6.21 18H5v-1.21l8.66-8.66 1.21 1.21L6.21 18zM11 20l4-4h6v4H11z"></path>
                                        </svg>
                                        <span class="text-sm">Rename</span>
                                    </div>
                                    <div onclick="deleteFile(this,'{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
                                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
                                        </svg>
                                        <span class="text-sm">Move to bin</span>
                                    </div>
                                </section>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <script>
            function deleteFile(element,id) {
                element.parentNode.parentNode.remove();
                fetch("/deleteFile/", {
                    method: "POST",
                    body: JSON.stringify({ file_id: id }),
                });
            }
            function renameFile(element,id) {
                let newName = prompt("Enter new name");
                element.parentNode.parentNode.getElementsByTagName("span")[0].innerText = newName;
                element.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div")[1].setAttribute("title",newName);
                fetch("/renameFile/", {
                    method: "POST",
                    body: JSON.stringify({ file_id: id,new_name:newName }),
                });
            }
            function inB(event) {
                ass = document.getElementById("nav").getElementsByTagName("a");
                for (let i = 0; i < ass.length; i++) {
                    ass[i].classList.remove("hidden");
                }
            }
            function outB(event) {
                ass = document.getElementById("nav").getElementsByTagName("a");
                for (let i = 0; i < ass.length; i++) {
                    ass[i].classList.add("hidden");
                }
            }
            function preview(id){
                if(id !== "" && id != undefined && document.getElementById("previewIframe").src != "https://drive.google.com/file/d/"+id+"/preview"){
                    document.getElementById("previewIframe").src="https://drive.google.com/file/d/"+id+"/preview"
                }
                document.getElementById("previewContainer").classList.toggle("scale-0")
            }
            function imageError(img,icon){
                img.src=icon.replace('/32/','/128/');
                img.classList.remove('object-cover');
                img.classList.remove('h-full');
                img.classList.remove('w-full');
                img.classList.add('object-contain');
            }
            function menuOpener(btn){
                let menu = btn.parentNode.parentNode.parentNode.getElementsByTagName("section")[0];
                menu.classList.toggle("scale-y-0")
            }
        </script>
    </body>
</html>