{% extends "base.html.j2" %}

{% block page_content %}
<div class="col s12 m4">
  <h3>Dark Mode</h3>
  <p>Activate Dark Mode to ease your eyes!</p>
</div>
<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <form method="POST">
        {{ edit_user_settings_form.hidden_tag() }}
        <div class="switch">
          <i class="material-icons prefix">brightness_3</i>
          Dark Mode:
          <label class="active" for="{{edit_user_settings_form.is_dark.name}}">
            Off
            {% if current_user.is_dark == True %}
              <input type="checkbox" id="{{edit_user_settings_form.is_dark.name}}" name="{{edit_user_settings_form.is_dark.name}}" checked="checked">
            {% else %}
              <input type="checkbox" id="{{edit_user_settings_form.is_dark.name}}" name="{{edit_user_settings_form.is_dark.name}}">
            {% endif %}
            <span class="lever"></span>
            On
          </label>
        </div>
      </div>
      <div class="card-action right-align">
        {{ edit_user_settings_form.submit(class='btn') }}
      </div>
    </form>
  </div>
</div>
<div class="col s12"></div>
<div class="col s12 m4">
  <h3>Change password</h3>
  <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>
</div>
<div class="col s12 m8">
  <div class="card">
    <form method="POST">
      <div class="card-content">
        {{ change_password_form.hidden_tag() }}
        <div class="input-field ">
          <i class="material-icons prefix">vpn_key</i>
          {{ change_password_form.old_password() }}
          {{ change_password_form.old_password.label }}
          {% for error in change_password_form.old_password.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">vpn_key</i>
          {{ change_password_form.new_password() }}
          {{ change_password_form.new_password.label }}
          {% for error in change_password_form.new_password.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">vpn_key</i>
          {{ change_password_form.new_password2() }}
          {{ change_password_form.new_password2.label }}
          {% for error in change_password_form.new_password2.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
      </div>
      <div class="card-action right-align">
        {{ change_password_form.submit(class='btn') }}
      </div>
    </form>
  </div>
</div>
<div class="col s12"></div>
<div class="col s12 m4">
  <h3>Change email</h3>
  <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>
</div>
<div class="col s12 m8">
  <div class="card">
    <form method="POST">
      <div class="card-content">
        {{ change_profile_form.hidden_tag() }}
        <div class="input-field">
          <i class="material-icons prefix">mail</i>
          {{ change_profile_form.email() }}
          {{ change_profile_form.email.label }}
          {% for error in change_profile_form.email.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
      </div>
      <div class="card-action right-align">
        {{ change_profile_form.submit(class='btn') }}
      </div>
    </form>
  </div>
</div>
<div class="col s12"></div>
<div class="col s12 m4">
  <h3>Delete Account</h3>
  <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>
</div>
<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <!-- Confirm deletion of selected user with modal dialogue
    Modal Trigger-->
  </div>
    <div class="card-action right-align">
      <a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete User</a>
    </div>
      <!-- Modal Strucutre -->
      <div id="modal-confirm-delete" class="modal">
        <div class="modal-content">
          <h4>Confirm deletion</h4>
            <p>
              Do you really want to delete your account and all associated data?
              All associated jobs and job files will be permanently deleted!
            </p>
        </div>
        <div class="modal-footer">
          <a href="{{url_for('profile.delete_self', user_id=current_user.id)}}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete User</a>
          <a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
        </div>
      </div>
  </div>
</div>
{% endblock %}