{{ template "headers.html" . }}

<div class="container py-20">
	<div id="PMDocCreator" class="rounded-md shadow-md">
		<form class="space-y-6" up-target="form" method="post" action="/bin/doc/edit/{{ .UID }}"  enctype="multipart/form-data">
	
		<!-- Tabs -->
		<div class="px-5 mb-4 border-b">
			<nav class="flex -mb-px space-x-6" id="doc-tabs">
			<a href="#tab-general" class="p-2 font-bold tab-link">Général</a>
			<a href="#tab-medias" class="p-2 tab-link">Médias</a>
			<a href="#tab-params" class="p-2 tab-link">Options</a>
			<a href="#tab-design" class="p-2 tab-link">Design</a>
			</nav>
		</div>
	
		<!-- Tab Contents -->
		<div id="tab-general" class="p-8 tab-panel">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<label>
					Dossier :
					<select name="id_folder" id="id_folder" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100">
						<option value="1" data-host="{{ if .folder.Path.Valid }}{{ .folder.Path.String }}{{ else }}demo{{ end }}">{{ if .folder.Path.Valid }}{{ .folder.Path.String }}{{ else }}demo{{ end }}</option>

						{{ range .folders }}
						<option value="{{ .ID }}" data-host="{{ .Path.String }}">{{ .Name.String }} (- {{ .Path.String }} -)</option>
						{{ end}}

					</select>
					</label>
				
					<label>
					Lien :
					<input name="path" id="path" value="{{ if .file.Path.Valid }}{{ .file.Path.String }}{{ else }}index{{ end }}" placeholder="Nom du lien (ex: mon-doc)" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" />
					</label>
				</div>
				<div class="grid grid-cols-1 gap-4">
				
					<div id="path-feedback" class="col-span-2 mt-1 text-sm text-gray-600"></div>
				
			<input name="name" placeholder="Nom du document" value="{{ if .file.Name.Valid }}{{ .file.Name.String }}{{ else }}N/A{{ end }}" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" />
			<textarea name="intro" placeholder="Intro" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100">{{ if .file.Intro.Valid }}{{ .file.Intro.String }}{{ else }}{{ end }}</textarea>
			<textarea name="outro" placeholder="Outro" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100">{{ if .file.Outro.Valid }}{{ .file.Outro.String }}{{ else }}{{ end }}</textarea>
			<input name="password" type="password" placeholder="Mot de passe (optionnel)" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" />
			<input name="date" type="date" value="{{ if .file.Date.Valid }}{{ .file.Date.String }}{{ else }}{{ end }}" class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" />
			</div>
		</div>
	
		<div id="tab-medias" class="hidden p-8 tab-panel">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
			<label class="block">
				PDF FR :
				<div class="relative p-4 text-sm text-center text-gray-500 rounded-md border-2 border-dashed upload-zone hover:bg-indigo-600" data-name="pj_pdf_fr">
					<input type="file" name="pj_pdf_fr" class="hidden media-input" accept=".pdf,.mp3,.mp4,.wav,.epub,.svg" />
					<p>Dépose ton fichier ici ou clique pour parcourir</p>
					<div class="mt-2 preview"></div>
					<progress value="0" max="100" class="hidden mt-2 w-full"></progress>
				</div>

			</label>
			<label class="block">
				PDF Mobile FR :
				<div class="relative p-4 text-sm text-center text-gray-500 rounded-md border-2 border-dashed upload-zone hover:bg-indigo-600" data-name="pj_pdf_mobile_fr">
					<input type="file" name="pj_pdf_mobile_fr" class="hidden media-input" accept=".pdf,.mp3,.mp4,.wav,.epub,.svg" />
					<p>Dépose ton fichier ici ou clique pour parcourir</p>
					<div class="mt-2 preview"></div>
					<progress value="0" max="100" class="hidden mt-2 w-full"></progress>
				</div>
			</label>
			<label class="block">
				Image de couverture :
				<div class="relative p-4 text-sm text-center text-gray-500 rounded-md border-2 border-dashed upload-zone hover:bg-indigo-600" data-name="img_cover">
					<input type="file" name="img_cover" class="hidden image-input" accept="image/*" />
					<p>Dépose ton fichier ici ou clique pour parcourir</p>
					<div class="mt-2 preview"></div>
					<progress value="0" max="100" class="hidden mt-2 w-full"></progress>
				</div>
			</label>
			<label class="block">
				OpenGraph :
				<div class="relative p-4 text-sm text-center text-gray-500 rounded-md border-2 border-dashed upload-zone hover:bg-indigo-600" data-name="img_opengraph">
					<input type="file" name="img_opengraph" class="hidden image-input" accept="image/*" />
					<p>Dépose ton fichier ici ou clique pour parcourir</p>
					<div class="mt-2 preview"></div>
					<progress value="0" max="100" class="hidden mt-2 w-full"></progress>
				</div>
			</label>
			</div>
		</div>
	
		<div id="tab-params" class="hidden p-8 tab-panel">
			<div class="grid grid-cols-2 gap-4">
			<label><input type="checkbox" name="is_downloadable" {{ if .file.IsDownloadable.Valid }}{{ if eq .file.IsDownloadable.Int32 1 }}checked{{ end }}{{ end }} /> Téléchargeable</label>
			<label><input type="checkbox" name="is_printable" {{ if .file.IsPrintable.Valid }}{{ if eq .file.IsPrintable.Int32 1 }}checked{{ end }}{{ end }} /> Imprimable</label>
			<label><input type="checkbox" name="is_zoomable" {{ if .file.IsZoomable.Valid }}{{ if eq .file.IsZoomable.Int32 1 }}checked{{ end }}{{ end }} /> Zoomable</label>
			<label><input type="checkbox" name="is_singlepage" {{ if .file.IsSinglepage.Valid }}{{ if eq .file.IsSinglepage.Int32 1 }}checked{{ end }}{{ end }} /> Page unique</label>
			</div>
		</div>
	
		<div id="tab-design" class="hidden p-8 tab-panel">
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
			<label>Couleur texte : <input type="color" name="color_text" {{ if .file.ColorText.Valid }}value="{{ .file.ColorText.String }}"{{ end }} class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" /></label>
			<label>Couleur fond : <input type="color" name="color_background" {{ if .file.ColorBackground.Valid }}value="{{ .file.ColorBackground.String }}"{{ end }} class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" /></label>
			<label>Dégradé : <input type="color" name="color_gradient" {{ if .file.ColorGradient.Valid }}value="{{ .file.ColorGradient.String }}"{{ end }} class="px-4 py-2 w-full bg-transparent rounded-xl border border-gray-300 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:border-gray-700 dark:text-gray-100" /></label>
			<label>Fond visuel : <input type="file" name="img_background" class="image-input" /></label>
			</div>
		</div>
	
		<div class="footer fixed left-0 right-0 bottom-0 bg-white dark:bg-black border-t border-indigo-600">
			<div class="container">
				<a href="/dashboard" class="inline-block transition px-6 py-2 my-3 border border-indigo-600 bg-transparent text-indigo-600 rounded-xl hover:text-white">
					{{ "Annuler" | t }}
				</a>
				<button type="submit" class="px-6 py-2 my-3 border border-indigo-600 text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 float-dir">
					{{ "Enregistrer" | t }}
				</button>
			</div>
		</div>
		</form>
	</div>
</div>

{{ template "footer.html" . }}