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

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

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

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

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

{% block content %}
  {% if username %}
    <div class="user logged-in">
      <p style="margin: 0 1em 0 0;">{{ username }}</p>
      <form action="/logout">
        <input class="black-white-button" style="margin: 0;" type="submit" value="Logout">
      </form>
    </div>
  {% else %}
      <div class="user logged-out">
        <p>You are working as a <strong>Guest</strong>.</p>
        <form action="/login" method="post">
          <div>
            <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="email">
            <input id="password" maxlength="32" minlength="4" name="password" type="password" placeholder="password">
          </div>

          <div>
            <input class="black-white-button" type="submit" value="Create Account" formaction="/create_account">
            <input class="black-white-button" type="submit" value="Forgot Password" formaction="/reset">
            <input class="white-black-button login-button" type="submit" value="Login">
          </div>
        </form>
      </div>
  {% endif %}

  <form method=post id="letter-form">
    <dl>
      {% if username %}
        {{ render_field(form.letterName, onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label") }}
      {% 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 %}

    <a href="javascript:void(0)"
       class="wipe up-wipe"
      {% if letter_errors %}
        onclick="clearErrors();document.getElementById('letter-form').submit()"
      {% else %}
        onclick="document.getElementById('letter-form').submit()"
      {% endif %}
    >Generate PDF</a>
  </form>
{% endblock content %}