{% 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 %}
  {% 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; padding: 0.4em;" 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 %}
        <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"
               )
            }}
            <a href="/add_letter" class="black-white-button" style="aspect-ratio: 1 / 1; text-decoration: none; margin-left: 1em; text-align: center;">+</a>
          </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 %}

    <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 %}