{% 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 modal() %}
  <div id='modal' class='modal modal-background transparent' onclick="event.target.id === 'modal' && closeModal()">
    <div class='modal modal-content'>
      <button class='modal-close-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">
          <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;">
          <a href="javascript:void(0)"
             id="create-account-form-button"
             class="wipe up-wipe"
            {% if errors %}
             onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
            {% else %}
             onclick="document.getElementById('create-account-form').submit()"
            {% endif %}
          >Create Account</a>

          <a href="javascript:void(0)"
             id="log-in-form-button"
             class="wipe up-wipe"
                  {% if errors %}
             onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
                  {% else %}
             onclick="document.getElementById('create-account-form').submit()"
                  {% endif %}
          >Log in</a>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}