{% extends 'templates/base.html' %}
{% block title %}{{ super() }} | Bug Report{% endblock %}

{% block main %}
<section class='dark'>
	<div class='container'>
		<h1>Submit a Bug Report</h1>

		<p>You can use this form to submit a bug report.  You can also <a href="https://github.com/Tracman-org/Server/issues/new">post the issue on github</a>.  Or maybe you'd like to <a href="/suggestion">suggest a feature</a> instead?  </p>

		<script src="/static/js/validator.min.js"></script>
		<form id='suggestions-form' class='col-lg-10 col-lg-offset-1 form-horizontal' role="form" method="POST" data-toggle="validator">

			<div class='form-group' id='error-message' title="If you recieved an error message, put it here.  An error message may be added automatically.  ">
				<label class='control-label col-sm-2 col-lg-3' for="errorMessage">Error message (if any)  </label>
				<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
					<textarea class='form-control' name="errorMessage" rows="3" maxlength="2400" {% if errorMessage.length %}disabled{% endif %}>{{ errorMessage }}</textarea>
				</div>
				<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
			</div>

			<div class='form-group' id='recreation' title="Help me recreate the issue.  ">
				<label class='control-label col-sm-2 col-lg-3' for="recreation">What were you doing when this happened?  </label>
				<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
					<textarea class='form-control' name="recreation" rows="4" maxlength="2400"></textarea>
				</div>
				<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
			</div>

			<div class='form-group' id='bug' title="Describe the problem here.  ">
				<label class='control-label col-sm-2 col-lg-3' for="bug">What happened?  </label>
				<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
					<textarea class='form-control' name="bug" rows="4" maxlength="2400"></textarea>
				</div>
				<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
			</div>

			<div class='form-group' id='name' title="Put your name here if you want.  ">
				<label class='control-label col-sm-2 col-lg-3' for="name">Name</label>
				<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
					<input class='form-control' name="name" type="text" value="{{ user.name }}"
						maxlength="160"><br>
				</div>
				<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
			</div>

			<div class='form-group' id='email' title="Put an email address if you want a reply.  ">
				<label class='control-label col-sm-2 col-lg-3' for="email">Email</label>
				<div class='input-group col-xs-12 col-sm-10 col-lg-9'>
					<input class='form-control' name="email" type="email" value="{{ user.email }}"
						maxlength="160" data-error="That's not an email address"><br>
				</div>
				<div class='help-block with-errors col-xs-12 col-sm-10 col-sm-offset-2 col-lg-9 col-lg-offset-3'></div>
			</div>

			<div class='form-group flexbox' id='buttons'>
				<button type="submit" class='btn yellow'>SUBMIT</button>
				<a class='btn' href="/dashboard">nevermind</a>
			</div>
		</form>
	</div>
	
</section>
{% endblock %}