<html>
<head>
    <title>Juxt - <%= community.name %></title>
    <%- include('partials/head'); %>
</head>
<body>
	<style>
		.col-md-4, .col-md-3, .col-md-9 {
			display: flex;
			align-items: center;
			padding: 0.5em 0;
			justify-content: center;
		}
		input[type="text"], input[type="file"], select, textarea {
			width: 200px;
			margin-left: 0.5em;
			background: var(--text-secondary);
			border: none;
			border-radius: 5px;
			height: 25px;
		}
		textarea {
			height: 100px;
		}
		.labels {
			width: 300px;
			text-align: right;
		}
		input[type="file"] {
			width: unset;
			background: unset;
		}
		#browserIconPreview, #CTRbrowserHeaderPreview, #WiiUbrowserHeaderPreview {
			object-fit: cover;
		}
		#browserIconPreview {
			width: 128px;
			height: 128px;
		}
		#CTRbrowserHeaderPreview {
			width: 200px;
			height: 110px;
		}
		#WiiUbrowserHeaderPreview {
			width: 320px;
			height: 45px;
		}
		</style>
<div id="main">
    <h2 id="title" class="page-header">Edit Community</h2>
    <%- include('partials/nav_bar', { selection: -1, pid: pid }); %>
    <div id="toast"></div>
    <div id="wrapper" class="community-page-post-box">
		<div class="buttons tabs">
			<a id="post-reports" href="/admin/posts">Posts</a>
			<a id="account-reports" href="/admin/accounts">Accounts</a>
			<a id="communities" class="selected" href="/admin/communities">Communities</a>
		</div>
        <form action="/admin/communities/<%= community.olive_community_id %>" method="post" enctype="multipart/form-data">
			<div class="col-md-4">
				<label class="labels" for="name">Community Name:</label>
				<input type="text" id="name" name="name" class="form-control" value="<%= community.name %>" required>
			</div>
			<div class="col-md-4">
				<label class="labels" for="description">Description:</label>
				<textarea type="text" id="description" name="description" class="form-control" required><%= community.description %></textarea>
			</div>
			<div class="col-md-3">
				<label class="labels">Platform</label>
				<select class="form-select" aria-label="Access Mode" name="platform" id="platform">
					<option value="0" <% if (community.platform_id == 0) { %>selected<% } %>>Wii U</option>
					<option value="1" <% if (community.platform_id == 1) { %>selected<% } %>>3DS</option>
					<option value="2" <% if (community.platform_id == 2) { %>selected<% } %>>Both</option>
				</select>
			</div>
			<div class="col-md-3">
				<label class="labels">Type</label>
				<select class="form-select" aria-label="Access Mode" name="type" id="type">
					<option value="0" <% if (community.type == 0) { %>selected<% } %>>Main Community</option>
					<option value="1" <% if (community.type == 1) { %>selected<% } %>>Sub Community</option>
					<option value="2" <% if (community.type == 2) { %>selected<% } %>>Announcement Community</option>
					<option value="3" <% if (community.type == 3) { %>selected<% } %>>Private Community</option>
				</select>
			</div>
			<div class="col-md-9">
				<label class="labels" for="title_ids">Title IDs (comma separated list)</label>
				<input id="title-ids" name="title_ids" type="text" class="form-control" placeholder="1407375153678336, 1407375153685760, 1407375153686016" value="<%= community.title_id %>">
			</div>
			<div class="col-md-3">
				<label class="labels" for="browserIcon">Browser Icon (128px x 128px)</label>
				<input type="file" id="browserIcon" accept="image/jpg" name="browserIcon">
			</div>
			<div class="col-md-3">
				<img src="<%= cdnURL %>/icons/<%= community.parent ? community.parent : community.olive_community_id %>/128.png" id="browserIconPreview">
			</div>
			<div class="col-md-3">
				<label class="labels" for="CTRbrowserHeader">3DS Browser Banner (400px x 220px)</label>
				<input type="file" id="CTRbrowserHeader" accept="image/jpg" name="CTRbrowserHeader">
			</div>
			<div class="col-md-3">
				<img src="<%= cdnURL %>/headers/<%= community.parent ? community.parent : community.olive_community_id %>/3DS.png" id="CTRbrowserHeaderPreview">
			</div>
			<div class="col-md-3">
				<label class="labels" for="WiiUbrowserHeader">Wii U Browser Banner (1280px x 180px)</label>
				<input type="file" id="WiiUbrowserHeader" accept="image/jpg" name="WiiUbrowserHeader">
			</div>
			<div class="col-md-3">
				<img src="<%= cdnURL %>/headers/<%= community.parent ? community.parent : community.olive_community_id %>/WiiU.png" id="WiiUbrowserHeaderPreview">
			</div>
			<div class="col-md-4">
				<label class="labels" for="parent">Parent Community ID:</label>
				<input type="text" id="parent" name="parent" class="form-control"
					   value="<%= community.parent %>">
			</div>
			<div class="col-md-4">
				<label class="labels" for="app_data">Community App Data:</label>
				<input type="text" id="app_data" name="app_data" class="form-control"
					   value="<%= community.app_data %>">
			</div>
			<div class="col-md-3">
				<label class="form-check-label" for="isRecommended">Is Recommended?</label>
				<div class="form-switch">
					<input class="form-check-input" type="checkbox" id="isRecommended"
					<% if (community.isRecommended == 1) { %>checked<% } %>>
				</div>
			</div>
			<div class="col-md-3">
				<label class="form-check-label" for="hasShopPage">Has Shop Page?</label>
				<div class="form-switch">
					<input class="form-check-input" type="checkbox" id="hasShopPage"
					<% if (community.has_shop_page == 1) { %>checked<% } %>>
				</div>
			</div>
			<div class="col-md-3" style="justify-content: center;">
				<button class="btn btn-primary profile-button" type="submit">
					Save Community
				</button>
			</div>
			
    </div>
</div>
</body>
<script>
	browserIcon.onchange = evt => {
		const [file] = browserIcon.files
		if (file) {
			browserIconPreview.src = URL.createObjectURL(file)
		}
	}
	CTRbrowserHeader.onchange = evt => {
		const [file] = CTRbrowserHeader.files
		if (file) {
			CTRbrowserHeaderPreview.src = URL.createObjectURL(file)
		}
	}
	WiiUbrowserHeader.onchange = evt => {
		const [file] = WiiUbrowserHeader.files
		if (file) {
			WiiUbrowserHeaderPreview.src = URL.createObjectURL(file)
		}
	}
</script>
</html>
