{% extends "auth/secure.html" %}{% load i18n %}

{% block content %}

<form method="post" action=".">
  {% csrf_token %}
  {{ user_sessions.management_form }}
  {{ external_service_tokens.management_form }}

<div class="section">
  <div class="header">
    <h2>{% trans "Bound devices" %}</h2>
    <p>{% trans "These devices are currently set up with access to the authenticated services listed below. You may remove access from devices you no longer need." %}</p>
  </div>
  <div class="section-content">
    <table style="width:100%">
      <thead>
        <tr>
          <th>{% trans "Device name" %}</th>
          <th>{% trans "Last used" %}</th>
          <th>{% trans "Remove" %}</th>
        </tr>
      </thead>
      <tbody>
{% for form in user_sessions.forms %}
        <tr>
          <td>{{ form.id }}{{ form.instance.device_name }}</td>
{% ifequal session_key form.instance.secure_session_key %}
          <td>{% trans "This device" %}</td>
          <td></td>
{% else %}
          <td>
            {% blocktrans with form.instance.last_used|timesince as last_used %}{{ last_used }} ago{% endblocktrans %}
          </td>
          <td>{{ form.DELETE }}</td>
{% endifequal %}
        </tr>
{% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="section">
  <div class="header">
    <h2>{% trans "Authenticated services" %}</h2>
{% if external_service_tokens.forms %}
    <p>{% trans "You may currently access the following authenticated services using this device and those listed above." %}</p>
  </div>
  <div class="section-content">
    <table style="width:100%">
      <thead>
        <tr>
          <th>{% trans "Service name" %}</th>
          <th>{% trans "Remove" %}</th>
        </tr>
      </thead>
      <tbody>
{% for form in external_service_tokens.forms %}
        <tr>
          <td>{{ form.id }}
            <a href="{{ form.instance.service_url }}">{% trans form.instance.service_name %}</a></td>
          <td>{{ form.DELETE }}</td>
        </tr>
{% endfor %}
      </tbody>
    </table>
{% else %}
     <p>{% trans "There are no currently authenticated services." %}</p>
{% endif %}
  </div>
</div>

<div class="section invisible">
  <h2>{% trans "PIN" %}</h2>
  <div class="note"><div class="bubble pad-10">
    {% trans "Setting a PIN allows you to recover expired secured sessions. It must be composed of alphanumerics and be at least four characters in length." %}
  </div></div>
  
  <div class="content">
    <dl>
      <dt>{{ form.new_pin_a.label_tag }}:</dt>
      <dd>{{ form.new_pin_a }}</dd>
{% if form.new_pin_a.errors %}
      <dd>{{ form.new_pin_a.errors.0 }}</dd>
{% endif %}
      <dt>{{ form.new_pin_b.label_tag }}:</dt>
      <dd>{{ form.new_pin_b }}</dd>
{% if form.new_pin_b.errors %}
      <dd>{{ form.new_pin_a.errors.0 }}</dd>
{% endif %}
    </dl>
  </div>
</div>


<div class="section invisible">
  <h2>{% trans "Time-out period" %}</h2>
  <div class="note"><div class="bubble pad-10">
    {% trans "You may vary the length of the period of allowed inactivity before your session gets locked. Accepted values are between 5 minutes and 720 (being 12 hours)." %}
  </div></div>
  <div class="content">
    <dl>
      <dt>{{ form.timeout_period.label_tag }}:</dt>
      <dd>{{ form.timeout_period }} mins</dd>
{% if form.timeout_period.errors %}
      <dd>{{ form.timeout_period.errors.0 }}</dd>
{% endif %}
    </dl>
  </div>
</div>

{% if has_pin %}
<div class="section invisible">
  <h2>{% trans "Time-out period" %}</h2>
  <div class="note"><div class="bubble pad-10">
    {% trans "Please enter your current PIN in order to make these changes." %}
  </div></div>
  <div class="content">
    <dl>
      <dt>{{ form.old_pin.label_tag }}:</dt>
      <dd>{{ form.old_pin }}</dd>
{% if form.old_pin.errors %}
      <dd>{{ form.old_pin.errors.0 }}</dd>
{% endif %}
    </dl>
  </div>
</div>

{% endif %}

<p class="center">
  <input type="submit" value="{% trans "Submit" %}"/>
</p>
</form>

{% endblock %}