{% extends "base.jinja2" %}
{% from "_formhelpers.jinja2" import render_field, render_label, render_input %}

{% block title %}UnderCover{% endblock %}

{% block head %}
  <script type="text/javascript">
    window.onload = () => {
      {% if letter_errors %}
      window.scrollTo(0, document.body.scrollHeight);
      {% endif %}

      {% if not username %}
        if (window.location.search.includes("reset=true")) {
          window.history.pushState({}, document.title, window.location.pathname);
          return;
        }
        const cookies = decodeURIComponent(document.cookie)
            .split(';')
            .map(cookie => cookie.trim().split('='))
        cookies.forEach(([id, value]) => {
          if (!id || !value) {
            return
          }
          const e = document.getElementById(id)
          if (e) {
            e.value = value
          }
        })
      {% endif %}
    }

    const clearErrors = () => {
      const e = document.getElementById('letter_errors')
      e?.parentNode.removeChild(e)
    }
  </script>
{% endblock head %}

{% block content %}
  <form method=post id="letter-form">
    <dl>
      {% if username %}
        <div class="field">
          {{ render_label(form.letterName) }}
          <div style="display: flex; flex-direction: row;">
            {{ render_input(
                   form.letterName,
                   onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
               )
            }}
            <div class="btn secondary color-fade" style="display: flex; justify-content: center; align-items: center; padding-left: 0.75em; padding-right: 0.75em; margin-left: 0.5em;">
              <a
                  href="/add_letter"
                  style="text-decoration: none; margin: 0; padding: 0;"
              > + </a>
            </div>
          </div>
        </div>
      {% endif %}
      {{ render_field(form.username) }}
      {{ render_field(form.company) }}
      {{ render_field(form.jobAndPronoun) }}
      {{ render_field(form.skillTypes) }}
      {{ render_field(form.mySkills) }}
      {{ render_field(form.body, 'class=bigtext') }}
      {{ render_field(form.closingText) }}
    </dl>

    {% if letter_errors %}
      <div id=letter_errors>
        <h3>Your letter has errors.</h3>
        <p>
          There is likely a typo in one of your variables (the {\blabla} bits).<br>
          Make sure each is spelled correctly, and has the correct brackets on either side
        </p>
        <p class=letter_errors>
          {% for error in letter_errors %}
            {{ error }}<br>
          {% endfor %}
        </p>
      </div>
    {% endif %}

    <div style="text-align: right; margin-bottom: 2em;">
      <span class="wipe up-wipe" style="margin-bottom: 1em; padding: 0;">
        <input type="submit" value="Generate PDF" class="transition dark-light" style="background: rgba(0, 0, 0, 0); border: none; margin: 0; padding: 1em; cursor: pointer;">
      </span>
    </div>
  </form>
{% endblock content %}