{% extends "base.html" %}

{% block main %}
<nav class="container mt-4" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ base_path }}/teams">Teams</a></li>
    <li class="breadcrumb-item"><a href="{{ base_path }}/teams/{{ team.id }}">{{ team.name }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">Projects</li>
  </ol>
</nav>
<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>
                https://callout.dev{{ base_path }}/v0/say?project=my-first-project&amp;key=***&amp;message=Hello,%20World
              </code>
            </p>
            <p>
              <code>
                https://callout.dev{{ base_path }}/v0/watchdog?project=my-first-project&amp;key=***&amp;seconds=300
              </code>
            </p>
          </div>
        </section>
        <section class="mb-3">
          <table class="table">
            <tbody>
              {% for project in projects %}
                <tr>
                  <td>
                    <a href="{{ base_path }}/projects/{{ project.id }}">
                      {{ 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="{{ base_path }}/teams/{{ team.id }}/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>
                  Last used
                </th>
                <th>
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {% for key in keys %}
                <tr>
                  <td>
                    <code>
                      ********{{ key.id.simple().to_string()[key.id.simple().to_string().char_indices().nth_back(3).unwrap().0..] }}
                    </code>
                  </td>
                  <td>
                    Unknown
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm" role="group" aria-label="API key actions">
                      <button class="btn btn-outline-light" type="button">Copy</button>
                      <button class="btn btn-outline-light" type="button">Delete</button>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </section>
      </div>
    </div>
  </div>
</main>
{% endblock %}