{% extends "base.html" %}

{% block main %}
<nav class="breadcrumb container" aria-label="breadcrumbs">
  <ul>
    <li><a href="{{ base_path }}/teams">Teams</a></li>
    <li><a href="{{ base_path }}/teams/{{ team.id }}">{{ team.name }}</a></li>
    <li><a href="{{ base_path }}/teams/{{ team.id }}/projects">Projects</a></li>
</nav>
<main>
  <div class="container columns">
    <div class="column is-two-thirds">
      <section class="block">
        <h1 class="title">Projects</h1>
      </section>
      <section class="block">
        <article class="message is-info">
          <div class="message-body">
            <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>
        </article>
      </section>
      <section class="block">
        <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="column">
      <section class="block">
        <h1 class="title">API Keys</h1>
      </section>
      <section class="block">
        <form method="POST" action="{{ base_path }}/teams/{{ team.id }}/new-api-key">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="button" type="submit">Generate Key</button>
        </form>
      </section>
      <section class="block">
        <table class="table is-fullwidth">
          <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>
                  <a>Copy</a>
                  |
                  <a>Delete</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </section>
    </div>
  </div>
</main>
{% endblock %}