{% extends "default.html" %}

{% block title %}API Key{% endblock %}
{% set active_page = "api_key" %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      <h1 class="h3">New API Key {{ api_key.name }} is created</h1>
      <div class="alert alert-warning">For security reasons, API Key is only visible when it is created.</div>
      <div class="input-group mb-2">
        <input class="form-control"
               id="apikey-{{ api_key.id }}"
               readonly
               value="**********">
        <div class="input-group-append">
          <span class="input-group-text">
            <i class="fe fe-eye toggle-api-key"
               data-show="off"
               data-secret="{{ api_key.code }}"></i>
          </span>
        </div>
      </div>
      <button class="clipboard btn btn-primary"
              data-clipboard-action="copy"
              data-clipboard-text="{{ api_key.code }}"
              data-clipboard-target="#apikey-{{ api_key.id }}">
        Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
      </button>
    </div>
  </div>
{% endblock %}
{% block script %}

  <script>
      $(".toggle-api-key").on('click', function (event) {
          let that = $(this);
          let apiInput = that.parent().parent().parent().find("input");
          if (that.attr("data-show") === "off") {
              let apiKey = $(this).attr("data-secret");
              apiInput.val(apiKey);
              that.addClass("fe-eye-off");
              that.removeClass("fe-eye");
              that.attr("data-show", "on");
          } else {
              that.removeClass("fe-eye-off");
              that.addClass("fe-eye");
              apiInput.val("**********");
              that.attr("data-show", "off");
          }

      });
  </script>
{% endblock %}