{#
  This template is shared by the new thread, reply and post-editing pages.

  The main display differences between the different editing styles are the
  headline of the page ("Submit new thread", "Reply to thread", "Edit post")
  and whether or not the subject line field is displayed in the input form.

  Every one of these pages can have a variable length list of alerts submitted
  into the template, which will be rendered as Boostrap alert boxes above the
  user input form.
#}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Converse: Post</title>

    <meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';">
    <!-- <link rel="shortcut icon" href="images/favicon.png"> -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-orange.min.css" />
    <link rel="stylesheet" href="/static/styles.css">
  </head>
  <body class="converse mdl-base mdl-color-text--grey-700 mdl-color--grey-100">
    <div class="mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary-dark">
        <div class="mdl-layout__header-row">
          <a href="/" class="mdl-layout-title mdl-color-text--blue-grey-50 cvs-title">
          {% match mode %}
            {% when EditingMode::NewThread %}
              Converse: Submit new thread
            {% when EditingMode::PostReply %}
              Converse: Reply to thread
            {% when EditingMode::EditPost %}
              Converse: Edit post
          {% endmatch %}
          </a>
          <div class="mdl-layout-spacer"></div>
          <a href="/">
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
              Back to index
            </button>
          </a>
        </div>
      </header>
      <main class="mdl-layout__content mdl-grid">
        <div class="mdl-card mdl-shadow--2dp mdl-cell--8-col">
          {% match mode %}
            {% when EditingMode::NewThread %}
              <form action="/thread/submit" method="post">
            {% when EditingMode::PostReply %}
              <form action="/thread/reply" method="post">
            {% when EditingMode::EditPost %}
              <form action="/post/edit" method="post">
          {% endmatch %}
            {% match mode %}
              {% when EditingMode::PostReply %}
                <input type="hidden" id="thread_id" name="thread_id" value="{{ id.unwrap() }}">
              {% when EditingMode::EditPost %}
                <input type="hidden" id="thread_id" name="post_id" value="{{ id.unwrap() }}">
              {% else %}
                {# no post ID when making a new thread #}
            {% endmatch %}
            <div class="mdl-card__supporting-text">
              {% for alert in alerts %}
              <span class="mdl-chip mdl-color--red-200">
                <span class="mdl-chip__text">{{ alert }}&nbsp;</span>
              </span>
              {% endfor %}
              {% if mode == EditingMode::NewThread %}
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col">
                <input class="mdl-textfield__input" type="text" id="title" name="title" aria-label="thread title" required {% match title %}{% when Some with (title_text) %}value="{{ title_text }}"{% else %}{# Nothing! #}{% endmatch %}>
                <label class="mdl-textfield__label" for="title">Thread title</label>
              </div>
              {% endif %}
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col">
                <textarea class="mdl-textfield__input" type="text" rows="25" id="post" name="post" aria-label="post content" required>
                  {%- match post -%}
                    {%- when Some with (post_text) -%}
                      {{- post_text -}}
                    {%- else -%}
                      {# Nothing! #}
                  {%- endmatch -%}
                </textarea>
                <label class="mdl-textfield__label" for="body">Content ...</label>
              </div>
            </div>
            <div class="mdl-card__actions">
              <input class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" value="Submit!">
            </div>
          </form>
        </div>
        <div class="mdl-card mdl-shadow--2dp mdl-cell--4-col">
          <div class="mdl-card__title mdl-card--border">
            Quick Markdown primer:
          </div>
          <div class="mdl-card__supporting-text">
            <p>
              Remember that you can use <a href="https://daringfireball.net/projects/markdown/basics"><strong>Markdown</strong></a> when
              writing your posts:
            </p>
            <p><i>*italic text*</i></p>
            <p><strong>**bold text**</strong></p>
            <p><s>~strikethrough text~</s></p>
            <p><code>[link text](https://some.link.com/)</code></p>
            <p><code>![image text](https://foo.com/thing.jpg)</code></p>
            <p>Use <code>*</code> or <code>-</code> to enumerate lists.</p>
            <p>See Markdown documentation for more information!</p>
          </div>
        </div>
      </main>
      <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer--right-section">
          <p>Powered by <a href="https://code.tvl.fyi/about/web/converse">Converse</a></p>
        </div>
      </footer>
      </div>
      <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </body>
</html>
