{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block head %}
  <style>
    .alias-activity {
      font-weight: 600;
      font-size: 14px;
    }
    .btn-group-border-left{
      border-left: 1px #fbfbfb4f solid;
    }
  </style>
{% endblock %}

{% block title %}
  Alias
{% endblock %}

{% block default_content %}
  <div class="page-header row">
    <div class="col-lg-3 col-sm-12 p-0 mt-1">
      <form method="get">
        <input type="search" name="query" autofocus placeholder="Enter to search for alias" class="form-control shadow"
               value="{{ query }}">
      </form>
    </div>

    <div class="col-lg-4 offset-lg-5 pr-0 mt-1">
      <div class="btn-group float-right" role="group">
        <form method="post">
          <input type="hidden" name="form-name" value="create-custom-email">
          <button data-toggle="tooltip"
                  title="Create a custom alias"
                  class="btn btn-primary mr-2"><i class="fa fa-plus"></i> New Email Alias
          </button>
        </form>
        <div class="btn-group" role="group">
          <form method="post">
            <input type="hidden" name="form-name" value="create-random-email">
            <button data-toggle="tooltip"
                    title="Create a totally random alias"
                    class="btn btn-success"><i class="fa fa-random"></i> Random Alias
            </button>
          </form>
          <button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle btn-group-border-left"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          </button>
          <div class="dropdown-menu dropdown-menu-right border-left" aria-labelledby="btnGroupDrop1">
            <div class="">
              <form method="post">
                <input type="hidden" name="form-name" value="create-random-email">
                <input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.word.value }}">
                <button class="dropdown-item">By Random Words</button>
              </form>
            </div>
            <div class="">
              <form method="post">
                <input type="hidden" name="form-name" value="create-random-email">
                <input type="hidden" name="generator_scheme" value="{{ AliasGeneratorEnum.uuid.value }}">
                <button class="dropdown-item">By UUID</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="row">
    {% for alias_info in aliases %}
      {% set gen_email = alias_info.gen_email %}

      <div class="col-md-6">
        <div class="card p-3 shadow-sm border-0 {% if alias_info.highlight %} highlight-row {% endif %}">
          <div>
            <span class="clipboard cursor mb-0"
                {% if loop.index ==1 %}
                  data-intro="This is an <em>alias</em>. <br><br>
        <b>All</b> emails sent to an alias will be <em>forwarded</em> to your inbox. <br><br>
        Alias is a great way to hide your personal email address so feel free to
        use it whenever possible, for example when signing up for a newsletter or creating a new account on a suspicious website 😎"
                  data-step="2"
                {% endif %}
                {% if gen_email.enabled %}
                  data-toggle="tooltip"
                  title="Copy to clipboard"
                  data-clipboard-text="{{ gen_email.email }}"
                {% endif %}
            >
              <span class="font-weight-bold">{{ gen_email.email }}</span>
              {% if gen_email.enabled %}
                <span class="btn btn-sm btn-success copy-btn">
                  Copy
                </span>
              {% endif %}
            </span>
          </div>
          <hr class="my-2">

          <p class="small-text">
            Created {{ gen_email.created_at | dt }}
            {% if alias_info.highlight %}
              - <span class="font-weight-bold text-success small-text">New</span>
            {% endif %}
          </p>

          <div class="" style="font-size: 12px">
            <span class="alias-activity">{{ alias_info.nb_forward }}</span> forwards,
            <span class="alias-activity">{{ alias_info.nb_blocked }}</span> blocks,
            <span class="alias-activity">{{ alias_info.nb_reply }}</span> replies
            <a href="{{ url_for('dashboard.alias_log', alias_id=gen_email.id) }}"
               class="btn btn-sm btn-link">
              See All Activity &nbsp;→
            </a>
          </div>

          <div>
            <form method="post">
              <input type="hidden" name="form-name" value="switch-email-forwarding">
              <input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
              <label class="custom-switch cursor mt-2"
                     data-toggle="tooltip"
                  {% if gen_email.enabled %}
                     title="Block Alias"
                  {% else %}
                     title="Unblock Alias"
                  {% endif %}

                  {% if loop.index ==1 %}
                     data-intro="By turning off an alias, emails sent to this alias will <em>not</em>
                           be forwarded to your inbox. <br><br>
                           This should be used with care as others might
                           not be able to reach you after ...
                            "
                     data-step="3"
                  {% endif %}
                     style="padding-left: 0px"
              >
                <input type="hidden" name="alias" class="alias" value="{{ gen_email.email }}">
                <input type="checkbox" class="custom-switch-input"
                    {{ "checked" if gen_email.enabled else "" }}>

                <span class="custom-switch-indicator"></span>
              </label>
            </form>
          </div>

          <div class="row mt-3">
            <div class="col">
              {% if gen_email.enabled %}
                <a href="{{ url_for('dashboard.alias_contact_manager', alias_id=gen_email.id) }}"
                    {% if alias_info.show_intro_test_send_email %}
                   data-intro="Not only alias can receive emails, it can <em>send</em> emails too! <br><br>
                   You can add a new <em>contact</em> to for your alias here. <br><br>
                   To send an email to your contact, SimpleLogin will create a <em>special</em> email address. <br><br>
                   Sending an email to this email address will <em>forward</em> the email to your contact"
                   data-step="4"
                    {% endif %}
                   class="btn btn-sm btn-outline-primary"
                   data-toggle="tooltip"
                   title="Not only an alias can receive emails, it can send emails too"
                >
                  Send Email&nbsp; &nbsp;<i class="fe fe-send"></i>
                </a>
              {% endif %}
            </div>

            <div class="col">
              <form method="post">
                <input type="hidden" name="form-name" value="delete-email">
                <input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
                <input type="hidden" name="alias" class="alias" value="{{ gen_email.email }}">

                <span class="delete-email btn btn-link btn-sm float-right text-danger">
                  Delete&nbsp; &nbsp;<i class="dropdown-icon fe fe-trash-2 text-danger"></i>
                </span>
              </form>
            </div>

          </div>

        </div>
      </div>
    {% endfor %}
  </div>


  {% if  client_users %}
    <div class="page-header row">
      <h3 class="page-title col"
          data-intro="Here you can find the list of website/app on which
    you have used the <em>Connect with SimpleLogin</em> button <br><br>
    You also see what information that SimpleLogin has communicated to these website/app when you sign in."
          data-step="5"
      >
        Apps
      </h3>
    </div>

    <div class="row row-cards row-deck mt-4">
      <div class="col-12">
        <div class="card">
          <div class="table-responsive">
            <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
              <thead>
              <tr>
                <th>
                  App
                </th>
                <th>
                  Info
                  <i class="fe fe-help-circle" data-toggle="tooltip"
                     title="Info sent to this app/website"></i>
                </th>
                <th class="text-center">
                  First used
                  <i class="fe fe-help-circle" data-toggle="tooltip"
                     title="The first time you have used the SimpleLogin on this app/website"></i>
                </th>
                <!--<th class="text-center">Last used</th>-->
              </tr>
              </thead>
              <tbody>
              {% for client_user in client_users %}
                <tr>
                  <td>
                    {{ client_user.client.name }}
                  </td>

                  <td>
                    {% for scope, val in client_user.get_user_info().items() %}
                      <div>
                        {% if scope == "email" %}
                          Email: <a href="mailto:{{ val }}">{{ val }}</a>
                        {% elif scope == "name" %}
                          Name: {{ val }}
                        {% endif %}
                      </div>
                    {% endfor %}
                  </td>


                  <td class="text-center">
                    {{ client_user.created_at | dt }}
                  </td>

                  {#            TODO: add last_used#}
                  <!--
                    <td class="text-center">
                      <div>4 minutes ago</div>
                    </td>
                  -->

                </tr>
              {% endfor %}

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block script %}
  <script>
    var clipboard = new ClipboardJS('.clipboard');

    var introShown = localStorage.getItem("introShown");
    if ("yes" !== introShown) {
      // only show intro when screen is big enough to show "developer" tab
      if (window.innerWidth >= 1024) {
        introJs().start();
        localStorage.setItem("introShown", "yes")
      }
    }


    $(".delete-email").on("click", function (e) {
      let alias = $(this).parent().find(".alias").val();
      notie.confirm({
        text: `Once <b>${alias}</b> is deleted, people/apps ` +
          "who used to contact you via this alias cannot reach you any more," +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });

    $(".trigger-email").on("click", function (e) {
      notie.confirm({
        text: "SimpleLogin server will send an email to this alias " +
          "and it will arrive to your inbox, please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });

    $(".custom-switch-input").change(function (e) {
      var message = "";
      let alias = $(this).parent().find(".alias").val();

      if (e.target.checked) {
        message = `After this, you will start receiving email sent to <b>${alias}</b>, please confirm.`;
      } else {
        message = `After this, you will stop receiving email sent to <b>${alias}</b>, please confirm.`;
      }

      notie.confirm({
        text: message,
        cancelCallback: () => {
          // reset to the original value
          var oldValue = !$(this).prop("checked");
          $(this).prop("checked", oldValue);
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    })
  </script>
{% endblock %}