{% extends "default.html" %}
{% block pagetitle %}/h/{{hole}} Settings{% endblock %}

{% block content %}

<div class="title mt-5">
	<label class="text-lg" for="stealth">Stealth Mode</label>
</div>
<div class="d-inline-block w-lg-100 pt-1 pt-lg-3">
	<div class="custom-control custom-switch">
		<input autocomplete="off" type="checkbox" class="custom-control-input" id="stealth" name="stealth" {% if hole.stealth %}checked{% endif %} data-nonce="{{g.nonce}}" data-onchange="postToastSwitch(this,'/h/{{hole}}/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">
	<img loading="lazy" alt="sub marsey picture" src="{{hole.marsey_url}}" style="max-width:100px">
	<form class="d-inline-block" action="/h/{{hole}}/marsey_image" method="post" enctype="multipart/form-data">
		<input hidden name="formkey" value="{{v|formkey}}">
		<label class="btn btn-secondary text-capitalize mr-2 mb-0">
			Upload<input autocomplete="off" type="file" accept="image/*" {% if g.is_tor %}disabled{% endif %} hidden name="marsey" data-nonce="{{g.nonce}}" onchange_submit>
		</label>
	</form>
	<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>

<h5 class=" mt-5">Sidebar Picture</h5>
<div class="settings-section rounded">
	<img class="mr-3" loading="lazy" alt="sub sidebar picture" src="{{hole.sidebar_url}}" style="max-width:min(300px,100%)">
	<form class="d-inline-block mt-2" action="/h/{{hole}}/sidebar_image" method="post" enctype="multipart/form-data">
		<input hidden name="formkey" value="{{v|formkey}}">
		<label class="btn btn-secondary text-capitalize mr-2 mb-0">
			Upload<input autocomplete="off" type="file" accept="image/*" {% if g.is_tor %}disabled{% endif %} hidden name="sidebar" data-nonce="{{g.nonce}}" onchange_submit>
		</label>
	</form>
	<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>

<h5 class="mt-5">Banners</h5>
<div class="settings-section rounded hole-banner-update-section">
	{% for banner in hole.banner_urls %}
	<section id="hole-banner-update-{{loop.index - 1}}" class="mt-5 d-block hole-settings-subsection">
		<img class="mr-3" loading="lazy" alt="/h/{{hole.name}} banner" src="{{banner}}" style="max-height:300px;max-width:100%">
		<button class="btn btn-danger hole-banner-delete-button mt-2" id="hole-banner-delete-{{loop.index}}" data-nonce="{{g.nonce}}" data-onclick="areyousure(this)" data-areyousure="postToastReload(this, '/h/{{hole.name}}/settings/banners/delete/{{loop.index - 1}}')">Delete</button>
	</section>
	{% else %}
		<section id="hole-banner-no-banners" class="d-block hole-settings-subsection">
			{{macros.ghost_box("No banners uploaded", "", 2, "flex:1")}}
		</section>
	{% endfor %}
	{% if not g.is_tor %}
	<section id="hole-banner-upload-new" class="mt-5 hole-settings-subsection">
		<form class="d-inline-block" action="/h/{{hole.name}}/settings/banners/" method="post" enctype="multipart/form-data">
			<input hidden name="formkey" value="{{v|formkey}}">
			<label class="btn btn-secondary text-capitalize mr-2 mb-0">
				Upload New Banner<input autocomplete="off" type="file" accept="image/*" hidden name="banner" data-nonce="{{g.nonce}}" onchange_submit>
			</label>
		</form>
		<button type="button" class="btn btn-danger hole-banner-delete-button" id="hole-banner-delete-all" data-nonce="{{g.nonce}}" data-onclick="areyousure(this)" data-areyousure="postToastReload(this, '/h/{{hole.name}}/settings/banners/delete_all')">Delete All Banners</button>
		<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>
	</section>
	{% endif %}
</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/{{hole}}/sidebar" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHR(this)">
						<input hidden name="formkey" value="{{v|formkey}}">
						<textarea autocomplete="off" maxlength="10000" class="form-control rounded" id="bio-text" placeholder="Enter sidebar here..." rows="10" name="sidebar" form="sidebar">{% if hole.sidebar %}{{hole.sidebar}}{% endif %}</textarea>
						<div class="d-flex mt-2">
							<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" 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/{{hole}}/css" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHR(this)">
						<input hidden name="formkey" value="{{v|formkey}}">
						<textarea autocomplete="off" maxlength="6000" class="form-control rounded" id="bio-text" placeholder="Enter css here..." rows="10" name="css" form="css">{% if css %}{{css}}{% endif %}</textarea>
						<div class="d-flex mt-2">
							<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" value="Save">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}