{% extends "base" %}
{% import "macros/form" as form %}

{% block title %}{% if mode == "register" %}Register a new tag{% else %}Edit {{id}}{% endif %} - {% endblock title
%}
{% block main %}
<h2>{% if mode == "register" %}Register a new tag{% else %}Edit {{id}}{% endif %}</h2>

<aside>
	<h3>A foreword</h3>
	<p>
		Registering a tag for your entity can be a pretty fun and intimate moment,
		but remember that this current version of <code>Doll.Tags</code> doesn't offer any private field.<br />
		<b>Anynull guessing your tag or finding it by mistake will have access to the info you enter.</b><br />
		In that sense, we recommend you to avoid entering personally identifiable information.
	</p>
</aside>

<section>
	{% if mode == "register" %}
	<h3>Now, to the registration!</h3>
	{% else %}
	<h3>Now, to the editing!</h3>
	{% endif %}

	{% if previous.form_errors | length > 0 %}
	<div class="form-error">
		<h4>Some errors were encountered...</h4>

		<ul>
			{% for err in previous.form_errors %}
			<li>{{err}}</li>
			{% endfor %}
		</ul>
	</div>
	{% endif %}

	<form method="POST">
		{% if mode != "register" %}
		<!-- No, changing this value in the HTML won't edit the tag, sorry :c it won't do anything but risk failing the edition -->
		<input type="hidden" name="ident" value="{{id}}">
		{% endif %}

		<section>
			<h4>Firstly, the tag's ID</h4>
			{% if mode == "register" %}
			<p>
				You may enter your own, but in case of collision it will not be usable.<br />
				To that end, here's a few free ones you may also pick from.
			</p>
			{% else %}
			<p>You can't change a tag's ID for now. If it's something you'd like to do, contact me directly.</p>
			{% endif %}

			<div class="dual-fields bordered raised">
				{% if mode == "register" %}
				<div>
					<p class="heading"><label for="ident">Enter its ID</label></p>
					<input type="text" inputmode="numeric" pattern="\d{6}" id="ident" name="ident" required size="6"
						placeholder="000000" {{form::value(ctx=previous, name="ident" )}} />
					{{form::error(ctx=previous, name="ident")}}


					<p>Or pick one of those pre-generated ones</p>

					<div id="pregen_ids">
						{% for id in ids %}
						<button type="button">{{id | pretty_id}}</button>
						{% endfor %}
					</div>
				</div>
				<div>
					<p class="heading"><label for="microchip_id">If it's microchipped,<br />you may enter the chip's
							ID</label></p>
					<input type="text" pattern="(0x)?[a-fA-F0-9]+" id="microchip_id" name="microchip_id"
						placeholder="A hexadecimal ID" {{form::value(ctx=previous, name="microchip_id" )}}>
					{{form::error(ctx=previous, name="microchip_id")}}
				</div>
				{% else %}
				<p class="heading"><label for="microchip_id">If it's microchipped,<br />you may enter the chip's
						ID</label></p>
				<input type="text" pattern="(0x)?[a-fA-F0-9]+" id="microchip_id" name="microchip_id"
					placeholder="A hexadecimal ID" {{form::value(ctx=previous, name="microchip_id" )}}>
				{{form::error(ctx=previous, name="microchip_id")}}
				{% endif %}
			</div>
		</section>

		<section>
			<h4>Names and contact info</h4>

			<div class="fields raised">
				<div>
					<label for="name">The entity's name and pronouns (required)</label>
					<div class="dual-fields">
						<div>
							<input type="text" name="name" id="name" required placeholder="A name or callsign"
								{{form::value(ctx=previous, name="name" )}} />
							{{form::error(ctx=previous, name="name")}}
							<p class="note">Remember: names only mean what you want them to!</p>
						</div>
						<div>
							<input class="pronoun" type="text" name="pronoun_subject" required maxlength="255"
								placeholder="they" {{form::value(ctx=previous, name="pronoun_subject" )}} /> /
							<input class="pronoun" type="text" name="pronoun_object" required maxlength="255"
								placeholder="them" {{form::value(ctx=previous, name="pronoun_object" )}} /> /
							<input class="pronoun" type="text" name="pronoun_possessive" required maxlength="255"
								placeholder="theirs" {{form::value(ctx=previous, name="pronoun_possessive" )}} />
							{{form::error(ctx=previous, name="pronoun_subject")}}
							{{form::error(ctx=previous, name="pronoun_object")}}
							{{form::error(ctx=previous, name="pronoun_possessive")}}
						</div>
					</div>
				</div>
				<div>
					<label for="handler_name">The handler's name (required) and contact</label>
					<div class="dual-fields">
						<div>
							<input type="text" name="handler_name" id="handler_name"
								placeholder="Another name or callsign" {{form::value(ctx=previous, name="handler_name"
								)}} />
							{{form::error(ctx=previous, name="handler_name")}}
						</div>
						<div>
							<input type="url" name="handler_link" id="handler_link"
								placeholder="E-mails can be entered using mailto:" {{form::value(ctx=previous,
								name="handler_link" )}} />
							{{form::error(ctx=previous, name="handler_link")}}
							<p class="note">Optional, will make the handler's name clickable.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<h4>Entity description and notable features</h4>
			<p>
				Have fun with those inputs; empty ones will not be shown so you can selectively fill them.<br />
				You can poke me if you'd like me to add more.
			</p>

			<div class="fields raised">
				<div class="dual-fields">
					<div class="fields">
						<div>
							<label for="kind">What kind of entity?</label>
							<input type="text" name="kind" id="kind" placeholder="Something" {{form::value(ctx=previous,
								name="kind" )}} />
							{{form::error(ctx=previous, name="kind")}}
						</div>
						<div>
							<label for="breed">What breed is it?</label>
							<input type="text" name="breed" id="breed" placeholder="Mutt :3" {{form::value(ctx=previous,
								name="breed" )}} />
							{{form::error(ctx=previous, name="breed")}}
						</div>
						<div>
							<label for="behaviour">Its general behaviour</label>
							<input type="text" name="behaviour" id="behaviour" placeholder="Totally independent"
								{{form::value(ctx=previous, name="behaviour" )}} />
							{{form::error(ctx=previous, name="behaviour")}}
						</div>
					</div>
					<div>
						<label for="description">A description about it?</label>
						<textarea name="description" id="description" rows="10"
							placeholder="feel free to write a bit about it or not at all">{{form::textarea(ctx=previous, name="description")}}</textarea>
						{{form::error(ctx=previous, name="description")}}
					</div>
				</div>
			</div>
		</section>

		<section>
			<h4>Chassis info</h4>
			<p>
				If it has a chassis of its own, you can fill the info below.
				All fields are mandatory if you decide to fill it.
			</p>

			<div class="fields raised">
				<div class="dual-fields">
					<div>
						<label for="chassis_type">The chassis' type</label>
						<input type="text" name="chassis_type" id="chassis_type" placeholder="Combat Doll"
							{{form::value(ctx=previous, name="chassis_type" )}} />
					</div>
					<div>
						<label for="chassis_id">Its assigned ID</label>
						<input type="text" name="chassis_id" id="chassis_id" placeholder="E-249"
							{{form::value(ctx=previous, name="chassis_id" )}} />
					</div>
					<div>
						<label for="chassis_color">Its dominant color</label>
						<input type="text" name="chassis_color" id="chassis_color" placeholder="Grey"
							{{form::value(ctx=previous, name="chassis_color" )}} />
					</div>
				</div>
				<div>
					{{form::error(ctx=previous, name="chassis_type")}}
					{{form::error(ctx=previous, name="chassis_id")}}
					{{form::error(ctx=previous, name="chassis_color")}}
				</div>
			</div>
		</section>

		<button class="submit" type="submit">
			{% if mode == "register" %}
			Register this tag!
			{% else %}
			Save your changes
			{% endif %}
		</button>
	</form>
</section>

<script>
	const $ident = document.getElementById("ident");
	const $pregen_ids = document.getElementById("pregen_ids");
	$pregen_ids.addEventListener("click", ev => $ident.value = ev.target.innerText.split("-").join(""));
</script>
{% endblock main %}