{% extends 'base.html' %}
{% block title %}Site customization{% endblock %}
{% block content %}
	<div class="container-fluid">
		<h1>Customizations</h1>
		<p>You can customize portions of NEMO to suit your organization's needs.</p>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Email addresses</h3>
				<form method="POST" action="{% url 'customize' 'email_addresses' %}" class="form-horizontal">
					{% csrf_token %}
					<div class="form-group">
						<label class="control-label col-md-2" for="feedback_email_address">Feedback</label>
						<div class="col-md-3">
							<input type="email" id="feedback_email_address" name="feedback_email_address" class="form-control" value="{{ feedback_email_address }}" placeholder="feedback@example.org">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							User feedback from the <a href="{% url 'feedback' %}">Feedback page</a> is sent to this email address.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="safety_email_address">Safety</label>
						<div class="col-md-3">
							<input type="email" id="safety_email_address" name="safety_email_address" class="form-control" value="{{ safety_email_address }}" placeholder="safety@example.org">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							<a href="{% url 'safety' %}">Safety suggestions and observations</a> are sent to this email address.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="abuse_email_address">Abuse</label>
						<div class="col-md-3">
							<input type="email" id="abuse_email_address" name="abuse_email_address" class="form-control" value="{{ abuse_email_address }}" placeholder="abuse@example.org">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							Alerts about user activities that could constitute 'abuse' are sent to this email address. Examples include missed reservations and unauthorized tool access.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="user_office_email_address">User office</label>
						<div class="col-md-3">
							<input type="email" id="user_office_email_address" name="user_office_email_address" class="form-control" value="{{ user_office_email_address }}" placeholder="information@example.org">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The main point of contact for users to obtain NanoFab information. Automated emails sent from NEMO are typically 'from' this address.
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-3">
							<input type="submit" value="Save email addresses" class="btn btn-success">
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Application settings</h3>
				<form method="POST" action="{% url 'customize' 'application_settings' %}" class="form-horizontal">
					{% csrf_token %}
					<div class="form-group">
						<div class="col-md-12">
							<div class="checkbox">
								<label><input type="checkbox" name="self_log_in" {% if self_log_in %}checked{% endif %} value="enabled">Allow users to log themselves into access controlled areas</label><br/>
								<label><input type="checkbox" name="self_log_out" {% if self_log_out %}checked{% endif %} value="enabled">Allow users to log themselves out of access controlled areas</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-3">
							<input type="submit" value="Save settings" class="btn btn-success">
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Login banner</h3>
				<p>The login banner is an informational message displayed underneath the username and password text boxes on the login page. You can customize this to convey rules for NEMO users at your organization.</p>
				<form method="POST" action="{% url 'customize' 'login_banner' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="login_banner" class="customization-input-file" onchange="this.style.color = 'inherit';$('#login_banner_span').hide()">
						{% if login_banner %}<span id="login_banner_span">login_banner.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload login banner" class="btn btn-success">
					</div>
				</form>
				{% if login_banner %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#login_banner_render">Show current content</button>
					<div id="login_banner_render" class="collapse customization-content">{{ login_banner }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Introduction for &quot;<a href="{% url 'safety' %}" target="_blank">Safety suggestions and observations</a>&quot; page</h3>
				<p>What would you like everyone to know about safety policy and procedures? This introduction will be presented at the top of the safety page. You can use HTML to modify the look of the text.</p>
				<form method="POST" action="{% url 'customize' 'safety_introduction' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="safety_introduction" class="customization-input-file" onchange="this.style.color = 'inherit';$('#safety_introduction_span').hide()">
						{% if safety_introduction %}<span id="safety_introduction_span">safety_introduction.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload safety introduction" class="btn btn-success">
					</div>
				</form>
				{% if safety_introduction %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#safety_introduction_render">Show current content</button>
					<div id="safety_introduction_render" class="collapse customization-content">{{ safety_introduction }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>&quot;<a href="{% url 'nanofab_rules' %}" target="_blank">NanoFab rules tutorial</a>&quot; page</h3>
				<p>The NanoFab rules tutorial is an opportunity to provide new users with a tutorial to your lab operating procedures and rules. The HTML you upload is rendered with the Django template engine. You can use JavaScript (including jQuery) within the page. Completion of the HTML form should be POSTed to the 'nanofab_rules' URL. Upon completion, the user's "training required" attribute is set to false, and they are able to make reservations and control tools.</p>
				<form method="POST" action="{% url 'customize' 'nanofab_rules_tutorial' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="nanofab_rules_tutorial" class="customization-input-file" onchange="this.style.color = 'inherit';$('#nanofab_rules_tutorial_span').hide()">
						{% if nanofab_rules_tutorial %}<span id="nanofab_rules_tutorial_span">nanofab_rules_tutorial.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload NanoFab rules tutorial" class="btn btn-success">
					</div>
				</form>
				{% if nanofab_rules_tutorial %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#nanofab_rules_tutorial_render">Show current content</button>
					<div id="nanofab_rules_tutorial_render" class="collapse customization-content">{{ nanofab_rules_tutorial }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Cancellation email</h3>
				<p>This email is sent to a user when a staff member cancels the user's reservation. The following context variables are provided when the email is rendered:</p>
				<ul>
					<li><b>reservation</b> - the user's reservation that was cancelled</li>
					<li><b>staff_member</b> - the user object of the staff member who cancelled the reservation</li>
					<li><b>reason</b> - the reason the staff member provided for cancelling the reservation</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'cancellation_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="cancellation_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#cancellation_email_span').hide()">
						{% if cancellation_email %}<span id="cancellation_email_span">cancellation_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload cancellation email" class="btn btn-success">
					</div>
				</form>
				{% if cancellation_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#cancellation_email_render">Show current content</button>
					<div id="cancellation_email_render" class="collapse customization-content">{{ cancellation_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Feedback email</h3>
				<p>
					This email is sent when a user <a href="{% url 'feedback' %}" target="_blank">submits feedback</a>. The feedback email address (at the top of this page) must also be configured for users to be able to do this.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>contents</b> - the user's feedback</li>
					<li><b>user</b> - the user object of the user who submitted the feedback</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'feedback_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="feedback_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#feedback_email_span').hide()">
						{% if feedback_email %}<span id="feedback_email_span">feedback_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload feedback email" class="btn btn-success">
					</div>
				</form>
				{% if feedback_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#feedback_email_render">Show current content</button>
					<div id="feedback_email_render" class="collapse customization-content">{{ feedback_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Generic email</h3>
				<p>A generic email that can be sent to qualified tool users, members of an account, or members of a project. Send these using the <a href="{% url 'email_broadcast' %}">email broadcast page</a>. The following context variables are provided when the email is rendered:</p>
				<ul>
					<li><b>title</b> - the user specified title of the email</li>
					<li><b>greeting</b> - a greeting to the recipients of the email</li>
					<li><b>contents</b> - the body of the email</li>
					<li><b>template_color</b> - the color to emphasize</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'generic_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="generic_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#generic_email_span').hide()">
						{% if generic_email %}<span id="generic_email_span">generic_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload generic email" class="btn btn-success">
					</div>
				</form>
				{% if generic_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#generic_email_render">Show current content</button>
					<div id="generic_email_render" class="collapse customization-content">{{ generic_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Missed reservation email</h3>
				<p>
					This email is sent when a user misses a reservation. If a tool is not used for an amount
					of time after the user's reservation has begun, it is marked as missed and removed from the calendar.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the reservation that the user missed</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'missed_reservation_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="missed_reservation_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#missed_reservation_email_span').hide()">
						{% if missed_reservation_email %}<span id="missed_reservation_email_span">missed_reservation_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload missed reservation email" class="btn btn-success">
					</div>
				</form>
				{% if missed_reservation_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#missed_reservation_email_render">Show current content</button>
					<div id="missed_reservation_email_render" class="collapse customization-content">{{ missed_reservation_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>NanoFab rules tutorial email</h3>
				<p>
					This email is sent when a user completes the NanoFab rules tutorial. It can contain a free-response answer (quiz question).
					If you do not upload a template then no notification email is sent to staff when a user completes the training tutorial.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>user</b> - the user's model instance</li>
					<li><b>making_reservations_rule_summary</b> - a free-response answer provided by the user. Normally, this is provided by the user to summarize their understanding of the NanoFab rules and proceedures.</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'nanofab_rules_tutorial_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="nanofab_rules_tutorial_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#nanofab_rules_tutorial_email_span').hide()">
						{% if nanofab_rules_tutorial_email %}<span id="nanofab_rules_tutorial_email_span">nanofab_rules_tutorial_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload NanoFab rules tutorial email" class="btn btn-success">
					</div>
				</form>
				{% if nanofab_rules_tutorial_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#nanofab_rules_tutorial_email_render">Show current content</button>
					<div id="nanofab_rules_tutorial_email_render" class="collapse customization-content">{{ nanofab_rules_tutorial_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>New task email</h3>
				<p>
					This email is sent when a new maintenance task is created for a tool.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>user</b> - the user who created the task</li>
					<li><b>task</b> - the task information</li>
					<li><b>tool</b> - the tool that the task is associated with</li>
					<li><b>tool_control_absolute_url</b> - the URL of the tool control page for the tool</li>
					<li><b>template_color</b> - an HTML color code indicating the severity of the problem. Orange for warning, red for shutdown.</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'new_task_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="new_task_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#new_task_email_span').hide()">
						{% if new_task_email %}<span id="new_task_email_span">new_task_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload new task email" class="btn btn-success">
					</div>
				</form>
				{% if new_task_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#new_task_email_render">Show current content</button>
					<div id="new_task_email_render" class="collapse customization-content">{{ new_task_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Reservation reminder email</h3>
				<p>
					This email is sent to a user two hours before their tool reservation begins.
					The reservation warning email must also exist for this email to be sent.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the user's upcoming reservation</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_reminder_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reservation_reminder_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reservation_reminder_email_span').hide()">
						{% if reservation_reminder_email %}<span id="reservation_reminder_email_span">reservation_reminder_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload reservation reminder email" class="btn btn-success">
					</div>
				</form>
				{% if reservation_reminder_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reservation_reminder_email_render">Show current content</button>
					<div id="reservation_reminder_email_render" class="collapse customization-content">{{ reservation_reminder_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Reservation warning email</h3>
				<p>
					This email is sent to a user two hours before their tool reservation begins and maintenance may interfere with the upcoming reservation.
					The reservation reminder email must also exist for this email to be sent.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the user's upcoming reservation</li>
					<li><b>fatal_error</b> - boolean value that, when true, indicates that it will be impossible for the user to use the tool during their reservation (due to tool maintenance or a missing required dependency)</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_warning_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reservation_warning_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reservation_warning_email_span').hide()">
						{% if reservation_warning_email %}<span id="reservation_warning_email_span">reservation_warning_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload reservation warning email" class="btn btn-success">
					</div>
				</form>
				{% if reservation_warning_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reservation_warning_email_render">Show current content</button>
					<div id="reservation_warning_email_render" class="collapse customization-content">{{ reservation_warning_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Safety issue email</h3>
				<p>
					This email is sent when a new maintenance task is created for a tool.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>issue</b> - the issue information</li>
					<li><b>issue_absolute_url</b> - the URL for the detailed view of the issue</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'safety_issue_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="safety_issue_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#safety_issue_email_span').hide()">
						{% if safety_issue_email %}<span id="safety_issue_email_span">safety_issue_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload safety issue email" class="btn btn-success">
					</div>
				</form>
				{% if safety_issue_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#safety_issue_email_render">Show current content</button>
					<div id="safety_issue_email_render" class="collapse customization-content">{{ safety_issue_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Staff charge reminder email</h3>
				<p>
					This email is periodically sent to remind staff that they are charging a user for staff time.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>staff_charge</b> - the staff charge that is in progress</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'staff_charge_reminder_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="staff_charge_reminder_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#staff_charge_reminder_email_span').hide()">
						{% if staff_charge_reminder_email %}<span id="staff_charge_reminder_email_span">staff_charge_reminder_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload staff charge reminder email" class="btn btn-success">
					</div>
				</form>
				{% if staff_charge_reminder_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#staff_charge_reminder_email_render">Show current content</button>
					<div id="staff_charge_reminder_email_render" class="collapse customization-content">{{ staff_charge_reminder_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Task status notification email</h3>
				<p>
					This email is sent when a tool task has be updated and set to a particular state.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>template_color</b> - the color to emphasize</li>
					<li><b>title</b> - a title indicating that the message is a task status notification</li>
					<li><b>task</b> - the task that was updated</li>
					<li><b>status_message</b> - the current status message for the task</li>
					<li><b>notification_message</b> - the notification message that is configured (via the admin site) for the status</li>
					<li><b>tool_control_absolute_url</b> - the URL of the tool control page for the task</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'task_status_notification' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="task_status_notification" class="customization-input-file" onchange="this.style.color = 'inherit';$('#task_status_notification_span').hide()">
						{% if task_status_notification %}<span id="task_status_notification_span">task_status_notification.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload task status notification email" class="btn btn-success">
					</div>
				</form>
				{% if task_status_notification %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#task_status_notification_render">Show current content</button>
					<div id="task_status_notification_render" class="collapse customization-content">{{ task_status_notification }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Unauthorized tool access email</h3>
				<p>
					This email is sent when a user tries to access a tool without being logged in to the area in which the tool resides.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>operator</b> - the person who attempted to use the tool</li>
					<li><b>tool</b> - the tool that the user was denied access to</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'unauthorized_tool_access_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="unauthorized_tool_access_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#unauthorized_tool_access_email_span').hide()">
						{% if unauthorized_tool_access_email %}<span id="unauthorized_tool_access_email_span">unauthorized_tool_access_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload unauthorized tool access email" class="btn btn-success">
					</div>
				</form>
				{% if unauthorized_tool_access_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#unauthorized_tool_access_email_render">Show current content</button>
					<div id="unauthorized_tool_access_email_render" class="collapse customization-content">{{ unauthorized_tool_access_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Usage reminder email</h3>
				<p>
					This email is periodically sent to remind a user that they have a tool enabled.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>user</b> - the user who is using a tool or logged in to an area</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'usage_reminder_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="usage_reminder_email">
					</div>
					<div class="form-group">
						<input type="submit" value="Upload new task email" class="btn btn-success">
					</div>
				</form>
				{% if usage_reminder_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#usage_reminder_email_render">Show current content</button>
					<div id="usage_reminder_email_render" class="collapse customization-content">{{ usage_reminder_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>User reservation created email</h3>
				<p>This email is sent to a user when the user creates a reservation. The following context variables are provided when the email is rendered:</p>
				<ul>
					<li><b>reservation</b> - the user's reservation that was cancelled</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_created_user_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reservation_created_user_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reservation_created_user_email_span').hide()">
						{% if reservation_created_user_email %}<span id="reservation_created_user_email_span">reservation_created_user_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload created reservation email" class="btn btn-success">
					</div>
				</form>
				{% if reservation_created_user_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reservation_created_user_email_render">Show current content</button>
					<div id="reservation_created_user_email_render" class="collapse customization-content">{{ reservation_created_user_email }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3>User reservation cancelled email</h3>
				<p>This email is sent to a user when the user cancels his own reservation. The following context variables are provided when the email is rendered:</p>
				<ul>
					<li><b>reservation</b> - the user's reservation that was cancelled</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_cancelled_user_email' %}" enctype="multipart/form-data">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reservation_cancelled_user_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reservation_cancelled_user_email_span').hide()">
						{% if reservation_cancelled_user_email %}<span id="reservation_cancelled_user_email_span">reservation_cancelled_user_email.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload cancelled reservation email" class="btn btn-success">
					</div>
				</form>
				{% if reservation_cancelled_user_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reservation_cancelled_user_email_render">Show current content</button>
					<div id="reservation_cancelled_user_email_render" class="collapse customization-content">{{ reservation_cancelled_user_email }}</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}