{% extends "base.html" %}

{% block head %}
<script defer src="{{ page.assets.password_toggle_js.route() }}"></script>
{% endblock %}

{% block content %}
<div class="flex-center">
  <div class="dialog">
    <div class="dialog-header">{{ lang.t("encrypted.title") }}</div>
    <form action="/{{ id }}" method="post">
      <input type="hidden" name="confirm_burn" value="1">
      <div class="dialog-section">
        <div class="password-input-wrap">
          <input type="password" id="password" name="password" placeholder="{{ lang.t("encrypted.placeholder") }}" autofocus>
          <button type="button" id="password-toggle" class="password-toggle" title="{{ lang.t("password.show") }}" aria-label="{{ lang.t("password.show") }}" data-show-label="{{ lang.t("password.show") }}" data-hide-label="{{ lang.t("password.hide") }}">
            <svg class="eye-show" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
            <svg class="eye-hide" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><path d="m2 2 20 20"/></svg>
          </button>
        </div>
      </div>
      <div class="dialog-section dialog-actions">
        <a class="button button-secondary" href="/">{{ lang.t("encrypted.cancel") }}</a>
        <button class="button" type="submit">{{ lang.t("encrypted.decrypt") }}</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}