<div role="tabpanel" class="tab-pane config-section active" id="appearance">
	<form id="logo-upload" class="form-upload" method="POST" enctype="multipart/form-data">
		<div class="form-group">
			<label for="ctf_logo">
				Logo
				<small class="form-text text-muted">
					Logo to use for the website instead of a CTF name.
				</small>
			</label>

			{% if ctf_logo %}
				<div class="d-block py-3">
					<img id="ctf_logo_preview" class="img-responsive ctf_logo"
						 src="{{ url_for('views.files', path=ctf_logo) }}"
						 height="25">
					<button type="button" id="remove-logo" class="btn-sm btn-danger">
						Remove Logo
					</button>
				</div>
			{% endif %}

			<div class="row">
				<div class="col-md-9">
					<input class="form-control-file" id="ctf_logo_file" name='file' type='file'
						   placeholder="CTF Logo">
				</div>
				<div class="col-md-3">
					<div class="form-group">
						<div class="d-inline-block float-right">
							<button type="submit" class="btn-sm btn-primary float-right">Upload</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>

	<hr>

	<form method="POST" autocomplete="off" class="w-100">
		<div class="form-group">
			<label for="ctf_name">
				Competition Name
				<small class="form-text text-muted">Competition name displayed instead of a logo</small>
			</label>
			<input class="form-control" id='ctf_name' name='ctf_name' type='text' placeholder="CTF Name"
				   {% if ctf_name is defined and ctf_name != None %}value="{{ ctf_name }}"{% endif %}>
		</div>

		<div class="form-group">
			<label>
				CTF Description<br>
				<small class="form-text text-muted">
					Description for the CTF
				</small>
			</label>
			<textarea class="form-control" type="text" id="ctf_description" name="ctf_description" rows="5">{{ ctf_description }}</textarea>
		</div>

		<div class="form-group">
			<label for="user_mode">
				User Mode
				<small class="form-text text-muted">User mode allows users to register as themselves
					or choose to form teams.
				</small>
			</label>
			<div data-toggle="tooltip" data-placement="bottom" title="In order to change User Mode you must reset your CTF">
				<select class="form-control custom-select" id="user_mode" name="user_mode" disabled="true" style="z-index: -1;">
					<option value="teams" {% if user_mode == 'teams' %}selected{% endif %}>
						Teams
					</option>
					<option value="users" {% if user_mode == 'users' %}selected{% endif %}>
						Users
					</option>
				</select>
			</div>
		</div>

		<div class="form-group">
			<label for="ctf_theme">
				Theme
				<small class="form-text text-muted">
					Switch themes to change CTFd's aesthetics
				</small>
			</label>
			<select class="form-control custom-select" id="ctf_theme" name="ctf_theme">
				<option>{{ ctf_theme }}</option>
				{% for theme in themes %}
					<option>{{ theme }}</option>
				{% endfor %}
			</select>
		</div>

		<div class="form-group">
			<label>
				Theme Color
				<small class="form-text text-muted">
					Color used by theme to control aesthetics. Requires theme support.
				</small>
			</label>
			<div class="d-inline-block">
				<input type="color" id="config-color-picker">
				<button type="button" class="btn-sm btn-primary" id="config-color-update">Update CSS</button>
			</div>
		</div>

		<div class="form-group">
			<label>
				Theme Header
				<small class="form-text text-muted">
					Theme headers are inserted just before the <code>&lt;/head&gt;</code> tag on all public facing pages.
					Requires theme support.
				</small>
			</label>
			<textarea class="form-control" id="theme-header" name="theme_header" rows="7">{{ theme_header or "" }}</textarea>
		</div>

		<div class="form-group">
			<label>
				Theme Footer
				<small class="form-text text-muted">
					Theme footers are inserted just before the <code>&lt;/body&gt;</code> tag on all public facing pages.
					Requires theme support.
				</small>
			</label>
			<textarea class="form-control" id="theme-footer" name="theme_footer" rows="7">{{ theme_footer or "" }}</textarea>
		</div>

		<button type="submit" class="btn btn-md btn-primary float-right">Update</button>
	</form>
</div>
