{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}Restore backup key · ImpTune{% endblock %}
{% block page_title %}<span x-data x-text="$store.i18n.t('restore_title')">Restore a backup key</span>{% endblock %}

{% block content %}
<section class="card" style="max-width:34rem">
  <div class="card-head">
    {{ ico.i('key') }}
    <h2 x-data x-text="$store.i18n.t('restore_title')">Restore a backup key</h2>
  </div>
  <div class="card-body">
    <p class="dim" x-data x-text="$store.i18n.t('restore_desc')">
      Paste the key from <code>imptune-backup-key.txt</code> to get your printers,
      settings, and clients back in this browser.
    </p>

    {% if error %}
    <div class="error"><p>{{ error }}</p></div>
    {% endif %}

    <form method="post" action="/session/restore">
      <label>
        <span class="label-text" x-data x-text="$store.i18n.t('backup_key_label')">Backup key</span>
        <input type="text" name="key" class="mono" placeholder="paste your key here" required autofocus>
      </label>
      <div class="btn-row" style="margin-top:.9rem">
        <button type="submit" class="btn" x-data x-text="$store.i18n.t('restore_btn')">Restore</button>
        <a href="/" class="btn ghost" x-data x-text="$store.i18n.t('cancel')">Cancel</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}