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

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="email_addresses">Email addresses</h3>
				<form method="POST" action="{% url 'customize' 'email_addresses' %}#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 {{ facility_name }} information. Automated emails sent from {{ site_title }} 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 id="calendar_settings">Calendar settings</h3>
				<form method="POST" action="{% url 'customize' 'calendar_settings' %}#calendar_settings" class="form-horizontal">
					{% csrf_token %}
					<div class="form-group">
						<div class="col-md-12">
							<label class="control-label col-md-2" >Default view:</label>
							<div class="checkbox">
								<label><input type="radio" id="calendar_view" name="calendar_view" {% if not calendar_view or calendar_view == 'agendaWeek' %}checked{% endif %} value="agendaWeek"> Week view</label>
								<label><input type="radio" id="calendar_view" name="calendar_view" {% if calendar_view == 'month' %}checked{% endif %} value="month"> Month view</label>
								<label><input type="radio" id="calendar_view" name="calendar_view" {% if calendar_view == 'agendaDay' %}checked{% endif %} value="agendaDay"> Day view</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<label class="control-label col-md-2" >First day of the week:</label>
							<div class="checkbox">
								<label><input type="radio" id="calendar_first_day_of_week" name="calendar_first_day_of_week" {% if not calendar_first_day_of_week or calendar_first_day_of_week == '1' %}checked{% endif %} value="1"> Monday</label>
								<label><input type="radio" id="calendar_first_day_of_week" name="calendar_first_day_of_week" {% if calendar_first_day_of_week == '0' %}checked{% endif %} value="0"> Sunday</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="calendar_start_of_the_day">Start of the day</label>
						<div class="col-md-3">
							<input type="text" id="calendar_start_of_the_day" name="calendar_start_of_the_day" class="form-control" value="{{ calendar_start_of_the_day }}" placeholder="07:00:00">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The time the day starts in the calendar view (24h format).
						</div>
					</div>
                    <div class="form-group">
						<label class="control-label col-md-2" for="calendar_outage_recurrence_limit">Outage recurrence limit</label>
						<div class="col-md-3">
                            <div class="input-group">
							    <input type="number" id="calendar_outage_recurrence_limit" name="calendar_outage_recurrence_limit" class="form-control" value="{{ calendar_outage_recurrence_limit }}">
                                <span class="input-group-addon">days</span>
                            </div>
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The maximum number of days a recurring scheduled outage can be set in advance.
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12" style="margin-top: 15px">
							The following settings allow to customize the date format in the different calendar views. See <a href="https://fullcalendar.io/docs/v1/formatDate" target="_blank">FullCalendar documentation</a> for more information on the syntax.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="calendar_day_column_format">Day column format</label>
						<div class="col-md-3">
							<input type="text" id="calendar_day_column_format" name="calendar_day_column_format" class="form-control" value="{{ calendar_day_column_format }}"  placeholder="dddd MM/DD/YYYY">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The column date format for the day view.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="calendar_week_column_format">Week column format</label>
						<div class="col-md-3">
							<input type="text" id="calendar_week_column_format" name="calendar_week_column_format" class="form-control" value="{{ calendar_week_column_format }}"  placeholder="ddd M/DD">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The column date format for the week view.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="calendar_month_column_format">Month column format</label>
						<div class="col-md-3">
							<input type="text" id="calendar_month_column_format" name="calendar_month_column_format" class="form-control" value="{{ calendar_month_column_format }}"  placeholder="ddd">
						</div>
						<div class="col-md-7 form-control-static light-grey">
							The column date format for the month view.
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="checkbox">
								<label><input type="checkbox" name="calendar_now_indicator" {% if calendar_now_indicator %}checked{% endif %} value="enabled">Show current time indicator on the calendar</label><br/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="checkbox">
								<label><input type="checkbox" name="calendar_display_not_qualified_areas" {% if calendar_display_not_qualified_areas %}checked{% endif %} value="enabled">Also show areas (for reservations) that the user doesn't have access too (they will be grayed out)</label><br/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<label class="control-label col-md-2" >Overview options:</label>
							<div class="checkbox">
								<label style="padding-right: 20px;"><input type="checkbox" id="calendar_all_tools" name="calendar_all_tools" {% if calendar_all_tools  %}checked{% endif %} value="enabled"> Enable all tools option</label>
								<label style="padding-right: 20px;"><input type="checkbox" id="calendar_all_areas" name="calendar_all_areas" {% if calendar_all_areas %}checked{% endif %} value="enabled"> Enable all areas option</label>
								<label style="padding-right: 20px;"><input type="checkbox" id="calendar_all_areastools" name="calendar_all_areastools" {% if calendar_all_areastools %}checked{% endif %} value="enabled"> Enable all tools & areas option</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 id="application_settings">Application settings</h3>
				<form method="POST" action="{% url 'customize' 'application_settings' %}#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 from landing page</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 from landing page</label><br/>
								<label><input type="checkbox" name="calendar_login_logout" {% if calendar_login_logout %}checked{% endif %} value="enabled">Show access controlled area login/logout button on calendar view header (requires login and/or logout feature enabled above)</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="checkbox">
								<label><input type="checkbox" name="dashboard_display_not_qualified_areas" {% if dashboard_display_not_qualified_areas %}checked{% endif %} value="enabled">Also show areas the user doesn't have access to in status dashboard</label><br/>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="facility_name">Facility Name</label>
						<div class="col-md-5">
							<input type="text" id="facility_name" name="facility_name" class="form-control" value="{{ facility_name }}">
						</div>
						<div class="col-md-5 form-control-static light-grey">
							The name of the facility to use in all templates.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="site_title">Site Title</label>
						<div class="col-md-5">
							<input type="text" id="site_title" name="site_title" class="form-control" value="{{ site_title }}">
						</div>
						<div class="col-md-5 form-control-static light-grey">
							The name of the site to use in all templates/headers.
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-2" for="buddy_board_disclaimer">Buddy Board Disclaimer</label>
						<div class="col-md-5">
							<textarea id="buddy_board_disclaimer" name="buddy_board_disclaimer" class="form-control">{{ buddy_board_disclaimer }}</textarea>
						</div>
						<div class="col-md-5 form-control-static light-grey">
							The disclaimer to display on the buddy board page.
						</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 id="interlock_settings">Interlock settings</h3>
				<form method="POST" action="{% url 'customize' 'interlock_settings' %}#interlock_settings" class="form-horizontal">
					{% csrf_token %}
                    <div class="form-group">
						<label class="control-label col-md-2" for="tool_interlock_failure_message">Tool interlock failure message</label>
						<div class="col-md-5">
							<textarea id="tool_interlock_failure_message" name="tool_interlock_failure_message" class="form-control">{{ tool_interlock_failure_message }}</textarea>
						</div>
						<div class="col-md-5 form-control-static light-grey">
							The message to display when a tool interlock command fails.
						</div>
					</div>
                    <div class="form-group">
						<label class="control-label col-md-2" for="door_interlock_failure_message">Door interlock failure message</label>
						<div class="col-md-5">
							<textarea id="door_interlock_failure_message" name="door_interlock_failure_message" class="form-control">{{ door_interlock_failure_message }}</textarea>
						</div>
						<div class="col-md-5 form-control-static light-grey">
							The message to display when a door interlock command fails.
						</div>
					</div>
                    <div class="form-group">
						<div class="col-md-12">
							<div class="checkbox">
								<label><input type="checkbox" name="allow_bypass_interlock_on_failure" {% if allow_bypass_interlock_on_failure %}checked{% endif %} value="enabled">Check this box to offer users the option to bypass lock/unlock command when there is an interlock error.</label><br/>
							</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 id="banner_login">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 {{ site_title }} users at your organization.</p>
				<form method="POST" action="{% url 'customize' 'login_banner' %}#banner_login" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('login_banner')">
					{% 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 id="safety_intro">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' %}#safety_intro" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('safety_introduction')">
					{% 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" style="margin-top: 10px">{{ safety_introduction|safe }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="facility_rules_tuto">&quot;<a href="{% url 'facility_rules' %}" target="_blank">{{ facility_name }} rules tutorial</a>&quot; page</h3>
				<p>
					The {{ facility_name }} rules tutorial is an opportunity to provide new users with a tutorial to your lab operating procedures and rules.
					<br>The HTML you upload is rendered with the Django template engine. You can use JavaScript (including jQuery) within the page.
					<br>
					<ul>
                        <li>The form should include <b>{% templatetag openblock %} csrf_token {% templatetag closeblock %}</b> inside the form tags.</li>
                        <li>Completion of the HTML form should be POSTed to <b>"{% templatetag openblock %} url 'facility_rules' {% templatetag closeblock %}"</b> (exactly as is).</li>
					</ul>
					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' 'facility_rules_tutorial' %}#facility_rules_tuto" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('facility_rules_tutorial')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="facility_rules_tutorial" class="customization-input-file" onchange="this.style.color = 'inherit';$('#facility_rules_tutorial_span').hide()">
						{% if facility_rules_tutorial %}<span id="facility_rules_tutorial_span">facility_rules_tutorial.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload {{ facility_name }} rules tutorial" class="btn btn-success">
					</div>
				</form>
				{% if facility_rules_tutorial %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#facility_rules_tutorial_render">Show current content</button>
					<div id="facility_rules_tutorial_render" class="collapse customization-content">{{ facility_rules_tutorial }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="authorization">&quot;<a href="{% url 'authorization_failed' %}" target="_blank">{{ facility_name }} failed login</a>&quot; message</h3>
				<p>
					This message is displayed after authentication when either no matching username could be found in the database or if that user has been deactivated.
					<br>The HTML you upload is rendered with the Django template engine. You can use JavaScript (including jQuery) within the message.
				</p>
				<form method="POST" action="{% url 'customize' 'authorization_failed' %}#authorization" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('authorization_failed')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="authorization_failed" class="customization-input-file" onchange="this.style.color = 'inherit';$('#authorization_failed_span').hide()">
						{% if authorization_failed %}<span id="authorization_failed_span">authorization_failed.html</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload failed login page" class="btn btn-success">
					</div>
				</form>
				{% if authorization_failed %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#authorization_failed_render">Show current content</button>
					<div id="authorization_failed_render" class="collapse" style="margin-top: 10px">{{ authorization_failed|safe }}</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="jumbo">&quot;<a href="{% url 'jumbotron' %}" target="_blank">Jumbotron</a>&quot; watermark</h3>
				<p>This image is displayed as background for the Jumbotron. It is set as a full background screen, so your image needs to take that into account.
					<br>The image you upload should be a valid image file (recommended size is 1500x1000).
				</p>
				<form method="POST" action="{% url 'customize' 'jumbotron_watermark' %}#jumbo" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('jumbotron_watermark')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="jumbotron_watermark" class="customization-input-file" onchange="this.style.color = 'inherit';$('#jumbotron_watermark_span').hide()">
						{% if jumbotron_watermark %}<span id="jumbotron_watermark_span">jumbotron_watermark.png</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload Jumbotron watermark image" class="btn btn-success">
					</div>
				</form>
				{% if jumbotron_watermark %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#jumbotron_watermark_render">Show current content</button>
					<div id="jumbotron_watermark_render" class="collapse customization-content" style="white-space: normal">
						<img alt="jumbotron_watermark" src="{{ MEDIA_URL }}jumbotron_watermark.png" height="400px" style="border: 1px solid #ddd"/>
					</div>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="cancellation">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' %}#cancellation" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('cancellation_email')">
					{% 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 %}<a id="cancellation_email_span" href="data:text/html,{{ cancellation_email|urlencode }}" download="cancellation_email.html" target="_blank">cancellation_email.html</a>{% 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>
					<table id="cancellation_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ cancellation_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

        <div class="panel panel-default">
			<div class="panel-body">
				<h3 id="counter_threshold_reached_email">Counter threshold reached email</h3>
				<p>
					This email is sent to the counter's warning email when the value of an counter reaches the warning threshold.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>counter</b> - the counter which value reached the warning threshold</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'counter_threshold_reached_email' %}#counter_threshold_reached_email" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('counter_threshold_reached_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="counter_threshold_reached_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#counter_threshold_reached_email_span').hide()">
						{% if counter_threshold_reached_email %}<a id="counter_threshold_reached_email_span" href="data:text/html,{{ counter_threshold_reached_email|urlencode }}" download="counter_threshold_reached_email.html" target="_blank">counter_threshold_reached_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload counter threshold reached email" class="btn btn-success">
					</div>
				</form>
				{% if counter_threshold_reached_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#counter_threshold_reached_email_render">Show current content</button>
					<table id="counter_threshold_reached_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ counter_threshold_reached_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="feedback">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' %}#feedback" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('feedback_email')">
					{% 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 %}<a id="feedback_email_span" href="data:text/html,{{ feedback_email|urlencode }}" download="feedback_email.html" target="_blank">feedback_email.html</a>{% 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>
					<table id="feedback_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ feedback_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="generic">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' %}#generic" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('generic_email')">
					{% 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 %}<a id="generic_email_span" href="data:text/html,{{ generic_email|urlencode }}" download="generic_email.html" target="_blank">generic_email.html</a>{% 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>
					<table id="generic_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ generic_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="missed_reservation">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' %}#missed_reservation" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('missed_reservation_email')">
					{% 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 %}<a id="missed_reservation_email_span" href="data:text/html,{{ missed_reservation_email|urlencode }}" download="missed_reservation_email.html" target="_blank">missed_reservation_email.html</a>{% 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>
					<table id="missed_reservation_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ missed_reservation_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="facility_rules">{{ facility_name }} rules tutorial email</h3>
				<p>
					This email is sent when a user completes the {{ facility_name }} 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 {{ facility_name }} rules and proceedures.</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'facility_rules_tutorial_email' %}#facility_rules" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('facility_rules_tutorial_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="facility_rules_tutorial_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#facility_rules_tutorial_email_span').hide()">
						{% if facility_rules_tutorial_email %}<a id="facility_rules_tutorial_email_span" href="data:text/html,{{ facility_rules_tutorial_email|urlencode }}" download="facility_rules_tutorial_email.html" target="_blank">facility_rules_tutorial_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload {{ facility_name }} rules tutorial email" class="btn btn-success">
					</div>
				</form>
				{% if facility_rules_tutorial_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#facility_rules_tutorial_email_render">Show current content</button>
					<table id="facility_rules_tutorial_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ facility_rules_tutorial_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="new_task">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' %}#new_task" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('new_task_email')">
					{% 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 %}<a id="new_task_email_span" href="data:text/html,{{ new_task_email|urlencode }}" download="new_task_email.html" target="_blank">new_task_email.html</a>{% 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>
					<table id="new_task_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ new_task_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="out_of_time_reservation">Out of time reservation email</h3>
				<p>
					This email is sent when a user is still logged in an area but his reservation expired. A grace period can be set when configuring the area.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the reservation that the user is out of time on</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'out_of_time_reservation_email' %}#out_of_time_reservation" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('out_of_time_reservation_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="out_of_time_reservation_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#out_of_time_reservation_email_span').hide()">
						{% if out_of_time_reservation_email %}<a id="out_of_time_reservation_email_span" href="data:text/html,{{ out_of_time_reservation_email|urlencode }}" download="out_of_time_reservation_email.html" target="_blank">out_of_time_reservation_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload out of time reservation email" class="btn btn-success">
					</div>
				</form>
				{% if out_of_time_reservation_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#out_of_time_reservation_email_render">Show current content</button>
					<table id="out_of_time_reservation_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ out_of_time_reservation_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="reorder_supplies_reminder_email">Reorder supplies reminder email</h3>
				<p>
					This email is sent to the item's reminder email when the quantity of an item falls below the reminder threshold and should be reordered.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>item</b> - the item which quantity fell below the reminder threshold</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reorder_supplies_reminder_email' %}#reorder_supplies_reminder_email" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reorder_supplies_reminder_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reorder_supplies_reminder_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reorder_supplies_reminder_email').hide()">
						{% if reorder_supplies_reminder_email %}<a id="reorder_supplies_reminder_email_span" href="data:text/html,{{ reorder_supplies_reminder_email|urlencode }}" download="reorder_supplies_reminder_email.html" target="_blank">reorder_supplies_reminder_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload reorder supplies reminder email" class="btn btn-success">
					</div>
				</form>
				{% if reorder_supplies_reminder_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reorder_supplies_reminder_email_render">Show current content</button>
					<table id="reorder_supplies_reminder_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reorder_supplies_reminder_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

        <div class="panel panel-default">
			<div class="panel-body">
				<h3 id="reservation_ending_reminder">Reservation ending reminder email</h3>
				<p>
					This email is sent to a user that is logged in an area 30 and 15 minutes before their area reservation ends.
					The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the user's reservation ending</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_ending_reminder_email' %}#reservation_ending_reminder" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reservation_ending_reminder_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="reservation_ending_reminder_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#reservation_ending_reminder_email_span').hide()">
						{% if reservation_ending_reminder_email %}<a id="reservation_ending_reminder_email_span" href="data:text/html,{{ reservation_ending_reminder_email|urlencode }}" download="reservation_ending_reminder_email.html" target="_blank">reservation_ending_reminder_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload reservation ending reminder email" class="btn btn-success">
					</div>
				</form>
				{% if reservation_ending_reminder_email %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#reservation_ending_reminder_email_render">Show current content</button>
					<table id="reservation_ending_reminder_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reservation_ending_reminder_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="reservation_reminder">Reservation reminder email</h3>
				<p>
					This email is sent to a user two hours before their tool/area 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' %}#reservation_reminder" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reservation_reminder_email')">
					{% 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 %}<a id="reservation_reminder_email_span" href="data:text/html,{{ reservation_reminder_email|urlencode }}" download="reservation_reminder_email.html" target="_blank">reservation_reminder_email.html</a>{% 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>
					<table id="reservation_reminder_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reservation_reminder_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="reservation_warning">Reservation warning email</h3>
				<p>
					This email is sent to a user two hours before their tool/area 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/access the area during their reservation (due to maintenance, outages or a missing required dependency)</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' 'reservation_warning_email' %}#reservation_warning" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reservation_warning_email')">
					{% 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 %}<a id="reservation_warning_email_span" href="data:text/html,{{ reservation_warning_email|urlencode }}" download="reservation_warning_email.html" target="_blank">reservation_warning_email.html</a>{% 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>
					<table id="reservation_warning_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reservation_warning_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="safety_issue">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' %}#safety_issue" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('safety_issue_email')">
					{% 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 %}<a id="safety_issue_email_span" href="data:text/html,{{ safety_issue_email|urlencode }}" download="safety_issue_email.html" target="_blank">safety_issue_email.html</a>{% 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>
					<table id="safety_issue_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ safety_issue_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="staff_charge_reminder">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' %}#staff_charge_reminder" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('staff_charge_reminder_email')">
					{% 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 %}<a id="staff_charge_reminder_email_span" href="data:text/html,{{ staff_charge_reminder_email|urlencode }}" download="staff_charge_reminder_email.html" target="_blank">staff_charge_reminder_email.html</a>{% 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>
					<table id="staff_charge_reminder_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ staff_charge_reminder_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="task_status">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' %}#task_status" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('task_status_notification')">
					{% 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 %}<a id="task_status_notification_span" href="data:text/html,{{ task_status_notification|urlencode }}" download="task_status_notification.html" target="_blank">task_status_notification.html</a>{% 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>
					<table id="task_status_notification_render" class="collapse customization-content-email">
						<tr>
							<td>{{ task_status_notification|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="unauthorized_tool_access">Unauthorized tool access email</h3>
				<p>
					This email is sent when a user tries to access a tool:
					<ul>
						<li>without being logged in to the area in which the tool resides (type 'area').</li>
						<li>without having a current area reservation (type 'reservation')</li>
					</ul>
					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>
					<li><b>type</b> - the type of abuse ('area' or 'reservation')</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'unauthorized_tool_access_email' %}#unauthorized_tool_access" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('unauthorized_tool_access_email')">
					{% 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 %}<a id="unauthorized_tool_access_email_span" href="data:text/html,{{ unauthorized_tool_access_email|urlencode }}" download="unauthorized_tool_access_email.html" target="_blank">unauthorized_tool_access_email.html</a>{% 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>
					<table id="unauthorized_tool_access_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ unauthorized_tool_access_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="usage_reminder">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' %}#usage_reminder" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('usage_reminder_email')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="usage_reminder_email" class="customization-input-file" onchange="this.style.color = 'inherit';$('#usage_reminder_email_span').hide()">
						{% if usage_reminder_email %}<a id="usage_reminder_email_span" href="data:text/html,{{ usage_reminder_email|urlencode }}" download="usage_reminder_email.html" target="_blank">usage_reminder_email.html</a>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload usage reminder 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>
					<table id="usage_reminder_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ usage_reminder_email|safe }}</td>
						</tr>
					</table>
				{% 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 and has opted to receive ics calendar notification in his preferences.
					<br>This is optional, the email will still be sent with only the calendar attachment if this is left blank.
				    <br><br>The following context variables are provided when the email is rendered:
				</p>
				<ul>
					<li><b>reservation</b> - the user's reservation that was created</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'reservation_created_user_email' %}" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reservation_created_user_email')">
					{% 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 %}<a id="reservation_created_user_email_span" href="data:text/html,{{ reservation_created_user_email|urlencode }}" download="reservation_created_user_email.html" target="_blank">reservation_created_user_email.html</a>{% 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>
					<table id="reservation_created_user_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reservation_created_user_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="reservation_cancelled">User reservation cancelled email</h3>
				<p>
					This email is sent to a user when the user cancels his own reservation and has opted to receive ics calendar notification in his preferences.
					<br>This is optional, the email will still be sent with only the calendar attachment if this is left blank.
				    <br><br>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' %}#reservation_cancelled" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('reservation_cancelled_user_email')">
					{% 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 %}<a id="reservation_cancelled_user_email_span" href="data:text/html,{{ reservation_cancelled_user_email|urlencode }}" download="reservation_cancelled_user_email.html" target="_blank">reservation_cancelled_user_email.html</a>{% 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>
					<table id="reservation_cancelled_user_email_render" class="collapse customization-content-email">
						<tr>
							<td>{{ reservation_cancelled_user_email|safe }}</td>
						</tr>
					</table>
				{% endif %}
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-body">
				<h3 id="rate">Tool Rates</h3>
				<p>
					You can upload a json file to display tool rates. An example of a valid rates file can be found on <a target="_blank" href="https://github.com/usnistgov/NEMO/raw/master/resources/splash_pad_rates.json">Github</a>.
					<br><br>It should be a JSON array of elements, and the following key/values are supported for each element:
				</p>
				<ul>
					<li><b>item_id</b> - the id of the tool or supply</li>
					<li><b>table_id</b> - the type of rate, one of "inventory_rate" (for supplies), "primetime_eq_hourly_rate" (for tool), "training_individual_hourly_rate" (for individual training rate), "training_group_hourly_rate" (for group training rate)</li>
					<li><b>rate_class</b> - the class, one of "full cost" or "cost shared"</li>
					<li><b>rate</b> - the rate amount</li>
    				<li>item - the name of the item (optional)</li>
				</ul>
				<form method="POST" action="{% url 'customize' 'rates' %}#rate" enctype="multipart/form-data" onsubmit="return check_delete_file_before_submit('rates')">
					{% csrf_token %}
					<div class="form-group">
						<input type="file" name="rates" class="customization-input-file" onchange="this.style.color = 'inherit';$('#rates_span').hide()">
						{% if rates %}<span id="rates_span">rates.json</span>{% endif %}
					</div>
					<div class="form-group">
						<input type="submit" value="Upload rates file" class="btn btn-success">
					</div>
				</form>
				{% if rates %}
					<div class="customization-separation"></div>
					<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#rates_render">Show current content</button>
					<div id="rates_render" class="collapse customization-content">{{ rates }}</div>
				{% endif %}
			</div>
		</div>
	</div>
	<script type="application/javascript">
		function check_delete_file_before_submit(name) {
			let has_file = $('input[name='+name+']')[0].files.length !== 0;
			if (!has_file) {
			    return confirm("Submitting without a new file will delete any previous content. \nAre you sure you want to continue?");
			} else {
			    return true;
			}
        }
	</script>
{% endblock %}
