package web

import (
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/card"
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/button"
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/input"
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/form"
	"git.jmbit.de/jmb/scanfile/server/internal/sqlc"
	"fmt"
)

templ Index(files []sqlc.File) {
  @Base("Scanfile") {

  <div class="grid grid-cols-2 gap-4">
  <div class="w-full max-w-sm">
    @UploadCard()
  </div>
  <div class="grow">
    @FileList(files)
  </div>
  </div>

  }
}

templ UploadCard() {
    @card.Card(card.Props{ID: "upload-card"}) {
      @card.Header() {
        @card.Title() {
          Upload File
        }
      }
      @card.Content() {
        <form class="flex flex-col gap-4" hx-encoding='multipart/form-data' hx-post='/upload' hx-target="#upload-card">

        @form.Item() {
					<div class="w-full max-w-sm grid gap-2">
						@form.Label(form.LabelProps{
							For: "file",
						}) {
							File
						}
						@input.Input(input.Props{
							ID:          "file",
              Name:        "file",
              Type: input.TypeFile,
						})
					</div>
        }
        @form.Item() {
          @button.Button(button.Props{Type: button.TypeSubmit}) {
            Submit
          }
        }
        </form>
      }
    }
}

templ UploadSuccessCard(file sqlc.File) {
    @card.Card(card.Props{ID: "upload-card"}) {
      @card.Header() {
        @card.Title() {
          Upload Successful
        }
        @card.Description() {
          Name: { file.Name }
        }
      }

      @card.Content() {
        <div class="flex flex-col gap-4" hx-encoding='multipart/form-data' hx-post='/upload'>
        <p>  ID:   { file.ID.String()     } </p>
        <p>  Size: { file.Size } Bytes</p>

          @button.Button(button.Props{Type: button.TypeButton, Href: fmt.Sprintf("/files/%s", file.ID.String())}) {
            Go to file
        }
        </div>
      }
    }
}