{% extends "closedverse_main/layout.html" %}
{% block main-body %}{% load closedverse_user %}{% load closedverse_tags %}
<div class="main-column"><div class="post-list-outline">
<h2 class="label">Create a new community</h2>
<form class="setting-form" method="post" action={% url "main:community-create-action" %}>
	<p>Create your own community that you can edit here! Each community will cost you one Community Token.</p>
	<li class="setting-community-name">
		<p class="settings-label">Set name:</p>
			<div class="center center-input">
				{{ form.name }}
			</div>
		</li>
		<li class="setting-community-description">
			<p class="settings-label">Community description:</p>
			{{ form.description }}
		  </li>
		{% if request.user.has_freedom %}
		<li class="setting-community-icon">
			<label class="file-button-container">
			<p class="input-label">Community icon:</p>
				<span class="button file-upload-button">Upload a new icon</span>
				<input accept="image/gif, image/png, image/webp, image/jpeg, image/jpg, image/svg+xml, image/bmp" type="file" style="display: none;" name="ico" id="upload-file">
			</label>
		  </li>
		  <li class="setting-community-banner">
		  <label class="file-button-container">
			<p class="input-label">Community banner:</p>
				<span class="button file-upload-button">Upload a new banner</span>
				<input accept="image/gif, image/png, image/webp, image/jpeg, image/jpg, image/svg+xml, image/bmp" type="file" style="display: none;" name="banner" id="upload-file">
		  </label>
		  </li>
		{% endif %}
		  <li>
		  <p>&nbsp;</p>
		  {{ form.require_auth }}Require login:
				<p class="note">If this is on, users will need to sign in to view your community.</p>
		  </li>
		  <li>
			<p class="settings-label">Platform</p>
			<div class="select-content">
			  <div class="select-button">
			   {{ form.platform }}
			  </div>
			</div>
			<p class="note">If your community is for a video game, you can set the platform here. This will show an icon corresponding to what platform you pick.</p>
		  </li>
		{% csrf_token %}
		<div class="form-buttons">
			<input type="submit" class="black-button apply-button" value="Save">
			<p class="note">You have {{ tokens }} token(s) remaining</p>
		</div>
</form></div></div>
{% endblock %}