package downloadView

import (
    "github.com/fossyy/filekeeper/view/client/layout"
    "github.com/fossyy/filekeeper/types"
)

templ component(title string, files []types.FileData){
    @layout.Base(title){
        <div class="dark min-h-screen p-4 sm:p-6 bg-gray-900 text-white">
            <div class="space-y-4">
               <header class="text-center">
                  <div class="space-y-2">
                     <h1 class="text-3xl font-bold tracking-tighter sm:text-4xl">Download Files</h1>
                  </div>
               </header>
               <div class="mx-auto grid w-full max-w-3xl gap-4 px-4">
                  for _, file := range files {
                       <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
                         <div class="flex space-y-4 flex-col p-4">
                            <div class="space-y-1">
                               <h2 class="text-lg font-bold tracking-wide">{ file.Name }</h2>
                               <p class="text-sm leading-none"> { file.Size }</p>
                            </div>
                            <div class="space-x-2">
                               <button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
                                  <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="24"
                                     height="24"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="2"
                                     stroke-linecap="round"
                                     stroke-linejoin="round"
                                     class="h-4 w-4"
                                     >
                                     <path d="M4 13.5V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2h-5.5"></path>
                                     <polyline points="14 2 14 8 20 8"></polyline>
                                     <path d="M10.42 12.61a2.1 2.1 0 1 1 2.97 2.97L7.95 21 4 22l.99-3.95 5.43-5.44Z"></path>
                                  </svg>
                                  <span class="sr-only">Edit</span>
                               </button>
                               <a href={ templ.SafeURL("/download/" + file.ID) } class="inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                                   <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="h-4 w-4"
                                    >
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="7 10 12 15 17 10"></polyline>
                                    <line x1="12" x2="12" y1="15" y2="3"></line>
                                   </svg>
                               </a>
                            </div>
                         </div>
                      </div>
                  }

               </div>
            </div>
        </div>
    }
}

templ Main(title string, files []types.FileData){
    @component(title, files)
}