{{define "content"}}
<div id="file-list" class="file-list">
	{{if .IsHome }}
	{{ else }}
	<div class="file-row" hx-get="{{$.ParentPath}}{{$.QueryParams}}" hx-target="#content" hx-push-url="true">
		<div class="file-icon_wrapper">
			<img class="file-icon_img" src="/static/folder.svg" />
		</div>
		<div class="file-details">
			<div class="file-details_name">..</div>
			<div class="file-details_description"></div>
		</div>
	</div>
	{{end}}
	{{ range .Entries }}
	{{ if .IsDir }}
	<div class="file-row" hx-get="{{.Path}}{{$.QueryParams}}" hx-target="#content" hx-push-url="true">
		<div class="file-icon_wrapper">
			<img class="file-icon_img" src="/static/folder.svg" />
		</div>
		<div class="file-details">
			<div class="file-details_name">{{ .Name }}</div>
		</div>
	</div>
	{{else}}
	<a class="file-row" href="{{.Path}}">
		<div class="file-icon_wrapper">
			{{ if .Thumbnail }}
			<img class="file-icon_img" src="/preview{{.Path}}" onerror="this.src='/static/file.svg'" />
			{{ else }}
			<img class="file-icon_img" src="/static/file.svg" onerror="this.src='/static/file.svg'" />
			{{ end }}
		</div>
		<div class="file-details">
			<div class="file-details_name">{{ .Name }}</div>
			<div class="file-details_description">{{.Size.FormatSizeUnits}}</div>
		</div>
	</a>
	{{end}}
	{{ end }}
	<hr />
</div>
<script>
	(() => {
		const fileList = document.getElementById('file-list');

		['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
			fileList.addEventListener(eventName, preventDefaults, false);
		});

		['dragenter', 'dragover'].forEach(eventName => {
			fileList.addEventListener(eventName, highlight, false);
		});

		['dragleave', 'drop'].forEach(eventName => {
			fileList.addEventListener(eventName, unhighlight, false);
		});

		fileList.addEventListener('drop', handleDrop, false);

		function preventDefaults(e) {
			e.preventDefault();
			e.stopPropagation();
		}

		function highlight() {
			fileList.classList.add('drag-over');
		}

		function unhighlight() {
			fileList.classList.remove('drag-over');
		}

		function handleDrop(e) {
			console.log('dropped', e);
			const dt = e.dataTransfer;
			const files = dt.files;

			if (files.length > 0) {
				console.log('Dropped files:', files);
				htmx.ajax('GET', `/upload?path=${window.location.pathname}`, "#modal")
					.then(() => setFiles?.(files)); 

			}
		}
	})();
</script>
{{end}}

{{define "menu"}}
<div id="menu-popup" hx-swap-oob="innerHTML">
	<div class="menu-list">
		<div class="menu-item"
			 hx-get="{{.Path}}{{.HiddenParamText}}"
			 hx-target="#content"
			 hx-push-url="true"
		>
			{{ if .ShowHidden }}
			Hide Hidden
			{{ else }}
			Show Hidden
			{{ end }}
		</div>
		<div class="menu-item"
			 hx-get="{{.Path}}{{.ReverseParamText}}"
			 hx-target="#content"
			 hx-push-url="true"
		>
			{{ if .Reverse }}
			Sort Alphabetically (A-z)
			{{ else }}
			Sort Alphabetically (Z-a)
			{{ end }}
		</div>
		{{ if .AllowUploads }}
		<div class="menu-item"
			 hx-get="/upload?path={{.Path}}"
			 hx-target="#modal"
			 hx-swap="innerHTML"
			 >
			Upload File
		</div>
		{{ end }}
	</div>
</div>
{{end}}