{% extends "templates/login.html" %}

{% block after_site %}

{% if login_available %}
<div hidden id="display_name_elements">
  <label for="display_name_input" id="display_name_label">
    <strong>{% trans %}Display name:&nbsp;{% endtrans%}</strong>
  </label>
  <input type="text" name="display_name" id="display_name_input" class="form-control">
  <br>
  <br>
</div>

<script>
  const displayNameElements = document.getElementById("display_name_elements");
  if (displayNameElements !== null) {
    const form = document.getElementById("password_input")?.parentElement ?? null;
    if (form !== null) {
      form.prepend(...displayNameElements.children);
    }

    displayNameElements.remove();
  }
</script>
{% endif %}

{% endblock %}