{{define "file_viewer"}}
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>{{.Title}}</title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		{{ template "opengraph" .OGData }}

		{{ template "user_style" . }}
		{{ template "user_style_js" . }}

		<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
		<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
		<link rel="icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
		<link rel="icon" sizes="192x192" href="/res/img/pixeldrain_192.png" />
		<link rel="icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_256.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
		<link rel="apple-touch-icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
		<link rel="shortcut icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
		<meta name="theme-color" content="#220735"/>

		<style>
		{{ template `viewer.css` }}
		{{ template `modal.css` }}
		</style>

		{{ template `ad_headers` . }}
	</head>

	<body>
		<div id="file_viewer" class="file_viewer">
			<div id="file_viewer_headerbar" class="file_viewer_headerbar">
				<button id="btn_toggle_toolbar" class="button_toggle_toolbar round">
					<i class="icon">menu</i>
				</button>
				<a href="/" id="button_home" class="button button_home round">
					{{template `pixeldrain.svg` .}}
				</a>
				<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
					<div id="file_viewer_list_title"></div>
					<div id="file_viewer_file_title">loading...</div>
				</div>
				<!-- fullscreen button becomes visible on embedded viewer -->
				<button id="btn_fullscreen" class="btn_fullscreen round" style="display: none;">
					<i class="icon" id="btn_fullscreen_icon">fullscreen</i>
				</button>
			</div>
			<div id="list_navigator" class="list_navigator"></div>
			<div id="file_viewer_window" class="file_viewer_window">
				<div id="toolbar" class="file_viewer_toolbar"><div><div>
					<div id="stat_views_label" class="toolbar_label">Views</div>
					<div id="stat_views" style="text-align: center;">N/A</div>
					<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
					<div id="stat_downloads" style="text-align: center;">N/A</div>
					<div id="stat_size_label" class="toolbar_label">Size</div>
					<div id="stat_size" style="text-align: center;">N/A</div>

					<hr/>
					<button id="btn_download" class="toolbar_button button_full_width">
						<i class="icon">save</i>
						<span>Download</span>
					</button>
					<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
						<i class="icon">save</i>
						<span>DL all files</span>
					</button>
					<button id="btn_copy" class="toolbar_button button_full_width">
						<i class="icon">content_copy</i>
						<span><u>C</u>opy link</span>
					</button>
					<button id="btn_share" class="toolbar_button button_full_width">
						<i class="icon">share</i>
						<span>Share</span>
					</button>
					<button id="btn_qr_code" class="toolbar_button button_full_width">
						<i class="icon">qr_code</i>
						<span>QR code</span>
					</button>
					<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;" title="Randomize the order of the files in this list">
						<i class="icon">shuffle</i>
						<span>Shuffle &#x2610;</span>
					</button>
					<button id="btn_details" class="toolbar_button button_full_width">
						<i class="icon">help</i>
						<span>Deta<u>i</u>ls</span>
					</button>
					<hr/>
					<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
						<i class="icon">edit</i>
						<span><u>E</u>dit</span>
					</button>
					<button id="btn_grab" class="toolbar_button button_full_width" style="display: none;" title="Copy this file to your own pixeldrain account">
						<i class="icon">save_alt</i>
						<span><u>G</u>rab file</span>
					</button>
					<button id="btn_embed" class="toolbar_button button_full_width" title="Include this file in your own webpages">
						<i class="icon">code</i>
						<span>E<u>m</u>bed</span>
					</button>
					<button id="btn_report_abuse" class="toolbar_button button_full_width" title="Report abuse in this file">
						<i class="icon">flag</i>
						<span>Report</span>
					</button>
					<br/>

					{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
						<hr/>
						Tired of ads?<br/>
						Files expiring too soon?<br/>
						<a class="button button_highlight" href="/click/7wy9gg2J?target=%2F%23pro">
							<svg style="float: left; width: 2em; height: 2em; fill: currentColor; margin-right: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
								<g fill-rule="evenodd">
									<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
									<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
								</g>
							</svg>
							Become a Patron!
						</a>
					{{ end }}

					<!-- This frame will load the download URL when a download button is pressed -->
					<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
				</div></div></div>

				<div id="sharebar" class="file_viewer_sharebar">
					Share on:<br/>
					<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
						{{template `email.svg` .}}<br/>E-Mail
					</button>
					<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
						{{template `reddit.svg` .}}<br/>Reddit
					</button>
					<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
						{{template `twitter.svg` .}}<br/>Twitter
					</button>
					<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
						{{template `facebook.svg` .}}<br/>Facebook
					</button>
					<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
						{{template `tumblr.svg` .}}<br/>Tumblr
					</button>
				</div>

				<div id="filepreview" class="file_viewer_file_preview checkers">
					<div class="center" style="width: 100px; height: 100px;">{{template "spinner.svg" .}}</div>
				</div>

				<div id="skyscraper" class="skyscraper">
					<button id="btn_skyscraper_close" class="round">
						<i class="icon">close</i> Close ad
					</button>
					<div id="skyscraper_ad_space" class="skyscraper_ad_space"></div>
				</div>
			</div>

			<div id="sponsors" class="sponsors">
				{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
					{{ template "banner_ads" . }}
				{{ else if not .Other.UserAdsEnabled }}
					<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
						Thank you for supporting pixeldrain!
					</div>
				{{ else if not .Other.FileAdsEnabled }}
					<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
						The uploader of this file disabled advertisements. You can do the same for <a href="/#pro">only €2 per month</a>!
					</div>
				{{ end }}
			</div>
		</div>

		<template id="tpl_details_popup">
			<table class="info_file_details" style="min-width: 100%;"></table>

			<div class="info_about">
				<h3>Downloads</h3>
				<div class="chart-container" style="position: relative; width: 100%; height: 150px;">
					<canvas id="downloads_chart"></canvas>
				</div>
				<h3>Views</h3>
				<div class="chart-container" style="position: relative; width: 100%; height: 150px;">
					<canvas id="views_chart"></canvas>
				</div>
				<p style="text-align: center">
					Charts rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.
				</p>

				<h3>About</h3>
				Pixeldrain is a file sharing platform.
				<a href="/" target="_blank">Visit the home page for more information.</a>

				<h3>Keyboard Controls</h3>
				<table style="max-width: 100%;">
					<tr><td colspan="2">File Shortcuts</td></tr>
					<tr><td>c</td><td> = Copy URL of this page</td></tr>
					<tr><td>i</td><td> = Toggle details window (this window) (<b><u>i</u></b>nfo)</td></tr>
					<tr><td>s</td><td> = Download the file you are currently viewing (<b><u>s</u></b>ave)</td></tr>
					<tr><td>q</td><td> = Close the window (<b><u>q</u></b>uit)</td></tr>
					<tr><td colspan="2">List Shortcuts</td></tr>
					<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
					<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
					<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
					<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
				</table>
			</div>
		</template>

		<template id="tpl_edit_file">
			<div class="edit_file_notification" style="display: none;"></div>
			<h3>Rename</h3>
			<form class="edit_file_name_form" style="display: flex; width: 100%">
				<input class="edit_file_name_field" type="text" style="flex: 1 1 auto"/>
				<button class="edit_file_name_submit" role="submit" style="flex: 0 0 auto">
					<i class="icon">save</i> Save
				</button>
			</form>
			<h3>Delete</h3>
			<p>
				When you delete a file it cannot be recovered.
				Nobody will be able to download it and the link will
				stop working. The file will also disappear from any
				lists it's contained in.
			</p>
			<div style="text-align: center;">
				<button class="button_red btn_delete_file">
					<i class="icon small">delete</i> Delete this file
				</button>
			</div>
		</template>

		<template id="tpl_captcha_popup">
			<div class="captcha_text"></div>
			<br/>
			<div class="captcha_popup_captcha" style="text-align: center;"></div>
		</template>

		<template id="tpl_embed_popup">
			<p>
				You can embed pixeldrain's file viewer in your own web pages. We
				have created a special HTML code which renders a minimalistic
				version of the file viewer where the title bar is a bit thinner and
				the toolbar is collapsed by default.
			</p>
			<p>
				Unless it was uploaded using a pixeldrain Pro account the embedded
				file will also show advertisements.
			</p>
			<h3>Code</h3>
			<textarea class="embed_html_code" style="width: 100%; height: 4em; margin: 0;"></textarea>
			<br/>
			<button class="embed_copy_html"><i class="icon">content_copy</i> Copy HTML</button>
			<button class="embed_show_preview"><i class="icon">visibility</i> Show example</button>
			<h3>Example</h3>
			<div class="embed_preview_area" style="text-align: center;"></div>
		</template>

		<template id="tpl_report_abuse_popup">
			<p>
				If you think this file violates pixeldrain's
				<a href="/about#content-policy">content policy</a> you can
				report it for moderation with this form. You cannot report
				copyright abuse with this form, send a formal DMCA notification
				to the
				<a href="/about#content-policy">abuse e-mail address</a>
				instead.
			</p>
			<form class="abuse_type_form" style="width: 100%">
				<h3>Abuse type</h3>
				<p>
					Which type of abuse is shown in this file? Pick the most
					appropriate one.
				</p>
				<label for="abuse_type_terrorism">
					<input type="radio" id="abuse_type_terrorism" name="abuse_type" value="terrorism">
					<b>Terrorism</b>: Videos, images or audio fragments showing
					or promoting the use of intentional violence to achieve
					political aims.
				</label>
				<label for="abuse_type_gore">
					<input type="radio" id="abuse_type_gore" name="abuse_type" value="gore">
					<b>Gore</b>: Graphic and shocking videos or images depicting
					severe harm to humans (or animals).
				</label>
				<label for="abuse_type_child_abuse">
					<input type="radio" id="abuse_type_child_abuse" name="abuse_type" value="child_abuse">
					<b>Child abuse</b>: Videos or images depicting inappropriate
					touching or nudity of minors.
				</label>
				<label for="abuse_type_malware">
					<input type="radio" id="abuse_type_malware" name="abuse_type" value="malware">
					<b>Malware</b>: Software programs designed to cause harm to
					computer systems.
				</label>

				<h3>Send</h3>
				<div class="abuse_report_notification" style="display: none;"></div>
				<p>
					Abuse reports are manually reviewed. Normally this shouldn't
					take more than 24 hours. During busy periods it can take
					longer.
				</p>
				<div style="text-align: right;">
					<button class="button_highlight abuse_report_submit" role="submit">
						<i class="icon">send</i> Send
					</button>
				</div>
			</form>
		</template>

		<template id="intro_popup">
			<h3>Upload your own files here!</h3>
			<p>
				On pixeldrain you can share your files with large or small
				groups of people. The sky is the limit!
			</p>
			<button class="intro_popup_close button_highlight round" style="float: right; margin: 0 10px 10px 0;">
				<i class="icon">check</i> Got it!
			</button>
		</template>

		<script src="/res/script/Chart.min.js"></script>
		<script>
			'use strict';
			let apiEndpoint = '{{.APIEndpoint}}';
			let captchaKey = '{{.Other.CaptchaKey}}';
			let embeddedViewer = {{.Other.Embedded}};
			let userAuthenticated = {{.Authenticated}};
			let skyscraperType = "{{.Other.AdSkyscraperType}}"

			{{template `util.js`}}
			{{template `drawGraph.js`}}
			{{template `Modal.js`}}
			{{template `Toolbar.js`}}
			{{template `Skyscraper.js`}}
			{{template `EditWindow.js`}}
			{{template `EmbedWindow.js`}}
			{{template `QRCodeWindow.js`}}
			{{template `DetailsWindow.js`}}
			{{template `AbuseReportWindow.js`}}
			{{template `ListNavigator.js`}}
			{{template `IntroPopup.js`}}
			{{template `Viewer.js`}}

			{{template `AbuseViewer.js`}}
			{{template `ImageViewer.js`}}
			{{template `VideoViewer.js`}}
			{{template `AudioViewer.js`}}
			{{template `PDFViewer.js`}}
			{{template `TextViewer.js`}}
			{{template `FileViewer.js`}}

			// DOMContentLoaded fires when the DOM tree has been parsed, but
			// before the assets have loaded
			window.addEventListener("DOMContentLoaded", () => {
				// This info gets filled in on the server side to prevent having to
				// make an API call right after the page loads. Just to slice
				// another few milliseconds from the load time :)
				new Viewer('{{.Other.Type}}', '{{.Other.ViewToken}}', {{.Other.APIResponse}})
			})
		</script>

		{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
			{{ template "analytics" }}
			{{ template "floating_ads" . }}
		{{ end }}
	</body>
</html>
{{end}}
