{% extends "withnav_template.html" %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/api-key.html" import api_key %}

{% block service_page_title %}
  New API key
{% endblock %}

{% block maincolumn_content %}


    <h1 class="heading-large">
      New API key
    </h1>

    <p>
      Copy your key to somewhere safe. You won’t be able to see it again
      once you leave this page.
    </p>

    <div class="bottom-gutter-2">

      {{ api_key(
        '{}-{}-{}'.format(key_name, service_id, secret),
        'API key'
      ) }}

      {{ page_footer(
        secondary_link=url_for('.api_keys', service_id=current_service.id),
        secondary_link_text='Back to API keys'
      ) }}

    </div>

    <h2 class='heading-medium'>For older API clients</h2>

    <p>
      If the client you’re using needs a service ID and an API key,
      use these values:
    </p>

    <div class="bottom-gutter">
      {{ api_key(service_id, 'Service ID', thing='service ID') }}
    </div>

    {{ api_key(secret, 'API key') }}

{% endblock %}
