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

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

    <div class="col s12 m4">
      {% include 'settings/_menu.html.j2' %}
    </div>

    <div class="col s12 m8">
      <div class="card">
        <form enctype="multipart/form-data" method="POST">
          <div class="card-content">
            <span class="card-title">{{ title }}</span>
            {{ form.hidden_tag() }}
            {{ wtf.render_field(form.username, data_length='64', material_icon='person') }}
            {{ wtf.render_field(form.email, data_length='254', material_icon='email') }}
            <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>
          </div>
          <div class="card-action">
            <div class="right-align">
              {{ wtf.render_field(form.submit, material_icon='send') }}
            </div>
          </div>
        </form>
      </div>

      <div class="card">
        <div class="card-content">
          <span class="card-title">Delete account</span>
          <p>Deleting an account has the following effects:</p>
          <ul>
            <li>All data associated with your corpora and jobs will be permanently deleted.</li>
            <li>All settings will be permanently deleted.</li>
          </ul>
        </div>
        <div class="card-action right-align">
          <a href="#delete-account-modal" class="btn modal-trigger red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Modals -->
<div class="modal" id="delete-account-modal">
  <div class="modal-content">
    <h4>Confirm deletion</h4>
    <p>Do you really want to delete your account and all associated data? All associated corpora, jobs and files will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
    <a href="{{ url_for('.delete') }}" class="btn red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
  </div>
</div>
{% endblock page_content %}