{% macro render_label(field) %}
  <dt>{{ field.label }}</dt>
{% endmacro %}

{% macro render_input(field, extra="") %}
  <dd {{extra}}>
    {{ field(**kwargs)|safe }}

    {% if field.errors %}
      <ul class=errors>
        {% for error in field.errors %}
          <li>{{ error }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  </dd>
{% endmacro %}

{% macro render_field(field, extra="") %}
<div class="field">
  {{ render_label(field) }}
  {{ render_input(field, extra, **kwargs) }}
</div>
{% endmacro %}

{% macro form_submit_button(text, id, action, errors) %}
  <button type="button"
     id="{{ id }}"
     class="wipe up-wipe"
     style="font-size: 1em;"
     {% if errors %}
     onclick="/*clearErrors();*/const e = document.getElementById('create-account-form'); e.action = '{{ action }}'; e.submit()"
     {% else %}
     onclick="const e = document.getElementById('create-account-form'); e.action = '{{ action }}'; e.submit()"
     {% endif %}
  >{{ text }}</a>
{% endmacro %}

{% macro modal() %}
  <div id='modal' class='modal modal-background transparent' onclick="event.target.id === 'modal' && closeModal()">
    <div class='modal modal-content'>
      <button class='top-right text-button' onclick="closeModal()">×</button>
      <h2 id='modal-title'>Login Now</h2>
      <form action="/login" method="post" id="create-account-form">
        <div>
          <label for="login">Email: </label>
          <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
        </div>

        <div>
          <label for="password">Password: </label>
          <input id="password" maxlength="32" minlength="4" name="password" type="password">
        </div>
        <div id="confirm-password-div">
          <div style="margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
          <label id='confirm-password-label' for="confirm-password">Confirm Password: </label>
          <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
        </div>

        <div style="margin-top: 1em;">
          {{ form_submit_button('Create account', 'create-account-form-button', '/create_account', errors) }}
          {{ form_submit_button('Log in', 'log-in-form-button', '/login', errors) }}
        </div>
      </form>
    </div>
  </div>
{% endmacro %}