{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/search.css') }}" />
{% endblock %}

{%- block head_title %}
RFCartography
{% endblock head_title %}

{%- block main %}
<h1>
	Generate Maps of RFCs and their Relations
</h1>
<form action="/map" method="get" id="search">
	<fieldset>
		<label for="type">Series/Subseries</label>
		<label for="num">Document Number</label><br />
		<select name="type" id="type" form="search">
			<option value="rfc">RFC</option>
			<option value="std">STD</option>
			<option value="bcp">BCP</option>
			<option value="fyi">FYI</option>
		</select>
		<input type="number" name="num"  id="num" form="search" />
		<input type="submit" value="&rarr;" form="search">
	</fieldset>
	<fieldset>
		<legend>Note:</legend>
		<div>
			Large graphs result in very high loading times.
			If your request times out, try a lower depth limit.
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
	<fieldset>
		<legend>Size Limit:</legend>
		<div>
			<label for="depth">Max. Depth</label><br />
			<input type="number" name="depth"  id="depth" form="search" value="{{ config['DEPTH_DEFAULT'] }}" />
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
	<fieldset>
		<legend>Nodes:</legend>
		<div>
			<input type="checkbox" id="rfc_enable" name="nodes_enabled" value="rfc" checked>
			<label for="rfc_enable">RFC</label><br />
			<input type="checkbox" id="std_enable" name="nodes_enabled" value="std" checked>
			<label for="std_enable">STD</label><br />
			<input type="checkbox" id="bcp_enable" name="nodes_enabled" value="bcp" checked>
			<label for="bcp_enable">BCP</label><br />
			<input type="checkbox" id="fyi_enable" name="nodes_enabled" value="fyi" checked>
			<label for="fyi_enable">FYI</label><br />
			<input type="checkbox" id="nic_enable" name="nodes_enabled" value="nic" checked>
			<label for="nic_enable">NIC</label><br />
			<input type="checkbox" id="ien_enable" name="nodes_enabled" value="ien" checked>
			<label for="ien_enable">IEN</label><br />
			<input type="checkbox" id="rtr_enable" name="nodes_enabled" value="rtr" checked>
			<label for="rtr_enable">RTR</label>
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
	<fieldset>
		<legend>Node Colors:</legend>
		<div>
			<label for="rfc_color">RFC</label>
			<input type="color" id="rfc_color" name="rfc_color" form="search" value="#2072b1" /><br />
			<label for="std_color">STD</label>
			<input type="color" id="std_color" name="std_color" form="search" value="#c21a7e" /><br />
			<label for="bcp_color">BCP</label>
			<input type="color" id="bcp_color" name="bcp_color" form="search" value="#6d388d" /><br />
			<label for="fyi_color">FYI</label>
			<input type="color" id="fyi_color" name="fyi_color" form="search" value="#8bbd3e" /><br />
			<label for="nic_color">NIC</label>
			<input type="color" id="nic_color" name="nic_color" form="search" value="#efe50b" /><br />
			<label for="ien_color">IEN</label>
			<input type="color" id="ien_color" name="ien_color" form="search" value="#f28f20" /><br />
			<label for="rtr_color">RTR</label>
			<input type="color" id="rtr_color" name="rtr_color" form="search" value="#e32326" />
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
	<fieldset>
		<legend>Edge Style:</legend>
		<div>
			<label for="obsoletes_style">obsoletes</label>
			<select name="obsoletes_style" id="obsoletes_style" form="search">
				<option value="solid">solid</option>
				<option value="dotted">dotted</option>
				<option value="dashed" selected>dashed</option>
				<option value="dashdot">dashdot</option>
				<option value="none">none</option>
			</select><br />
			<label for="obsoleted_by_style">obsoleted by</label>
			<select name="obsoleted_by_style" id="obsoleted_by_style" form="search">
				<option value="solid">solid<hr /></option>
				<option value="dotted">dotted</option>
				<option value="dashed" selected>dashed</option>
				<option value="dashdot">dashdot</option>
				<option value="none">none</option>
			</select><br />
			<label for="updates_style">updates</label>
			<select name="updates_style" id="updates_style" form="search">
				<option value="solid">solid<hr /></option>
				<option value="dotted">dotted</option>
				<option value="dashed">dashed</option>
				<option value="dashdot" selected>dashdot</option>
				<option value="none">none</option>
			</select><br />
			<label for="updated_by_style">updated by</label>
			<select name="updated_by_style" id="updated_by_style" form="search">
				<option value="solid">solid<hr /></option>
				<option value="dotted">dotted</option>
				<option value="dashed">dashed</option>
				<option value="dashdot" selected>dashdot</option>
				<option value="none">none</option>
			</select><br />
			<label for="is_also_style">is also</label>
			<select name="is_also_style" id="is_also_style" form="search">
				<option value="solid" selected>solid<hr /></option>
				<option value="dotted">dotted</option>
				<option value="dashed">dashed</option>
				<option value="dashdot">dashdot</option>
				<option value="none">none</option>
			</select><br />
			<label for="see_also_style">see also</label>
			<select name="see_also_style" id="see_also_style" form="search">
				<option value="solid">solid<hr /></option>
				<option value="dotted" selected>dotted</option>
				<option value="dashed">dashed</option>
				<option value="dashdot">dashdot</option>
				<option value="none">none</option>
			</select>
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
	<fieldset>
		<legend>Edge Colors:</legend>
		<div>
			<label for="obsoletes_color">obsoletes</label>
			<input type="color" id="obsoletes_color" name="obsoletes_color" form="search" value="#607d8d" /><br />
			<label for="obsoleted_by_color">obsoleted by</label>
			<input type="color" id="obsoleted_by_color" name="obsoleted_by_color" form="search" value="#303c50" /><br />
			<label for="updates_color">updates</label>
			<input type="color" id="updates_color" name="updates_color" form="search" value="#607d8d" /><br />
			<label for="updated_by_color">updated by</label>
			<input type="color" id="updated_by_color" name="updated_by_color" form="search" value="#303c50" /><br />
			<label for="is_also_color">is also</label>
			<input type="color" id="is_also_color" name="is_also_color" form="search" value="#132e41" /><br />
			<label for="see_also_color">see also</label>
			<input type="color" id="see_also_color" name="see_also_color" form="search" value="#008e90" />
		</div>
		<div><!--workaround to center content vertically--></div>
	</fieldset>
</form>
{% endblock main %}