package uploadView

import "github.com/fossyy/filekeeper/view/client/layout"

templ content(title string) {
    @layout.BaseAuth(title){
        <div class="flex items-center min-h-screen p-4 sm:p-6 bg-gray-900 text-white">
            <div class="mx-auto w-full max-w-md space-y-8">
                <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md" data-v0-t="card">
                    <div class="flex flex-col space-y-1.5 p-4">
                        <div class="flex items-center justify-center w-full">
                            <label for="dropzone-file"
                                class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                    <svg class="w-8 h-8 mb-4 text-gray-400" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
                                    </svg>
                                    <p class="mb-2 text-sm text-gray-400 font-semibold">Click to upload or drag and drop</p>
                                </div>
                                <input id="dropzone-file" type="file" class="hidden" />
                            </label>
                        </div>
                        <div>
                            <div hidden>
                                <div class="flex items-center gap-x-3 whitespace-nowrap">
                                  <div id="progress-fake" class="flex w-full h-2 rounded-full overflow-hidden bg-gray-700"
                                    role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    <div id="progress-fake"
                                      class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500">
                                    </div>
                                  </div>
                                  <div class="w-6 text-end">
                                    <span id="progress-fake" class="text-sm text-white">Starting...</span>
                                  </div>
                                </div>
                            </div>
                            <div id="container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            document.addEventListener("dragover", function (event) {
                event.preventDefault();
            });

            document.addEventListener("drop", async function (event) {
                event.preventDefault();
                const file = event.dataTransfer.files[0]
                await handleFile(file)
            });

            document.getElementById('dropzone-file').addEventListener('change', async function(event) {
                event.preventDefault();
                const file = event.target.files[0]
                await handleFile(file)
            });
        </script>
    }
}

templ Main(title string) {
    @content(title)
}