{% extends "layout.html" %}
{% block body %}

<p><b> {{ string_dict['initial_user_text'] }} </b></p>

<br>

<form action="/users" method="POST">

<img src="/static/icons/avatar-default.svg" width="160px" style="float: left; position: absolute;" />

<div style="margin-left: 180px;">

<div class="field">
    <label>{{ string_dict['full_name'] }}</label>
    <div class="control has-icons-left has-icons-right">
    <input class="input" name="fullname" type="text" placeholder="Full Name" value="{% if initial_user['fullname'] %}{{ initial_user['fullname'] }}{% endif %}" hx-post="/users/user-check" hx-trigger="keyup changed delay:500ms" hx-target="#username-name">
    <span class="icon is-small is-left">
        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </span>
  </div>
</div>

<div class="field">
    <label>{{ string_dict['user_name'] }}</label>
    <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="{{ string_dict['user_name'] }}" value="{% if initial_user['username'] %}{{ initial_user['username'] }}{% endif %}" name="username" hx-post="/users/user-check" hx-trigger="keyup changed delay:200ms" hx-trigger="load" hx-target="#username-status">
    <span class="icon is-small is-left">
        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </span>
  </div>
  <div id="username-status">
  <p> {{ string_dict['user_name_hint'] }}</p>
  </div>
</div>

<div class="field">
<label class="password">{{ string_dict['password'] }}</label>
  <div class="control has-icons-left has-icons-right">
	  <input class="input" name="password" type="password" placeholder="{{ string_dict['password'] }}" value="{% if initial_user['password'] %}{{ initial_user['password'] }}{% endif %}" hx-post="/users/user-check" hx-trigger="keyup changed delay:200ms" hx-target="#username-status">
    <span class="icon is-small is-left">
        <i class="fa fa-address-card" aria-hidden="true"></i>
    </span>
  </div>
</div>

<div class="field">
	<label class="password">{{ string_dict['password_confirm'] }}</label>
  <div class="control has-icons-left has-icons-right">
	  <input class="input" name="password_confirm" type="password" placeholder="{{ string_dict['password_confirm'] }}" value="{% if initial_user['password_confirm'] %}{{ initial_user['password_confirm'] }}{% endif %}" hx-post="/users/user-check" hx-trigger="keyup changed delay:200ms" hx-target="#password-status">
    <span class="icon is-small is-left">
        <i class="fa fa-address-card" aria-hidden="true"></i>
    </span>
  </div>
</div>

</form>

</div> <!-- style 180 -->

</div>
</div>

{% endblock %}