{% extends 'default.html' %}

{% set active_page = "setting" %}

{% block title %}
  Settings
{% endblock %}

{% block default_content %}

  <div class="col-md-8 offset-md-2 pb-3">
    <!-- Change email -->
    <div class="card">
      <form method="post" enctype="multipart/form-data">
        <input type="hidden" name="form-name" value="update-email">
        {{ change_email_form.csrf_token }}

        <div class="card-body">
          <div class="card-title">
            Email
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>

            <!-- 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) }}

            {% if pending_email %}
              <div class="mt-2">
                <span class="text-danger">Pending email change: {{ pending_email }}</span>
                <a href="{{ url_for('dashboard.resend_email_change') }}" class="btn btn-secondary btn-sm">Resend
                  confirmation email</a>
                <a href="{{ url_for('dashboard.cancel_email_change') }}" class="btn btn-secondary btn-sm">Cancel email
                  change</a>
              </div>
            {% endif %}
          </div>
          <button class="btn btn-primary">Change Email</button>
        </div>
      </form>
    </div>
    <!-- END Change email -->

    <!-- Change name & profile picture -->
    <div class="card">
      <form method="post" enctype="multipart/form-data">
        {{ form.csrf_token }}
        <input type="hidden" name="form-name" value="update-profile">

        <div class="card-body">
          <div class="card-title">
            Profile
          </div>
          <div class="form-group">
            <label class="form-label">Name</label>
            {{ form.name(class="form-control", value=current_user.name) }}
            {{ render_field_errors(form.name) }}
          </div>

          <div class="form-group">
            <div class="form-label">Profile picture</div>
            {{ form.profile_picture(class="form-control-file") }}
            {{ render_field_errors(form.profile_picture) }}
            {% if current_user.profile_picture_id %}
              <img src="{{ current_user.profile_picture_url() }}" class="profile-picture">
            {% endif %}
          </div>
          <button class="btn btn-primary">Update</button>
        </div>
      </form>
    </div>
    <!-- END change name & profile picture -->


    <hr>
    <h3 class="mb-0">Multi-Factor Authentication (MFA)</h3>
    <div class="small-text mb-3">
      Secure your account with Multi-Factor Authentication.
      This requires having applications like Google Authenticator, Authy, FreeOTP, etc.
    </div>
    {% if not current_user.enable_otp %}
      <a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a>
    {% else %}
      <a href="{{ url_for('dashboard.mfa_cancel') }}" class="btn btn-outline-danger">Cancel MFA</a>
    {% endif %}

    <hr>
    <h3 class="mb-0">Change password</h3>
    <div class="small-text mb-3">You will receive an email containing instructions on how to change password.</div>
    <form method="post">
      <input type="hidden" name="form-name" value="change-password">
      <button class="btn btn-outline-primary">Change password</button>
    </form>

    <hr>

    <h3 class="mb-0">Random Alias</h3>
    <div class="small-text mb-3">Choose how to create your email alias by default</div>
    <form method="post" class="form-inline">
      <input type="hidden" name="form-name" value="change-alias-generator">
      <select class="custom-select mr-sm-2" name="alias-generator-scheme">
        <option value="{{ AliasGeneratorEnum.word.value }}"
            {% if current_user.alias_generator == AliasGeneratorEnum.word.value %} selected {% endif %} >Based on
          Random {{ AliasGeneratorEnum.word.name.capitalize() }}</option>
        <option value="{{ AliasGeneratorEnum.uuid.value }}"
            {% if current_user.alias_generator == AliasGeneratorEnum.uuid.value %} selected {% endif %} >Based
          on {{ AliasGeneratorEnum.uuid.name.upper() }}</option>
      </select>
      <button class="btn btn-outline-primary">Update Preference</button>
    </form>

    <hr>

    <h3 class="mb-0" id="notification">Notifications</h3>
    <div class="small-text mb-3">Do you want to receive our newsletter?</div>
    <form method="post">
      <input type="hidden" name="form-name" value="notification-preference">
      <div class="form-inline mb-3">
        <div class="form-group">
          <input type="checkbox" id="notification" name="notification" {% if current_user.notification %}
                 checked {% endif %} class="form-check-input">
          <label for="notification">I want to receive your newsletter</label>
        </div>
      </div>
      <button type="submit" class="btn btn-outline-primary">Submit</button>
    </form>


    {% if current_user.get_subscription() %}
      <hr>
      <h3 class="mb-0">Billing</h3>
      <div class="small-text mb-3">
        Manage your current subscription.
      </div>
      <a href="{{ url_for('dashboard.billing') }}" class="btn btn-outline-primary">
        Manage Billing
      </a>
    {% endif %}

    <hr>
    <h3 class="mb-0">Export Data</h3>
    <div class="small-text mb-3">
      You can download all aliases you have created on SimpleLogin along with other data.
    </div>
    <form method="post">
      <input type="hidden" name="form-name" value="export-data">
      <button class="btn btn-outline-info">Export Data</button>
    </form>

    <hr>
    <h3 class="mb-0">Delete Account</h3>
    <div class="small-text mb-3">Please note that this operation is irreversible.

    </div>
    <form method="post">
      <input type="hidden" name="form-name" value="delete-account">
      <span class="delete-account btn btn-outline-danger">Delete account</span>
    </form>

  </div>

{% endblock %}

{% block script %}
  <script>
    $(".delete-account").on("click", function (e) {
      notie.confirm({
        text: "All your data including your aliases will be deleted, " +
          "other people might not be able to reach you after, " +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });
  </script>
{% endblock %}