{% if result.master_key and result._auth_pass %}
{% extends "layouts/" + render_mode + "-wide.html" %}
{% else %}
{% extends "layouts/" + render_mode + ".html" %}
{% endif %}

{% block title %}{{_("Key Backup")}}{% endblock %}
{% block head %}
  <style type='text/css'>
    h4 {
      text-align: center;
    }
    .setup-backup-printer-value h4 {
      border: 1px solid #444;
      margin-top: -1em;
      margin-bottom: 1em;
      padding: 1em;
    }
    .fine-print {
{% if result.master_key and result._auth_pass %}
      margin: 4em 2em 0 2em;
{% endif %}
      font-size: 0.9em;
    }
  </style>
{% endblock %}

{% block content %}
<div class="content-normal">
{% if result.master_key and result._auth_pass %}
  <h1 class='text-center'>{{_("PRINT THIS PAGE")}}</h1>
  <h4>{{_("(Keep it secret, keep it safe!)")}}</h4>

  <div class="text-center hide-when-printing">
    <button id="btn-setup-backups-keys-later" class="center">
      {{_("Not Now")}}
    </button> &nbsp;
    <button id="btn-setup-backups-keys-print" class="button-secondary">
      {{_("Print Page")}}
    </button> &nbsp;
    <button id="btn-setup-backups-keys-done" class="button-secondary">
      {{_("Done Printing")}}
    </button>
  <br><br></div>

  <p>{{_("In the most tragic event of losing the hardware or data that your Mailpile runs on, you may need this master key (and the passphrase) to restore Mailpile from your backups. You do have back ups, right? Hint, hint, wink... ;-)")}}</p>

  <br>
  <div>
    <h4 class="text-center">{{_("Your PGP Passphrase")}}</h4>
    <div class="setup-backup-printer-value text-center">
      <h4>{{ result._auth_pass }}</h4>
    </div>
  </div>

  <br>
  <div>
    <h4 class="text-center">{{_("Your Mailpile Master Key")}}</h4>
    <div class="setup-backup-printer-value text-center">
      <h4>{{ nice_fingerprint(config.master_key) }}</h4>
    </div>
  </div>

  <script>
  $('#btn-setup-backups-keys-done').hide();
  $(document).on('click', '#btn-setup-backups-keys-print', function(e) {
    e.preventDefault();
    $('#btn-setup-backups-keys-later').hide();
    $('#btn-setup-backups-keys-done').show();
    window.print();
  });
  $(document).on('click', '#btn-setup-backups-keys-done', function(e) {
    e.preventDefault();
    Mailpile.API.settings_set_post({ 'web.nag_backup_key': '-1' }, function() {
      window.location.href = '/in/inbox/'; 
    });
  });
  $(document).on('click', '#btn-setup-backups-keys-later', function(e) {
    e.preventDefault();
    window.location.href = '/in/inbox/'; 
  });
  </script>

{% else %}

  <h1>Backup your secrets!</h1>

  <p>{{_("It is very important to make a backup of your Mailpile master key and the passphrase which unlocks your encryption keys.")}}</p>
  <p>{{_("If either of those things gets lost, most or even all of your Mailpile will be unrecoverable.")}}</p>

  <ol>
    <li>{{_("Enter your PGP passphrase to confirm your identity")}}</li>
    <li>{{_("Print out the page that appears")}}</li>
    <li><b>{{_("Keep it secret, keep it safe!")}}</b></li>
  </ol>

  <form method="POST" style='text-align: center; display: inline-block;'>
    <input type="hidden" name="var" value="master_key">
    <p>Your passphrase: <input type="password" name="pass" value=""></p>
    <p><input type=submit value="Continue"></p>
  </form>

{% endif %}

  <div class='fine-print'>
    <h3>Notes:</h3>
    <ol>
      <li>{{_("It is also important to make a backup of the Mailpile data itself.")}}</li>
      <li>{{_("The master key is used to decrypt the settings and contents of your mail.")}}</li>
      <li>{{_("The PGP passphrase is used to unlock your public encryption key and verify your identity.")}}</li>
{% if result.master_key and result._auth_pass %}
      <li>{{_("Mailpile can be downloaded from: www.mailpile.is")}}</li>
{% endif %}
    </ol>
  </div>

</div>
{% endblock %}
