{% extends "base.html" %}

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<div class="jumbotron">
	<div class="container">
		<h1>Write-Up for {{ challenge.name }}</h1>
	</div>
</div>
<div class="container">
	{% if error %}
	<div class="row">
		<div class="col-md-12">
			<div class="pt-5 mt-5 text-center">
				<h1>{{ error.heading }}</h1>
				<hr class="w-50">
				<h2>{{ error.msg }}</h2>
			</div>
		</div>
	</div>
	{% else %}
	<div class="row">
		<div class="col-md-12">
			<form method="POST">

				<div class="form-group">
					<div class="col-md-12">
						<h3>{{ challenge.name }}</h3>
						<hr>
						<p>Type your write-up here. The first line will be used as the title.</p>
						<p>We encourage you to submit a write-ups detailing your process and what you tried (even if you
						   didn't solve the challenge) and browse through others' write-ups. They don't have to be
						   extensive masterpieces, just enough that someone with some limited familiarity with the
						   relevant concepts can follow along. Write-ups that are blatantly lazy point grabs (i.e.
						   a single sentence) won't be awarded points.</p>
						<small class="text-muted"><a href="https://www.markdownguide.org/basic-syntax/">Markdown</a> is supported</small>
						<textarea class="d-none" id="writeup-content-editor" name="content" style="display:none;">{{ writeup.provided }}</textarea>
					</div>
				</div>

				<div class="form-group float-right">
					<input type="hidden" value="{{ Session.nonce }}" name="nonce" id="nonce" />
					<a class="btn btn-primary" href="{{ url_for('writeups.view_writeup', writeup_id=writeup.id) }}">Cancel</a>
					<button class="btn btn-primary" type="submit">Save</button>
				</div>

			</form>
		</div>
	{% endif %}

</div>
{% endblock %}

{% block scripts %}
	<script defer src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('writeups.assets', path='editor.js') }}"></script>
{% endblock %}