<!DOCTYPE html>
<html>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="css/main.css">
	<body>
		<div class="view loading {{ show ? 'show' : '' }}"></div>
		<div class="view login {{ show ? 'show' : '' }}">
			<div class="logo"></div>
			<div class="error {{ error ? 'show' : '' }}">
				<span class="icon"></span>
				<span class="text">{{ error_text }}</span>
			</div>
			<form class="form {{ loading ? 'hide' : '' }}" v-on:submit.prevent="submit">
				<input id="email" type="text" placeholder="E-mail" v-model="email" autofocus=""/>
				<input id="password" type="password" placeholder="Password" v-model="password"/>
				<a class="register" href="https://symu.co/?showRegisterModal=1">Create account</a>
				<button>Log in</button>
			</form>
			<div class="loading {{ loading ? 'show' : '' }}"></div>
		</div>
		<div class="view tabbed">
			<div class="tabs">
				<div class="tab tab-activity"><span class="icon"></span>Activity</div>
				<div class="tab tab-upload active"><span class="icon"></span>Upload</div>
				<div class="tab tab-settings"><span class="icon"></span>Settings</div>
			</div>
			<div class="subview activity {{ show ? 'show' : '' }}">
				<div class="list">
					<div class="notification" v-for="notification in notifications">
						<div class="icon {{ notification.icon }}"></div>
						<div class="text first">IP: <span class="ip">{{ notification.ip }}</span></div>
						<div class="text">{{ notification.text }}</div>
					</div>
				</div>
				<div class="more">
					<button>Load more</button>
				</div>
			</div>
			<div class="subview upload {{ show ? 'show' : '' }}">
				<div class="account">
					<div class="text">Hello <span class="name">{{ name }}</span>!</div>
					<button class="logout" v-on:click="logout">Log out</button>
				</div>
				<div class="storage">
					<div class="progressbar">
						<div class="progress" style="width: {{ storage_percent }}%"></div>
					</div>
					<div class="text">Storage: <span class="numbers">{{ storage_used }}/{{ storage_available }}</span> MB</div>
				</div>
				<div class="uploader {{ alert.show ? 'hasalert' : '' }}">
					<button class="{{ loading ? 'hide' : '' }}" v-on:click="submit">Upload to Symu</button>
					<div class="loading {{ loading ? 'show' : '' }}"></div>
					<div class="alert {{ alert.show ? 'show' : '' }}" v-if="alert.type == 'uploading'">Uploading screenshot...</div>
					<div class="alert {{ alert.show ? 'show' : '' }}" v-if="alert.type == 'success'"><span class="icon tick"></span>Successfully uploaded: <a href="http://symu.co/{{ alert.link }}">symu.co/{{ alert.link }}</a></div>
					<div class="alert {{ alert.show ? 'show' : '' }}" v-if="alert.type == 'error'"><span class="icon error"></span>{{ alert.error }}</div>
					<div class="alert {{ alert.show ? 'show' : '' }}" v-if="alert.type == 'storage'">Your storage is full - <a href="https://symu.co/panel/subscriptions/">Get more storage</a></div>
				</div>
				<div class="location">
					<div class="text">Upload to:</div>
					<div class="choose" v-on:click="showProjects">
						<div class="name {{ location.name == null ? 'fail' : '' }}">{{ location.name == null ? 'Choose a location' : location.name }}</div>
						<div class="icon"></div>
					</div>
				</div>
			</div>
			<div class="subview settings {{ show ? 'show' : '' }}">
				<div class="row-1">
					<div class="left">
						<div class="png-settings">
							<div class="select {{ optimizePNG ? 'active' : '' }}" v-on:click="toggleOptimizePNG">
								<div class="tick"></div>
								<div class="text">Optimize PNG</div>
							</div>
							<div class="select {{ interlacedPNG ? 'active' : '' }}" v-on:click="toggleInterlacedPNG">
								<div class="tick"></div>
								<div class="text">Interlaced PNG</div>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="jpg-settings">
							<div class="select">
								<div class="text -margin">JPG quality:</div>
								<input class="input" maxlength="3" value="90" onclick="this.setSelectionRange(0, this.value.length)" v-on:input.prevent="updateQualityJPG" v-model="qualityJPG"/>
								<div class="text percent">%</div>
							</div>
							<div class="select {{ progressiveJPG ? 'active' : '' }}" v-on:click="toggleProgressiveJPG">
								<div class="tick"></div>
								<div class="text">Progressive JPG</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row-2">
					<div class="left">
						<div class="format-settings">
							<div class="switch">
								<div class="text">Format:</div>
								<div class="button">
									<div class="option -left {{ format == 'jpg' ? 'active' : '' }}" v-on:click="changeFormat('jpg')">JPG</div>
									<div class="option -right {{ format == 'png' ? 'active' : '' }}" v-on:click="changeFormat('png')">PNG</div>
								</div>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="scale-settings">
							<div class="switch">
							<div class="text">Scale:</div>
							<div class="button">
								<div class="option -left {{ scale == 1 ? 'active' : '' }}" v-on:click="changeScale(1)">1x</div>
								<div class="option -right {{ scale == 2 ? 'active' : '' }}" v-on:click="changeScale(2)">2x</div>
							</div>
						</div>
						</div>
					</div>
				</div>
				<div class="row-3"></div>
			</div>
		</div>
		<div class="view search {{ show ? 'show' : '' }}">
			<div class="projects">
				<div class="bar">
					<div class="icon"></div>
					<input type="text" placeholder="Search for projects..." v-model="searchValue" v-on:input="search"/>
				</div>
				<div class="list">
					<div class="project" v-for="item in items" v-on:click="choose(item)">
						<template v-if="item.type == 'multi'">
							<span class="group">{{ item.group }}</span><span class="separator">&#10095;</span>{{ item.project }}
						</template>
						<template v-if="item.type == 'group'">
							<span class="group">{{ item.group }}</span>
						</template>
						<template v-if="item.type == 'project'">
							{{ item.project }}
						</template>
					</div>
				</div>
				<button class="cancel" v-on:click="cancel">Cancel</button>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/CSInterface-4.2.0.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>