{% extends "default.html" %}

{% set active_page = "setting" %}
{% block title %}Settings{% endblock %}
{% block head %}

  <style>
        .card-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 3px;
        }
        .highlighted{
            border: solid 2px #5675E2;
        }
        li {
            margin-top: 8px;
        }

  </style>
{% endblock %}
{% block default_content %}

  <div class="col pb-3">
    <!-- Change email -->
    <div class="card">
      <div class="card-body">
        <form method="post" enctype="multipart/form-data">
          <input type="hidden" name="form-name" value="update-email">
          {{ change_email_form.csrf_token }}
          <div class="card-title">Account Email</div>
          <div class="mb-3">
            This email address is used to log in to SimpleLogin.
            <br />
            If you want to change the mailbox that emails are forwarded to, use the
            <a href="{{ url_for('dashboard.mailbox_route') }}">
              <i class="fe fe-inbox"></i> Mailboxes page
            </a>
            instead.
          </div>
          <div class="form-group mt-2">
            <!-- Not allow user to change email if there's a pending change -->
            {{ change_email_form.email(class="form-control", value=current_user.email, readonly=pending_email != None) }}
            {{ render_field_errors(change_email_form.email) }}
          </div>
          <button class="btn btn-outline-primary">Change Email</button>
        </form>
        {% if pending_email %}

          <div class="mt-2">
            <span class="text-danger float-left">Pending email change: {{ pending_email }}</span>
            <form method="POST"
                  action="{{ url_for('dashboard.resend_email_change') }}"
                  class="float-left ml-2">
              {{ change_email_form.csrf_token }}
              <a onclick="this.closest('form').submit()"
                 class="btn btn-secondary btn-sm">Resend confirmation email</a>
            </form>
            <form method="POST"
                  action="{{ url_for('dashboard.cancel_email_change') }}"
                  class="float-left ml-2">
              {{ change_email_form.csrf_token }}
              <a onclick="this.closest('form').submit()"
                 class="btn btn-secondary btn-sm">Cancel email change</a>
            </form>
          </div>
        {% endif %}
      </div>
    </div>
    <!-- END Change email -->
    <!-- Change password -->
    <div class="card" id="change_password">
      <div class="card-body">
        <div class="card-title">Password</div>
        <div class="mb-3">You will receive an email containing instructions on how to change your password.</div>
        <form method="post">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="change-password">
          <button class="btn btn-outline-primary">Change password</button>
        </form>
      </div>
    </div>
    <!-- END Change password -->
    <!-- TOTP -->
    <div class="card" id="totp">
      <div class="card-body">
        <div class="card-title">Two Factor Authentication</div>
        <div class="mb-3">
          Secure your account with 2FA, you'll be asked for a code generated through an app when you login.
          <br />
        </div>
        {% if not current_user.enable_otp %}

          <a href="{{ url_for('dashboard.mfa_setup') }}"
             class="btn btn-outline-primary">Setup TOTP</a>
        {% else %}
          <a href="{{ url_for('dashboard.mfa_cancel') }}"
             class="btn btn-outline-danger">Disable TOTP</a>
        {% endif %}
      </div>
    </div>
    <!-- END TOTP -->
    <!-- WebAuthn -->
    <div class="card">
      <div class="card-body">
        <div class="card-title">Security Key (WebAuthn)</div>
        <div class="mb-3">
          You can secure your account by linking either your FIDO-supported physical key such as Yubikey, Google
          Titan,
          or a device with appropriate hardware to your account.
        </div>
        {% if current_user.fido_uuid is none %}

          <a href="{{ url_for('dashboard.fido_setup') }}"
             class="btn btn-outline-primary">Setup WebAuthn</a>
        {% else %}
          <a href="{{ url_for('dashboard.fido_manage') }}"
             class="btn btn-outline-info">Manage WebAuthn</a>
        {% endif %}
      </div>
    </div>
    <!-- END WebAuthn -->
    <!-- data export -->
    <div class="card">
      <div class="card-body">
        <div class="card-title">SimpleLogin data export</div>
        <div class="mb-3">
          As per GDPR (General Data Protection Regulation) law, you can request a copy of your data which are stored on
          SimpleLogin.
          A zip file that contains all information will be sent to your SimpleLogin account address.
        </div>
        <div class="d-flex">
          <div>
            <form method="post">
              {{ csrf_form.csrf_token }}
              <input type="hidden" name="form-name" value="send-full-user-report">
              <button class="btn btn-outline-info">Request your data</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- END data export -->
    <!-- Delete account -->
    <div class="card">
      <div class="card-body">
        <div class="card-title">Account Deletion</div>
        <div class="mb-3">If SimpleLogin isn't the right fit for you, you can simply delete your account.</div>
        <a href="{{ url_for('dashboard.delete_account') }}"
           class="btn btn-outline-danger">Delete account</a>
      </div>
    </div>
    <!-- END Delete account -->
  </div>
{% endblock %}
{% block script %}

  <script>
        let anchor = window.location.hash;
        $(anchor).addClass("highlighted")


  </script>
{% endblock %}