{% extends 'components/shell.html' %}

{% import 'components/site.html' as site %}
{% from 'components/forms/base.html' import form %}
{% from 'components/forms/submit_button.html' import submit_button %}
{% from 'components/card_list.html' import card_list %}
{% from 'components/cards/no_results.html' import no_results %}
{% from 'account/components/service_key.html' import service_key_card %}

{% set page_title = 'Manage saved keys | ' ~ g.site_name %}

{% block title %}
  <title>
    {{ page_title }}
  </title>
{% endblock title %}

{% block content %}
{% call site.section('account-keys', 'Stored service keys') %}
  {% call card_list() %}
    {% for key in props.service_keys %}
      <div class="form__section key__view">
        <input
          type="checkbox"
          name="revoke"
          id="key-{{ key.id }}"
          class="form__input key__revoke-check"
          value="{{ key.id }}"
          form="revoke-service-keys"
        >
        <div class="key__info">
          {{ service_key_card(key, import_ids[loop.index0], class_name="key__card") }}
          <label
            for="key-{{ key.id }}"
            class="form__label key__label"
          >Revoke</label>
        </div>
      </div>
    {% else %}
      {{ no_results() }}
    {% endfor %}
  {% endcall %}
  {% if props.service_keys %}
    {% call form(
      id= 'revoke-service-keys',
      action = '/account/keys',
      method= 'POST'
    ) %}
      {{ submit_button('Revoke selected keys') }}
    {% endcall %}
  {% endif %}
{% endcall %}
{% endblock content %}
