{% 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">
    <!-- Current plan -->
    <div class="card">
      <div class="card-body">
        <div class="card-title mb-3">Current Plan</div>
        {% if current_user.lifetime %}

          You have lifetime access to the Premium plan.
        {% elif current_user.lifetime_or_active_subscription() %}
          {% if paddle_sub %}

            <div>
              {% if paddle_sub.cancelled %}(Cancelled){% endif %}
              {{ paddle_sub.plan_name() }} plan subscribed via Paddle.
              <a href="{{ url_for('dashboard.billing') }}">Manage Subscription ➡</a>
            </div>
          {% endif %}
          {% if manual_sub and manual_sub.is_active() %}

            <div>
              Manual plan which expires {{ manual_sub.end_at | dt }}
              ({{ manual_sub.end_at.format("YYYY-MM-DD") }}).
              {% if manual_sub.is_giveaway %}

                <br />
                To gain additional features and support SimpleLogin you can upgrade to a Premium plan.
                <br />
                <a href="{{ url_for('dashboard.pricing') }}"
                   class="btn btn-sm btn-outline-primary">Upgrade</a>
              {% endif %}
            </div>
          {% endif %}
          {% if apple_sub and apple_sub.is_valid() %}

            <div>
              Premium plan subscribed via Apple which expires {{ apple_sub.expires_date | dt }}
              ({{ apple_sub.expires_date.format("YYYY-MM-DD") }}).
              <div class="alert alert-info">
                If you want to subscribe via the Web instead, please make sure to cancel your subscription
                on Apple first.
                <a href="{{ url_for('dashboard.pricing') }}">
                  Upgrade <i class="fa fa-arrow-right" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          {% endif %}
          {% if coinbase_sub and coinbase_sub.is_active() %}

            <div>
              Yearly plan subscribed with cryptocurrency which expires on
              {{ coinbase_sub.end_at.format("YYYY-MM-DD") }}.
              <a href="{{ url_for('dashboard.coinbase_checkout_route') }}"
                 target="_blank"
                 rel="noopener noreferrer">
                Extend Subscription <i class="fe fe-external-link"></i>
              </a>
            </div>
          {% endif %}
          {% if partner_sub %}<div>Premium subscription managed by {{ partner_name }}.</div>{% endif %}
        {% elif current_user.in_trial() %}
          Your Premium trial expires {{ current_user.trial_end | dt }}.
        {% else %}
          You are on the Free plan.
        {% endif %}
      </div>
    </div>
    <!-- END Current plan -->
    <!-- Newsletter -->
    <div class="card" id="notification">
      <div class="card-body">
        <div class="card-title">Newsletters</div>
        <div class="mb-3">We will occasionally send you emails with new feature announcements.</div>
        <form method="post">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="notification-preference">
          <div class="form-check">
            <input type="checkbox"
                   id="notification"
                   name="notification"
                   {% if current_user.notification %} checked{% endif %}
                   class="form-check-input">
            <label for="notification">I want to be emailed when new features are released.</label>
          </div>
          <button type="submit" class="btn btn-outline-primary">Submit</button>
        </form>
      </div>
    </div>
    <!-- END Newsletter -->
    <!-- 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>
            This information will be filled in automatically when you use the
            <em>Sign in with SimpleLogin</em> button.
          </div>
          <div class="form-group mt-3">
            <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-outline-primary">Update</button>
        </div>
      </form>
    </div>
    <!-- END change name & profile picture -->
    <!-- Connect with Proton -->
    {% if connect_with_proton %}

      <div class="card" id="connect-with-proton">
        <div class="card-body">
          <div class="card-title">Connect with Proton</div>
          {% if proton_linked_account != None %}

            <div class="mb-3">
              Your account is currently linked to the Proton account <b>{{ proton_linked_account }}</b>
              <br />
            </div>
            <form method="post"
                  action="{{ url_for("dashboard.unlink_proton_account") }}">
              {{ csrf_form.csrf_token }}
              <button class="btn btn-primary mt-2 proton-button">
                <img class="mr-2" src="/static/images/proton.svg">
                Unlink account
              </button>
            </form>
          {% else %}
            <div class="mb-3">
              You can connect your Proton and SimpleLogin accounts.
              <br>
              You can then quickly log in to your SimpleLogin account using the Proton one.
              <br>
              If you have Proton Unlimited, Business or Visionary, you can have SimpleLogin premium for free.
              <br />
            </div>
            <a class="btn btn-primary mt-2 proton-button"
               href="{{ url_for("auth.proton_login", action="link") }}">
              <img class="mr-2"
                   src="{{ url_for('static', filename='images/proton.svg') }}"/>
              Connect with Proton
            </a>
          {% endif %}
        </div>
      </div>
    {% endif %}
    <!-- END Connect with Proton -->
    <!-- Random alias -->
    <div id="random-alias" class="card">
      <div class="card-body">
        <div class="card-title">Aliases</div>
        <div class="mt-3 mb-1">Change the way random aliases are generated by default.</div>
        <form method="post" action="#random-alias" class="form-inline">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="change-alias-generator">
          <select class="form-control 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</button>
        </form>
        <div class="mt-3 mb-1">Select the default domain for aliases.</div>
        <form method="post" action="#random-alias" class="form-inline">
          {{ csrf_form.csrf_token }}
          <input type="hidden"
                 name="form-name"
                 value="change-random-alias-default-domain">
          <select class="form-control mr-sm-2" name="random-alias-default-domain">
            <option value="">
              Not Selected
            </option>
            {% for is_public, domain in current_user.available_domains_for_random_alias() %}

              <option value="{{ domain }}" {% if current_user.default_alias_custom_domain_id or current_user.default_alias_public_domain_id %}
                 {% if current_user.default_random_alias_domain() == domain %}
                 selected {% endif %} {% endif %}>
                {{ domain }} (
                {% if is_public %}

                  SimpleLogin domain
                {% else %}
                  your domain
                {% endif %}
                )
              </option>
            {% endfor %}
          </select>
          <button class="btn btn-outline-primary">Update</button>
        </form>
        <div id="random-alias-suffix" class="mt-3 mb-1">Select the default suffix generator for aliases.</div>
        <form method="post" action="#random-alias-suffix" class="form-inline">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="random-alias-suffix">
          <select class="form-control mr-sm-2" name="random-alias-suffix-generator">
            <option value="0"
                    {% if current_user.random_alias_suffix==0 %} selected{% endif %}>
              Random word from our dictionary
            </option>
            <option value="1"
                    {% if current_user.random_alias_suffix==1 %} selected{% endif %}>
              Random combination of {{ ALIAS_RAND_SUFFIX_LENGTH }} letter and digits
            </option>
          </select>
          <button class="btn btn-outline-primary">Update</button>
        </form>
      </div>
    </div>
    <!-- END Random alias -->
    <!-- Sender Format -->
    <div class="card" id="sender-format">
      <div class="card-body">
        <div class="card-title">Sender Address Format</div>
        <div class="mt-1 mb-3">
          When your alias receives an email, say from: <b>John Wick &lt;john@wick.com&gt;</b>,
          SimpleLogin forwards it to your mailbox.
          <br />
          Due to some email constraints, SimpleLogin cannot keep the sender email address
          in the original form and needs to <b>transform</b> it to one of the formats below.
        </div>
        <form method="post" action="#sender-format">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="change-sender-format">
          <select class="form-control mr-sm-2" name="sender-format">
            <option value="{{ SenderFormatEnum.AT.value }}"
                    {% if current_user.sender_format == SenderFormatEnum.AT.value %} selected{% endif %}>
              John Wick - john at wick.com
            </option>
            <option value="{{ SenderFormatEnum.A.value }}"
                    {% if current_user.sender_format == SenderFormatEnum.A.value %} selected{% endif %}>
              John Wick - john(a)wick.com
            </option>
            <option value="{{ SenderFormatEnum.NAME_ONLY.value }}"
                    {% if current_user.sender_format == SenderFormatEnum.NAME_ONLY.value %} selected{% endif %}>
              John Wick
            </option>
            <option value="{{ SenderFormatEnum.AT_ONLY.value }}"
                    {% if current_user.sender_format == SenderFormatEnum.AT_ONLY.value %} selected{% endif %}>
              john at wick.com
            </option>
            <option value="{{ SenderFormatEnum.NO_NAME.value }}"
                    {% if current_user.sender_format == SenderFormatEnum.NO_NAME.value %} selected{% endif %}>
              No Name (i.e. only reverse-alias)
            </option>
          </select>
          <button class="btn btn-outline-primary mt-3">Update</button>
        </form>
      </div>
    </div>
    <!-- END Sender Format -->
    <!-- Reverse-alias replacement -->
    <div class="card" id="reverse-alias-replacement-section">
      <div class="card-body">
        <div class="card-title">
          Reverse Alias Replacement
          <div class="badge badge-warning">Experimental</div>
        </div>
        <div class="mb-3">
          When replying to a forwarded email, the <b>reverse-alias</b> can be automatically included
          in the attached message by your email client.
          If this option is enabled, SimpleLogin will try to <b>replace</b> the reverse-alias by your contact email.
          <br />
        </div>
        <form method="post" action="#reverse-alias-replacement-section">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="replace-ra">
          <div class="form-check">
            <input type="checkbox"
                   id="replace-ra"
                   name="replace-ra"
                   {% if current_user.replace_reverse_alias %} checked{% endif %}
                   class="form-check-input">
            <label for="replace-ra">Enable replacing reverse alias</label>
          </div>
          <button type="submit" class="btn btn-outline-primary">Update</button>
        </form>
      </div>
    </div>
    <!-- END Reverse-alias -->
    <!-- Sender included in reverse-alias -->
    <div class="card" id="sender-in-ra">
      <div class="card-body">
        <div class="card-title">
          Include sender address in reverse-alias
        </div>
        <div class="mb-3">
          If this option is enabled, new reverse-alias will include the sender address (e.g. <span class="italic">sender_domain_com_gibberish@simplelogin.co</span>)
          so you can quickly know the sender.
          <br />
          If disabled, a new reverse-alias will be randomly generated.
          Please note that existing reverse-aliases won't change.
        </div>
        <form method="post" action="#sender-in-ra">
          {{ csrf_form.csrf_token }}
          <input type="hidden" name="form-name" value="sender-in-ra">
          <div class="form-check">
            <input type="checkbox" id="include-sender-ra" name="enable"
              {#                   todo: remove current_user.include_sender_in_reverse_alias is none condition #}
              {% if current_user.include_sender_in_reverse_alias is none or current_user.include_sender_in_reverse_alias %}

                checked {% endif %} class="form-check-input">
                <label for="include-sender-ra">
                  Include sender address in reverse-alias
                </label>
              </div>
              <button type="submit" class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <!-- END Reverse-alias -->
        <!-- Always expand alias info -->
        <div class="card" id="expand-alias-info-section">
          <div class="card-body">
            <div class="card-title">
              Always expand alias info
            </div>
            <div class="mb-3">
              By default, additional alias info is shown after clicking on the "More" button.
              <br />
              When this option is enabled, alias additional info will always be shown.
              <br />
            </div>
            <form method="post" action="#expand-alias-info-section">
              {{ csrf_form.csrf_token }}
              <input type="hidden" name="form-name" value="expand-alias-info">
              <div class="form-check">
                <input type="checkbox"
                       id="expand-alias-info"
                       name="enable"
                       {% if current_user.expand_alias_info %} checked{% endif %}
                       class="form-check-input">
                <label for="expand-alias-info">
                  Automatically expand alias info
                </label>
              </div>
              <button type="submit" class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <!-- END Always expand alias info -->
        <!-- Include website address in alias -->
        <div class="card" id="include_website_in_one_click_alias">
          <div class="card-body">
            <div class="card-title">
              Include website address in one-click alias creation on browser extension
            </div>
            <div class="mb-3">
              If enabled, the website name will be used as alias prefix
              when you create an alias via SimpleLogin browser extension via the email input field
              <br />
              <img src="https://simplelogin.io/images/one-click-alias.gif"
                   class="my-2"
                   style="max-width: 40%">
            </div>
            <form method="post" action="#include_website_in_one_click_alias">
              {{ csrf_form.csrf_token }}
              <input type="hidden"
                     name="form-name"
                     value="include_website_in_one_click_alias">
              <div class="form-check">
                <input type="checkbox"
                       id="include-website-in-alias"
                       name="enable"
                       {% if current_user.include_website_in_one_click_alias %} checked{% endif %}
                       class="form-check-input">
                <label for="include-website-in-alias">
                  Include website address in alias
                </label>
              </div>
              <button type="submit" class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <!-- END Include website address in alias -->
        <!-- Ignore Loop Email -->
        {#    <div class="card" id="ignore-loop-email-section">#}
        {#      <div class="card-body">#}
        {#        <div class="card-title">Ignore Loop Emails</div>#}
        {#        <div class="mb-3">#}
        {#          On some email clients, "Reply All" automatically includes your alias that#}
        {#          would send the same email to your mailbox.#}
        {#          <br />#}
        {#          You can disable these "loop" emails by enabling this option.#}
        {#        </div>#}
        {#        <form method="post" action="#ignore-loop-email-section">#}
        {#         {{ csrf_form.csrf_token }} #}
        {#          <input type="hidden" name="form-name" value="ignore-loop-email">#}
        {#          <div class="form-check">#}
        {#            <input type="checkbox" id="ignore-loop-email" name="enable"#}
        {#                {% if current_user.ignore_loop_email %} checked{% endif %} class="form-check-input">#}
        {#            <label for="ignore-loop-email">Ignore Loop Emails</label>#}
        {#          </div>#}
        {#          <button type="submit" class="btn btn-outline-primary">Update</button>#}
        {#        </form>#}
        {#      </div>#}
        {#    </div>#}
        <!-- END Ignore Loop Email -->
        <!-- One-click subscribe -->
        <div class="card" id="one-click-unsubscribe-section">
          <div class="card-body">
            <div class="card-title">
              One-click unsubscribe
            </div>
            <div class="mb-3">
              On email clients that support the
              <a href="https://simplelogin.io/docs/getting-started/one-click-unsubscribe/">
                One-click unsubscribe
              </a>
              button, clicking on it will allow you to do one of these actions:
              <ul>
                <li>
                  <b>Original action:</b> Use the same unsubscribe policy set by your sender.
                  SimpleLogin will make sure to hide your mailbox address.
                </li>
                <li>
                  <b>Disable alias:</b> The unsubscribe action will disable the alias that received the email.
                </li>
                <li>
                  <b>Block contact:</b> The sender of the email will be blocked: you won't receive emails from this sender to your alias anymore.
                </li>
              </ul>
            </div>
            <form method="post"
                  action="#one-click-unsubscribe-section"
                  class="form-inline">
              {{ csrf_form.csrf_token }}
              <input type="hidden" name="form-name" value="one-click-unsubscribe">
              <select class="form-control mr-sm-2" name="unsubscribe-behaviour">
                <option value="{{ UnsubscribeBehaviourEnum.PreserveOriginal.name }}" {% if current_user.unsub_behaviour.value == UnsubscribeBehaviourEnum.PreserveOriginal.value %}
                   selected="selected" {% endif %}>
                  Preserve the original unsubscribe policy
                </option>
                <option value="{{ UnsubscribeBehaviourEnum.DisableAlias.name }}" {% if current_user.unsub_behaviour.value == UnsubscribeBehaviourEnum.DisableAlias.value %}
                   selected="selected" {% endif %}>
                  Disable the alias that received the email
                </option>
                <option value="{{ UnsubscribeBehaviourEnum.BlockContact.name }}" {% if current_user.unsub_behaviour.value == UnsubscribeBehaviourEnum.BlockContact.value %}
                   selected="selected" {% endif %}>
                  Block the sender that sent the original email
                </option>
              </select>
              <button type="submit" class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <!-- END One-click subscribe -->
        <div class="card">
          <div class="card-body">
            <div class="card-title">
              Quarantine & Bounces
            </div>
            <div class="mb-3">
              When an email is refused (or bounced) by your mailbox provider or flagged by
              <a href="https://simplelogin.io/docs/getting-started/anti-phishing/">SimpleLogin anti-phishing program</a>,
              SimpleLogin keeps a copy of this email for 7 days so you can take a look at its content and take appropriate actions.
              <br />
              The emails are deleted in 7 days.
              <br />
              This is an exceptional case where SimpleLogin temporarily stores the email.
            </div>
            <a href="{{ url_for('dashboard.refused_email_route') }}"
               class="btn btn-outline-primary">
              See quarantine & bounce emails
            </a>
          </div>
        </div>
        <div class="card" id="blocked-behaviour">
          <div class="card-body">
            <div class="card-title">
              Disabled alias/Blocked contact
            </div>
            <div class="mb-3">
              When an email is sent to a <b>disabled</b> alias or sent from a <b>blocked</b> contact, you can decide what
              response the sender should see.
              <br />
              <b>Ignore</b> means they will see the message as delivered, but SimpleLogin won't actually forward it to you.
              This is the default option as you can start receiving the emails again
              by re-enabling the alias or unblocking a contact.
              <br />
              <b>Reject</b> means SimpleLogin will tell them that the alias does not exist.
              <br />
            </div>
            <form method="post" action="#blocked-behaviour" class="form-inline">
              {{ csrf_form.csrf_token }}
              <input type="hidden" name="form-name" value="change-blocked-behaviour">
              <select class="form-control mr-sm-2" name="blocked-behaviour">
                <option value="{{ BlockBehaviourEnum.return_2xx.value }}"
                        {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_2xx.value %} selected="selected"{% endif %}>
                  Ignore (the sender will see the email as delivered, but you won't receive anything).
                </option>
                <option value="{{ BlockBehaviourEnum.return_5xx.value }}"
                        {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_5xx.value %} selected="selected"{% endif %}>
                  Reject (the sender will be told that your alias does not exist).
                </option>
              </select>
              <button class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <div class="card" id="sender-header">
          <div class="card-body">
            <div class="card-title">
              Include original sender in email headers
            </div>
            <div class="mb-3">
              SimpleLogin forwards emails to your mailbox from the <b>reverse-alias</b> and not from the <b>original</b>
              sender address.
              <br />
              If this option is enabled, the original sender addresses is stored in the email header <b>X-SimpleLogin-Envelope-From</b>
              and the original From header is stored in <b>X-SimpleLogin-Original-From</b>.
              You can choose to display this header in your email client.
              <br />
              As email headers aren't encrypted, your mailbox service can know the sender address via this header.
            </div>
            <form method="post" action="#sender-header">
              {{ csrf_form.csrf_token }}
              <input type="hidden" name="form-name" value="sender-header">
              <div class="form-check">
                <input type="checkbox"
                       id="include-sender-header"
                       name="enable"
                       {% if current_user.include_header_email_header %} checked{% endif %}
                       class="form-check-input">
                <label for="include-sender-header">
                  Include sender address in email headers
                </label>
              </div>
              <button type="submit" class="btn btn-outline-primary">
                Update
              </button>
            </form>
          </div>
        </div>
        <!-- Alias import/export -->
        <div class="card">
          <div class="card-body">
            <div class="card-title">
              Alias import/export
            </div>
            <div class="mb-3">
              You can import your aliases created on other platforms into SimpleLogin.
              You can also export your aliases to a readable csv format for a future batch import.
            </div>
            <a href="{{ url_for('dashboard.batch_import_route') }}"
               class="btn btn-outline-primary">Batch Import</a>
            <a href="{{ url_for('dashboard.alias_export_route') }}"
               class="btn btn-outline-secondary">Export Aliases</a>
          </div>
        </div>
        <!-- END Alias import/export -->
      </div>
    {% endblock %}
    {% block script %}
      <script>
    let anchor = window.location.hash;
    $(anchor).addClass("highlighted")


      </script>
    {% endblock %}