{% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}

{% block nav_content %}
{% include 'admin/_breadcrumbs.html.j2' %}
{% endblock nav_content %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">Edit user</h1>
    </div>

    <div class="col s12 m4">
      <h2>{{ user.username }}</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
      <a class="waves-effect waves-light btn" href="{{ url_for('.user', user_id=user.id) }}"><i class="material-icons left">arrow_back</i>Back to user administration</a>
    </div>

    <div class="col s12 m8">
      <div class="card">
        <form method="POST">
          <div class="card-content">
            {{ form.hidden_tag() }}
            {{ wtf.render_field(form.username, data_length='64', material_icon='account_circle') }}
            {{ wtf.render_field(form.email, class_='validate', material_icon='email', type='email') }}
            {{ wtf.render_field(form.role, material_icon='swap_vert') }}
            <div class="row">
              <div class="col s12"><p>&nbsp;</p></div>
              <div class="col s1">
                <p><i class="material-icons">brightness_3</i></p>
              </div>
              <div class="col s8">
                <p>{{ form.dark_mode.label.text }}</p>
                <p class="light">Enable dark mode to ease your eyes.</p>
              </div>
              <div class="col s3 right-align">
                <div class="switch">
                  <label>
                    {{ form.dark_mode() }}
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
              <div class="col s12"><p>&nbsp;</p></div>
              <div class="col s12 divider"></div>
              <div class="col s12"><p>&nbsp;</p></div>
              <div class="col s1">
                <p><i class="material-icons">check</i></p>
              </div>
              <div class="col s8">
                <p>{{ form.confirmed.label.text }}</p>
                <p class="light">Change confirmation status manually.</p>
              </div>
              <div class="col s3 right-align">
                <div class="switch">
                  <label>
                    {{ form.confirmed() }}
                    <span class="lever"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {{ wtf.render_field(form.submit, material_icon='send') }}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}