{{define "user_files"}}<!DOCTYPE html>
<html lang="en">
	<head>
		{{template "meta_tags" "Files"}}
		{{template "user_style" .}}
		<script>var apiEndpoint = '{{.APIEndpoint}}';</script>
	</head>

	<body>
		{{template "page_top" .}}
		<h1>My Files</h1>
		<div class="page_content">
			<p>
				These files were uploaded while logged in to your pixeldrain account,
				<a href="/history">click here</a> to view files uploaded anonymously
				in this browser.
			</p>
			<br/>

			{{$limit := 200}}
			{{$page := .URLQuery.Get "page" | pageNr}}
			{{$files := .PixelAPI.UserFiles $page $limit}}
			<div class="highlight_dark">
				{{if ne $page 0}}
					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
					<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
					<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
				{{end}}
				Page {{$page}}
				{{if len $files.Files | eq $limit}}
					<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
					<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
					<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
				{{end}}
			</div>
			<br/>

			{{range $files.Files}}<!--
			--><a class="file_button" href="/u/{{.ID}}" target="_blank">
				<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Name}}" />
				<span class="file_button_title">{{.Name}}</span>
				<br/>
				{{.DateUpload.Format "2006-01-02 15:04:05"}}
			</a><!--
			-->{{end}}

			<br/><br/>
			<div class="highlight_dark">
				{{if ne $page 0}}
					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
					<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
					<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
				{{end}}
				Page {{$page}}
				{{if len $files.Files | eq $limit}}
					<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
					<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
					<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
				{{end}}
			</div>
		</div>

		{{template "page_bottom" .}}

		{{template "analytics"}}
	</body>
</html>
{{end}}
