{% extends "crashstats_base.html" %}

{% block page_title %}API Tokens{% endblock %}

{% block product_nav_filter %} {% endblock %}

{% block site_css %}
  {{ super() }}
  <link rel="stylesheet" href="/static/tokens/css/tokens.min.css">
{% endblock %}

{% block site_js %}
  {{ super() }}
  <script src="/static/tokens/js/tokens.min.js" type="module"></script>
{% endblock %}

{% block content %}
  <div id="mainbody">
    <div class="page-heading">
      <h2>API Tokens</h2>
    </div>

    <div class="panel">
      <div class="body">
        <p>
          You need <b>API Tokens to be able to connect to the API</b> so that
          the API knows who you are and thus what permissions you have. <br>
          Using any <b>valid API Token</b> with your API calls means a <b>much
          higher rate limit</b>. <br>
          An API token for downloading crash data requires
          the permissions <code>View Personal Identifiable Information</code>
          and <code>View Raw Dumps</code>.
        </p>
      </div>
    </div>

    <div class="panel">
      <div class="title">
        <h2>Your Generated Tokens</h2>
      </div>
      <div class="body">
        {% for token in your_tokens %}
          <div class="token">
            <h4>Generated {{ token.created | time_tag }}</h4>
            <p class="code" data-key="{{ token.key }}">
              <!-- jQuery will put in the <code> tag here -->
              <button type="button" data-toggle="Hide again">Show the whole token</button>
            </p>

            {% if token.is_expired %}
              <p class="is-expired">Token has expired and will not work any more.</p>
            {% endif %}

            <table class="meta-data">
              <tr>
                <th>Permissions:</th>
                <td>
                  <ul>
                    {% for permission in token.permissions.all() %}
                      <li><code>{{ permission.name }}</code></li>
                    {% else %}
                      <li><em>None</em></li>
                    {% endfor %}
                  </ul>
                </td>
              </tr>
              {% if token.is_expired %}
                <tr>
                  <th>Expired:</th>
                  <td>
                    {{ token.expires.strftime('%Y-%m-%d %H:%M:%S%Z') }} (
                    {{ token.expires | time_tag }})
                  </td>
                </tr>
              {% else %}
                <tr>
                  <th>Expires:</th>
                  <td>
                    {{ token.expires.strftime('%Y-%m-%d %H:%M:%S%Z') }}
                    ({{ token.expires | time_tag(future=True) }} from now)
                  </td>
                </tr>
              {% endif %}
              <tr>
                <th>Notes:</th>
                <td>
                  {% if token.notes %}
                    {{ token.notes | linebreaks }}
                  {% else %}
                    <i>no notes</i>
                  {% endif %}
                </td>
              </tr>
            </table>
            <form class="delete"
                  action="{{ url('tokens:delete_token', token.pk) }}"
                  method="post"
                  data-expired="{{ token.is_expired | to_json }}"
            >
              {% csrf_token %}
              <button type="submit">Delete this token</button>
            </form>
          </div>
        {% else %}
          <p><i>You currently have no tokens generated</i></p>
        {% endfor %}
      </div>
    </div>

    <div class="panel">
      <div class="title">
        <h2>Generate a New Token</h2>
      </div>
      <div class="body">
        <form method="post">
          {% csrf_token %}
          <table class="data-table">
            {{ form.as_table() }}
            <tr>
              <th>&nbsp;</th>
              <td>
                <input type="submit" value="Save">
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>

    <div class="panel">
      <div class="title">
        <h2>How To Use These</h2>
      </div>
      <div class="body">
        <p>
          When using the <a href="{{ url('api:documentation') }}">API</a> you
          must supply these tokens as a header called <code>Auth-Token</code>.
        </p>
        <p>
          Here's an example:
        </p>
        <pre class="example">
curl -H "Auth-Token: 58af2acef8a74dbca9580e2bb8ba9c9a" {{ absolute_base_url }}{{ url('api:model_wrapper', 'RawCrash') }}?crash_id=fb27d0f3-db8e-4835-9311-288bb0170829</pre>
        <p>
          Or, if you prefer Python:
        </p>
        <pre class="example">
import requests

headers = {'Auth-Token': '58af2acef8a74dbca9580e2bb8ba9c9x'}
url = '{{ absolute_base_url }}{{ url('api:model_wrapper', 'RawCrash') }}?crash_id=fb27d0f3-db8e-4835-9311-288bb0170829'
response = requests.get(url, headers=headers)
print(response.json())</pre>
      </div>
    </div>
  </div>
{% endblock %}