extends layout.pug

block body
	.container
		.content#app
			h1 Welcome to the Admin Panel
			.left
				user-list
			.right
				ban-list
					
	.templates
		script(type="text/x-template" id="user-list-template").
			<div id="userlist">
				<h3>Registered Users ({{ pagination.total }})</h3>
				<div class="pgn">
					<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
					<div class="button" v-if="pagination.page &gt; 1" v-on:click="getUsers(pagination.page - 1)">Previous</div>
					<div class="button" v-for="n in pagination.pages" v-on:click="getUsers(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
					<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getUsers(pagination.page + 1)">Next</div>
				</div>
				<div class="list users">
					<div class="user list-item" v-for="user in users">
						<div class="avatar">
							<img v-if="user.avatar_file" v-bind:src="'/usercontent/images/' + user.avatar_file"/>
							<img v-else="v-else" src="/static/image/avatar.png"/>
						</div>
						<div class="info">
							<div class="stamps">
								<div class="noactive" v-if="user.activated == false" title="Not activated.">
									<i class="fa fa-fw fa-envelope"></i>
								</div>
							</div>
							<div class="display_name">{{ user.display_name }}</div>
							<div class="username">{{ user.id }} - {{ user.username }} ({{ user.uuid }})</div>
							<div class="email">{{ user.email }}</div>
							<div class="privilege">Privilege: level {{ user.nw_privilege }}</div>
							<div class="timestamp">{{ new Date(user.created_at).toString() }}</div>
							<div class="external" v-if="!user.password"><b>Used external login</b></div>
							<div class="button ban" v-if="user.bannable" v-on:click="banning = user.id">
								<i class="fa fa-fw fa-ban"></i>Ban User
							</div>
						</div>
					</div>
					<ban-modal :show="banning" @close="banning = 0" :id="banning"></ban-modal>
				</div>
			</div>
		script(type="text/x-template" id="ban-list-template").
			<div id="banlist">
				<h3>Bans ({{pagination.total}})</h3>
				<div class="message error" v-if="error">{{ error }}</div>
				<div class="entry" v-else="v-else">
					<div class="pgn">
						<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
						<div class="button" v-if="pagination.page &gt; 1" v-on:click="getBans(pagination.page - 1)">Previous</div>
						<div class="button" v-for="n in pagination.pages" v-on:click="getBans(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
						<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getBans(pagination.page + 1)">Next</div>
					</div>
					<div class="list bans">
						<div class="ban list-item" v-for="ban in bans">
							<div class="stamps">
								<div class="noactive" title="Expired" v-if="ban.expired">
									<i class="fa fa-fw fa-ban"></i>
								</div>
							</div>
							<div class="info">
								<div class="section">
									<span class="key">User</span>
									<span class="value">{{ ban.user.display_name }}</span>
								</div>
								<div class="section">
									<span class="key">Admin</span>
									<span class="value">{{ ban.admin.display_name }}</span>
								</div>
								<div class="section">
									<span class="key">Reason</span>
									<span class="value">{{ ban.reason }}</span>
								</div>
								<div class="section">
									<span class="key">Placed</span>
									<span class="value">{{ new Date(ban.created_at).toString() }}</span>
								</div>
								<div class="section">
									<span class="key">Expires</span>
									<span class="value" v-if="ban.expires_at">{{ new Date(ban.expires_at).toString() }}</span>
									<span class="value" v-else="v-else"><b>This ban is permanent.</b></span>
								</div>
								<div class="button remove" @click="pardon(ban.id)">Pardon</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		script(type="text/x-template" id="modal-template").
			<transition name="modal">
				<div class="modal-mask" @click="close" v-show="show">
					<div class="modal-wrapper" @click.stop>
						<div class="modal-container">
							<slot></slot>
						</div>
					</div>
				</div>
			</transition>
		script(type="text/x-template" id="ban-modal-template").
			<modal :show="show" @close="close">
				<div class="modal-header">
					<h3>Ban user</h3>
				</div>

				<div class="modal-body">
					<div class="message error" v-if="error">{{ error }}</div>
					<input type="hidden" name="user_id" :value="id">
					<label for="reason">Reason</label>
					<input type="text" id="reason" name="reason" v-model="reason">
					<label for="expires_at">Expires</label>
					<input type="date" id="expires_at" name="expires_at" v-model="expires_at">
				</div>

				<div class="modal-footer text-right">
					<button @click="submit">Ban</button>
					<button @click="close">Cancel</button>
				</div>
			</modal>