{% extends "default.html" %}
{% block pagetitle %}/h/{{sub}} Settings{% endblock %}
{% block content %}
{% if error %}
<div class="alert alert-danger alert-dismissible fade show mb-3 mt-4" role="alert">
	<i class="fas fa-exclamation-circle my-auto"></i>
	<span>
		{{error}}
	</span>
	<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
		<span aria-hidden="true"><i class="far fa-times"></i></span>
	</button>
</div>
{% endif %}

{% if msg %}
	<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
		<i class="fas fa-check-circle my-auto" aria-hidden="true"></i>
		<span>
			{{msg}}
		</span>
		<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true"><i class="far fa-times"></i></span>
		</button>
	</div>
{% endif %}


<div class="title w-lg-25 mt-5">
	<label class="text-lg" for="stealth">Stealth Mode</label>
</div>
<div class="body w-lg-100">
	<div class="custom-control custom-switch">
		<input autocomplete="off" type="checkbox" class="custom-control-input" id="stealth" name="stealth" {% if sub.stealth %}checked{% endif %} onchange="postToastSwitch(this,'/h/{{sub}}/stealth');">
		<label class="custom-control-label" for="stealth"></label>
	</div>
	<span class="text-small text-muted">Make this hole blocked by default (users can visit it to unblock it).</span>
</div>


<h5 class=" mt-5">Marsey</h5>

<div class="settings-section rounded">

	<div class="d-flex">

		<div class="title w-lg-25 text-md-center">
			<img loading="lazy" alt="sub marsey picture" src="{{sub.marsey_url}}" class="profile-pic-75">
		</div>

		<div class="body w-lg-100 my-auto">

			<div class="d-flex">

				<div>
					<form action="/h/{{sub}}/marsey_image" method="post" enctype="multipart/form-data">
						<input type="hidden" name="formkey" value="{{v|formkey}}">
						<label class="btn btn-secondary text-capitalize mr-2 mb-0">
							Update<input autocomplete="off" type="file" accept="image/*" {% if g.is_tor %}disabled{% endif %} hidden name="marsey" onchange="form.submit()">
						</label>
					</form>

				</div>

			</div>

			<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>

		</div>

	</div>

</div>


<h5 class=" mt-5">Sidebar Picture</h5>

<div class="settings-section rounded">

	<div class="d-flex">

		<div class="title w-lg-25 text-md-center">
			<img loading="lazy" alt="sub sidebar picture" src="{{sub.sidebar_url}}" class="profile-pic-75">
		</div>

		<div class="body w-lg-100 my-auto">

			<div class="d-flex">

				<div>
					<form action="/h/{{sub}}/sidebar_image" method="post" enctype="multipart/form-data">
						<input type="hidden" name="formkey" value="{{v|formkey}}">
						<label class="btn btn-secondary text-capitalize mr-2 mb-0">
							Update<input autocomplete="off" type="file" accept="image/*" {% if g.is_tor %}disabled{% endif %} hidden name="sidebar" onchange="form.submit()">
						</label>
					</form>

				</div>

			</div>

			<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>

		</div>

	</div>

</div>



<h5 class=" mt-5">Banner</h5>

<div class="settings-section rounded">

	<div class="d-flex">

		<div class="title w-lg-75 text-md-center">
			<img loading="lazy" alt="/h/{[sub.name]} banner" src="{{sub.banner_url}}" class="banner-pic-135">
		</div>

		<div class="body w-lg-100 my-auto">

			<div class="d-flex">

				<div>
					<form action="/h/{{sub}}/banner" method="post" enctype="multipart/form-data">
						<input type="hidden" name="formkey" value="{{v|formkey}}">
						<label class="btn btn-secondary text-capitalize mr-2 mb-0">
							Update<input autocomplete="off" type="file" {% if g.is_tor %}disabled{% endif %} accept="image/*" hidden name="banner" onchange="form.submit()">
						</label>
					</form>

				</div>

			</div>

			<div class="text-small text-muted mt-3">All image files are supported. Max file size is {% if v and v.patron %}16{% else %}8{% endif %} MB.</div>

		</div>

	</div>

</div>



<div class="row my-5 pt-5">
	<div class="col col-md-8">
		<div class="settings">
			<div id="description">
				<h2>Edit Sidebar</h2>
				<br>
			</div>
			<div class="body d-lg-flex">
				<div class="w-lg-100">
					<form id="sidebar" action="/h/{{sub}}/sidebar" method="post">
						<input type="hidden" name="formkey" value="{{v|formkey}}">
						<textarea autocomplete="off" maxlength="10000" class="form-control rounded" id="bio-text" aria-label="With textarea" placeholder="Enter sidebar here..." rows="10" name="sidebar" form="sidebar">{% if sub.sidebar %}{{sub.sidebar}}{% endif %}</textarea>

						<div class="d-flex mt-2">
							<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" onclick="disable(this)" value="Save">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col col-md-8">
		<div class="settings">
			<div id="description">
				<h2>Edit CSS</h2>
				<br>
			</div>
			<div class="body d-lg-flex">
				<div class="w-lg-100">
					<form id="css" action="/h/{{sub}}/css" method="post">
						<input type="hidden" name="formkey" value="{{v|formkey}}">
						<textarea autocomplete="off" maxlength="6000" class="form-control rounded" id="bio-text" aria-label="With textarea" placeholder="Enter css here..." rows="10" name="css" form="css">{% if sub.css %}{{sub.css}}{% endif %}</textarea>

						<div class="d-flex mt-2">
							<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" onclick="disable(this)" value="Save">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}