{% extends "base.html" %}

{% block main %}
{% include "breadcrumbs.html" %}
<main class="mt-4">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8">
        <section class="mb-3">
          <h1 class="mb-4">Projects</h1>
        </section>
        <section class="mb-3">
          <div class="alert alert-primary" role="alert">
            <p>
              Projects are created automatically when referenced in a client
              request. Make your first request:
            </p>
            <p>
              <code>
                {{ frontend_host }}{{ base_path }}/say?project=my-first-project&amp;key=***&amp;message=Hello,%20World
              </code>
            </p>
            <p>
              <code>
                {{ frontend_host }}{{ base_path }}/watchdog?project=my-first-project&amp;key=***&amp;timeout_minutes=15
              </code>
            </p>
          </div>
        </section>
        <section class="mb-3">
          <table class="table">
            <thead>
              <tr>
                <th>Project Name</th>
              </tr>
            </thead>
            <tbody>
              {% for project in projects %}
                <tr>
                  <td>
                    <a href="{{ breadcrumbs.join(project.id.simple().to_string().as_str()) }}">
                      {{ project.name }}
                    </a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </section>
      </div>
      <div class="col">
        <section class="mb-3">
          <h1 class="mb-4">API Keys</h1>
        </section>
        <section class="mb-3">
          <form method="post" action="{{ breadcrumbs.join("../new-api-key") }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button class="btn btn-primary" type="submit">Generate Key</button>
          </form>
        </section>
        <section class="mb-3">
          <table class="table">
            <thead>
              <tr>
                <th>
                  API Key
                </th>
                <th title="Last Used (UTC)">
                  Last Used
                </th>
                <th>
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {% for key in keys %}
                <tr>
                  <td>
                    <code>
                      {{ key.id|compact_uuid|redact }}
                    </code>
                  </td>
                  <td>
                    {% if let Some(last_used_at) = key.last_used_at %}
                      {{ last_used_at.format("%Y-%m-%d") }}
                    {% else %}
                      Never
                    {% endif %}
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm" role="group" aria-label="API key actions">
                      <button
                        class="btn btn-outline-light"
                        type="button"
                        name="api-key-copy-button"
                        data-copy="{{ key.id|compact_uuid }}"
                      >
                        Copy
                      </button>
                      <button
                        class="btn btn-outline-light"
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#confirm-delete-key-modal-{{ key.id }}"
                      >
                        Delete
                      </button>
                    </div>
                    <div
                      class="modal fade"
                      id="confirm-delete-key-modal-{{ key.id }}"
                      tabindex="-1"
                      aria-labelledby="confirm-delete-key-label-{{ key.id }}"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h1
                              class="modal-title fs-5"
                              id="confirm-delete-key-label-{{ key.id }}"
                            >
                              Confirm
                            </h1>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Cancel"
                            ></button>
                          </div>
                          <div class="modal-body">
                            Are you sure you want to delete the key
                            <code>{{ key.id|compact_uuid|redact }}</code>?
                            {% if let Some(last_used_at) = key.last_used_at %}
                              It was last used: {{ last_used_at.format("%Y-%m-%d") }}.
                            {% else %}
                              It has never been used.
                            {% endif %}
                          </div>
                          <div class="modal-footer">
                            <form
                              method="post"
                              action="{{ breadcrumbs.join("../remove-api-key") }}"
                            >
                              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                              <input type="hidden" name="key_id" value="{{ key.id }}">
                              <button
                                type="button"
                                class="btn btn-secondary"
                                data-bs-dismiss="modal"
                              >
                                Cancel
                              </button>
                              <button type="submit" class="btn btn-danger">Delete</button>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </section>
      </div>
    </div>
  </div>
</main>
<script>
document.addEventListener("DOMContentLoaded", function() {
  document.getElementsByName("api-key-copy-button")
    .forEach(function (btn) {
      btn.addEventListener("click", function (ev) {
        var content = ev.currentTarget.getAttribute("data-copy");
        navigator.clipboard.writeText(content);
      });
    });
});
</script>
{% endblock %}