{% if post and board %}
	{% set action = '?/' ~ board ~ '/ban/' ~ post %}
{% elseif edit_ban %}
	{% set action = '' %}
{% else %}
	{% set action = '?/ban' %}
{% endif %}

{% if reasons %}
<script type="text/javascript">
$(document).ready(function(){
	{% for key, reason in reasons %}
		var data_{{ key }} = '{"reason":"{{ reason.reason|escape('js') }}","message":"{{ reason.reason|escape('js') }}","length":"{{ reason.length|escape('js') }}"}';
		$('#reason-selector-id-{{ key }}').click(function() { populateFormJQuery('#ban-form-id', $.parseJSON(data_{{ key }})); });
	{% endfor %}
});
</script>
{% endif %}

<p style="font-weight:bold;text-align:center;">
	Remember, DO NOT perma VPN IPs. They reset every time they're turned on and off. 
	Give them a short 10h to 3d ban instead.
	<br>
	Another note: You SHOULD use the predefined ban buttons unless you are cleaning up bot spam. Refrain from making custom ban reasons.
</p>

<form action="{{ action }}" method="post" id="ban-form-id">
	<input type="hidden" name="token" value="{{ token }}">
	{% if redirect %}
		<input type="hidden" name="redirect" value="{{ redirect|e }}">
	{% endif %}
	{% if post and board %}
		<input type="hidden" name="delete" value="{% if delete %}1{% else %}0{% endif %}">
	{% endif %}

	<table>
	{% if not edit_ban %}
		<tr>
			<th>
				<label for="ip">{% trans 'IP' %} <span class="unimportant">{% trans '(or subnet)' %}</span></label>
			</th>
			<td>
				{% if not hide_ip %}
					<input type="text" name="ip" id="ip" size="30" maxlength="40" value="{{ ip|cloak_ip|e }}">
				{% else %}
					<em>{% trans 'hidden' %}</em>
				{% endif %}
			</td>
		</tr>
	{% endif %}
	{% if post and board and has_file %}
		<tr>
			<th>
				<label for="hashban">{% trans 'Hashban' %}</label>
			</th>
			<td>
				<input type="checkbox" name="hashban" id="hashban" value="1">
			</td>
		</tr>
	{% endif %}
		<tr>
			<th>
				<label for="reason">{% trans 'Reason' %}</label>
			</th>
			<td>
				<textarea name="reason" id="reason" rows="5" cols="30">{{ reason|e }}</textarea>
			</td>
		</tr>
		{% if post and board and not delete %}
			<tr>
				<th>
					<label for="message">{% trans 'Message' %}</label>
				</th>
				<td>
					<input type="checkbox" id="public_message" name="public_message"{% if config.mod.check_ban_message %} checked{% endif %}>
					<input type="text" name="message" id="message" size="35" maxlength="200" value="{{ config.mod.default_ban_message|e }}">
					<span class="unimportant">({% trans 'public; attached to post' %})</span>
					<script type="text/javascript">
						document.getElementById('message').disabled = !document.getElementById('public_message').checked;
						document.getElementById('public_message').onchange = function() {
							document.getElementById('message').disabled = !this.checked;
						}
					</script>
				</td>
			</tr>
		{% endif %}
		<tr>
			<th>
				<label for="length">{% trans 'Length' %}</label>
			</th>
			<td>
				<input type="text" name="length" id="length" size="20" maxlength="40">
					<span class="unimportant">(eg. "2d1h30m" or "2 days")</span>
			</td>
		</tr>
		<tr>
			<th>
				<label for="warn">{% trans 'Warn' %}</label>
			</th>
			<td>
				<input type="checkbox" name="warn" id="warn" value="1"{% if edit_ban and bans[0].warn %} checked{% endif %}>
			</td>
		</tr>
		<tr>
			<th>{% trans 'Board' %}</th>
			<td>
				<ul style="list-style:none;padding:2px 5px">
					<li>
						<input type="radio" name="board" value="*" id="ban-allboards" {% if (edit_ban and not current_board) or not edit_ban %}checked{% endif %}>
						<label style="display:inline" for="ban-allboards">
							<em>{% trans 'all boards' %}</em>
						</label>
					</li>

					{% for board in boards %}
						<li>
							<input type="radio" name="board" value="{{ board.uri }}" id="ban-board-{{ board.uri }}" {% if edit_ban and current_board == board.uri %}checked{% endif %}>
							<label style="display:inline" for="ban-board-{{ board.uri }}">
								{{ config.board_abbreviation|sprintf(board.uri) }} - {{ board.title|e }}
							</label>
						</li>
					{% endfor %}
				</ul>
			</td>
		</tr>
		<tr>
			<th>{% trans 'Predefined Reasons' %}</th>
			<td>
			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('1. You will not upload, post, discuss, request, or link to anything that violates local or United States law.','reason'); insertThisInThere('','length'); if(document.getElementById('hashban')) document.getElementById('hashban').checked = true;" value="1 (Illegal content)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('2. You will not advocate, promote, or post pedophilia or pedophilic content.','reason'); insertThisInThere('10h','length'); if(document.getElementById('hashban')) document.getElementById('hashban').checked = true;" value="2 (Promotion of pedophilia)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('3. You will not flood the report system with false reports, or otherwise disrupt the website\u02b9s functionality.','reason'); insertThisInThere('','length'); document.getElementById('warn').checked = true;" value="3 (Disruption of Website functionality)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('3. You will not flood the report system with false reports, or otherwise disrupt the website\u02b9s functionality.','reason'); insertThisInThere('10m','length');" value="3 (Disruption of Website functionality, Repeat Offender)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('3. You will not attempt to get the site taken down via DDoS attacks, false reports, etc.','reason'); insertThisInThere('','length');" value="3 (Attempting to get the site taken down)" />
			
			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('4. You will not advertise for imageboards, discord servers, telegram channels, crypto projects, etc.','reason'); insertThisInThere('1d','length');" value="4 (Advertising)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('4. You will not participate in offsite/hostile communities.','reason'); insertThisInThere('1d','length');" value="4 (Hostile/Offsite Participation)" />
			
			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('5. You will not post content that does not fit the theme of the board you are posting in.','reason'); insertThisInThere('','length'); document.getElementById('warn').checked = true;" value="5 (Unrelated to board)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('5. You will not post content that does not fit the theme of the board you are posting in.','reason'); insertThisInThere('10m','length');" value="5 (Unrelated to board, Repeat Offender)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('This is an adult website, only return when you are over 18.','reason'); insertThisInThere('1y','length');" value="6 (Underaged)" />

			<input type="button" onClick="document.getElementById('reason').value=''; document.getElementById('length').value=''; if(document.getElementById('warn')) document.getElementById('warn').checked=false; if(document.getElementById('hashban')) document.getElementById('hashban').checked=false; insertThisInThere('Ban evasion.','reason'); insertThisInThere('','length');" value="(Ban Evasion)" />


			</td>
		</tr>
		<tr>
			<td></td>
			<td><input name="new_ban" type="submit" value="{% if edit_ban %}{% trans 'Edit Ban' %}{% else %}{% trans 'New Ban' %}{% endif %}"></td>
		</tr>
	</table>
</form>

{% if reasons %}
<div style="text-align:center">
	<h3>Predefined Reasons:</h3>
	<table class="ban-reason-table">
		<tr id="reason-selector-heading">
			<th><b>Length</b></th>
			<th><b>Reason</b></th>
		</tr>
		{% for key, reason in reasons %}
		<tr id="reason-selector-id-{{ key }}">
			<td>{% if not reason.length %}forever{% else %}{{ reason.length|e }}{% endif %}</td>
			<td>{{ reason.reason|e }}</td>
		</tr>
		{% endfor %}
	</table>
</div>
{% endif %}