{% extends "_base.html" %}
{% block title %}Create your account{% endblock %}

{% block header %}
<script type="text/javascript">
  let wasKeyboard = false;
  document.addEventListener("mousedown", function() { wasKeyboard = false; });
  document.addEventListener("keydown", function() { wasKeyboard = true; });
  document.addEventListener("focusin", function() {
    if (wasKeyboard) {
      document.body.classList.add("keyboard-focus");
    } else {
      document.body.classList.remove("keyboard-focus");
    }
  });
</script>
<style type="text/css">
  {% include "sso.css" without context %}

  body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
    outline: 3px solid #17191C;
    outline-offset: 4px;
  }

  .username_input {
    display: flex;
    border: 2px solid #418DED;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    margin: 16px 0;
    align-items: center;
    font-size: 12px;
  }

  .username_input.invalid {
    border-color: #FE2928;
  }

  .username_input.invalid input, .username_input.invalid label {
    color: #FE2928;
  }

  .username_input div, .username_input input {
    line-height: 18px;
    font-size: 14px;
  }

  .username_input label {
    position: absolute;
    top: -5px;
    left: 14px;
    font-size: 10px;
    line-height: 10px;
    background: white;
    padding: 0 2px;
  }

  .username_input input {
    flex: 1;
    display: block;
    min-width: 0;
    border: none;
  }

  /* only clear the outline if we know it will be shown on the parent div using :focus-within */
  @supports selector(:focus-within) {
    .username_input input {
      outline: none !important;
    }
  }

  .username_input div {
    color: #8D99A5;
  }

  .idp-pick-details {
    border: 1px solid #E9ECF1;
    border-radius: 8px;
    margin: 24px 0;
  }

  .idp-pick-details h2 {
    margin: 0;
    padding: 8px 12px;
  }

  .idp-pick-details .idp-detail {
    border-top: 1px solid #E9ECF1;
    padding: 12px;
    display: block;
  }
  .idp-pick-details .check-row {
    display: flex;
    align-items: center;
  }

  .idp-pick-details .check-row .name {
    flex: 1;
  }

  .idp-pick-details .use, .idp-pick-details .idp-value {
    color: #737D8C;
  }

  .idp-pick-details .idp-value {
    margin: 0;
    margin-top: 8px;
  }

  .idp-pick-details .avatar {
    width: 53px;
    height: 53px;
    border-radius: 100%;
    display: block;
    margin-top: 8px;
  }

  output {
    padding: 0 14px;
    display: block;
  }

  output.error {
    color: #FE2928;
  }
</style>
{% endblock %}

{% block body %}
<header>
  <h1>Create your account</h1>
  <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p>
</header>
<main>
  <form method="post" class="form__input" id="form">
    <div class="username_input" id="username_input">
      <label for="field-username">Username (required)</label>
      <div class="prefix">@</div>
      <input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none">
      <div class="postfix">:{{ server_name }}</div>
    </div>
    <output for="username_input" id="field-username-output"></output>
    <input type="submit" value="Continue" class="primary-button">
    {% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
    <section class="idp-pick-details">
      <h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2>
      {% if user_attributes.avatar_url %}
      <label class="idp-detail idp-avatar" for="idp-avatar">
        <div class="check-row">
          <span class="name">Avatar</span>
          <span class="use">Use</span>
          <input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
        </div>
        <img src="{{ user_attributes.avatar_url }}" class="avatar" />
      </label>
      {% endif %}
      {% if user_attributes.display_name %}
      <label class="idp-detail" for="idp-displayname">
        <div class="check-row">
          <span class="name">Display name</span>
          <span class="use">Use</span>
          <input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
        </div>
        <p class="idp-value">{{ user_attributes.display_name }}</p>
      </label>
      {% endif %}
      {% for email in user_attributes.emails %}
      <label class="idp-detail" for="idp-email{{ loop.index }}">
        <div class="check-row">
          <span class="name">E-mail</span>
          <span class="use">Use</span>
          <input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
        </div>
        <p class="idp-value">{{ email }}</p>
      </label>
      {% endfor %}
    </section>
    {% endif %}
  </form>
</main>
{% include "sso_footer.html" without context %}
<script type="text/javascript">
  {% include "sso_auth_account_details.js" without context %}
</script>
{% endblock %}