{% import "net/http" %}

{% import "github.com/bouncepaw/mycorrhiza/cfg" %}
{% import "github.com/bouncepaw/mycorrhiza/util" %}
{% import "github.com/bouncepaw/mycorrhiza/user" %}

{% func Toolbar(u *user.User) %}
<aside class="edit-toolbar layout-card">
	<h2 class="edit-toolbar__title layout-card__title">Markup</h2>
	<section class="edit-toolbar__buttons">
	{% for _, el := range []struct{
			class string
			onclick string
			display string
		}{
			{"link", "wrapLink()", "[[link]]"},
			{"heading2", "insertHeading2()", "## heading"},
			{"heading3", "insertHeading3()", "### heading"},
			{"bold", "wrapBold()", "<b>**Bold**</b>"},
			{"italic", "wrapItalic()", "<i>//Italic//</i>"},
			{"highlighted", "wrapHighlighted()", "<mark>!!Highlight!!</mark>"},
			{"monospace", "wrapMonospace()", "<code>`Monospace`</code>"},
			{"lifted", "wrapLifted()", "<sup>^^Lifted^^</sup>"},
			{"lowered", "wrapLowered()", "<sub>,,Lowered,,</sub>"},
			{"strikethrough", "wrapStrikethrough()", "<strike>~~Strikethrough~~</strike>"},
			{"rocket", "insertRocket()", "=> rocketlink"},
			{"xcl", "insertXcl()", "<= transclusion"}, 
			{"img", "insertImgBlock()", "<code>img {}</code>"},
			{"table", "insertTableBlock()", "<code>table {}</code>"},
			{"hr", "insertHorizontalBar()", "Horizontal bar"},
			{"codeblock", "insertCodeblock()", "Code block"},
			{"bulletedlist", "insertBulletedList()", "* bullet list"},
			{"numberedlist", "insertNumberedList()", "*. number list"},
		} %}
		<button
			class="edit-toolbar__btn edit-toolbar__{%s el.class %}"
			onclick="{%s el.onclick %}">
			{%s= el.display %}
		</button>
	{% endfor %}
	</section>
	<p class="edit-toolbar__ad"><a href="https://mycorrhiza.lesarbr.es/hypha/mycomarkup" target="_blank">Learn more</a> about mycomarkup</p>
	<h2 class="edit-toolbar__title layout-card__title">Actions</h2>
	<section class="edit-toolbar__buttons">
	{% for _, el := range []struct{
			class string
			onclick string
			display string
		}{
			{"date", "insertDate()", "Insert current date"},
			{"time", "insertTimeUTC()", "Insert current time"},
		} %}
		<button
			class="edit-toolbar__btn edit-toolbar__{%s el.class %}"
			onclick="{%s el.onclick %}">
			{%s= el.display %}
		</button>
	{% endfor %}
	{% if u.Group != "anon" %}
		<button
			class="edit-toolbar__btn edit-toolbar__user-link"
			onclick="insertUserlink()">
			Link yourself
		</button>
	{% endif %}
	</section>
</aside>
<script src="/static/toolbar.js"></script>
{% endfunc %}

{% func EditHTML(rq *http.Request, hyphaName, textAreaFill, warning string) %}
{%s= NavHTML(rq, hyphaName, "edit") %}
<div class="layout">
<main class="main-width edit edit_no-preview">
	<h1 class="edit__title">Edit {%s util.BeautifulName(hyphaName) %}</h1>
	{%s= warning %}
	<form method="post" class="edit-form"
			action="/upload-text/{%s hyphaName %}">
		<textarea name="text" class="edit-form__textarea" autofocus>{%s textAreaFill %}</textarea>
		<br/><br/>
		<label for="text">Describe your changes:</label><br>
		<input id="text" type="text" name="message" class="edit-form__message" placeholder="(optional)">
		<br/><br/>
		<input type="submit" name="action" value="Save" class="edit-form__save"/>
		<input type="submit" name="action" value="Preview" class="edit-form__preview">
		<a href="/hypha/{%s hyphaName %}" class="edit-form__cancel">Cancel</a>
	</form>
</main>
{%s= Toolbar(user.FromRequest(rq)) %}
</div>
{%= editScripts() %}
{% endfunc %}

{% func PreviewHTML(rq *http.Request, hyphaName, textAreaFill, message, warning string, renderedPage string) %}
{%s= NavHTML(rq, hyphaName, "edit") %}
<div class="layout">
<main class="main-width edit edit_with-preview">
	<h1>Edit {%s util.BeautifulName(hyphaName) %} (preview)</h1>
	{%s= warning %}
	<form method="post" class="edit-form"
			action="/upload-text/{%s hyphaName %}">
		<textarea class="edit-form__textarea" name="text">{%s textAreaFill %}</textarea>
		<br/><br/>
		<label for="text">Edit description:</label>
		<input id="text" type="text" name="message" class="edit-form__message" value="{%s message %}">
		<br/><br/>
		<input type="submit" name="action" value="Save" class="edit-form__save"/>
		<input type="submit" name="action" value="Preview" class="edit-form__preview">
		<a href="/hypha/{%s hyphaName %}" class="edit-form__cancel">Cancel</a>
	</form>
	<p class="warning">Note that the hypha is not saved yet. You can preview the changes ↓</p>
	<article class="edit__preview">{%s= renderedPage %}</article>
</main>
{%s= Toolbar(user.FromRequest(rq)) %}
</div>
{%= editScripts() %}
{% endfunc %}

{% func editScripts() %}
{% for _, scriptPath := range cfg.EditScripts %}
<script src="{%s scriptPath %}"></script>
{% endfor %}
{% endfunc %}