{% extends "base.html" %}
{% block content %}
<section class="hero-panel unwrap-panel">
  <div class="panel-head">
    <p class="eyebrow" data-i18n="unwrap.eyebrow">Unwrap</p>
    <h1 data-i18n="unwrap.title">Reveal once</h1>
    <p class="lede" data-i18n="unwrap.lede">Paste a wrapped token or open a share link. Ciphertext is fetched once and deleted from the server.</p>
  </div>

  <div class="composer" id="unwrap-form">
    <div class="field">
      <label for="token-input" data-i18n="unwrap.token">Wrapped token or ID</label>
      <input id="token-input" class="mono" value="{{ wrap_id }}" data-i18n-placeholder="unwrap.tokenPlaceholder" placeholder="wrapped_v1.… или ID" />
    </div>
    <div class="field">
      <label for="unwrap-password" data-i18n="unwrap.password">Password (if set)</label>
      <input id="unwrap-password" type="password" autocomplete="current-password" />
    </div>
    <div id="captcha-slot" class="captcha-slot"></div>
    <div id="form-error" class="form-alert danger hidden" role="alert">
      <span class="form-alert-icon" aria-hidden="true">
        <i class="fa-solid fa-key"></i>
      </span>
      <span class="form-alert-body">
        <strong id="form-error-title"></strong>
        <span id="form-error-hint" class="hidden"></span>
        <span id="form-error-attempts" class="form-alert-attempts hidden"></span>
      </span>
    </div>
    <div class="actions actions-center">
      <button type="button" id="unwrap-btn" class="btn primary" data-i18n="unwrap.submit">Unwrap</button>
    </div>
  </div>

  <div id="result-panel" class="result-panel hidden">
    <div class="success-callout" role="status">
      <span class="success-callout-icon" aria-hidden="true">
        <i class="fa-solid fa-fire"></i>
      </span>
      <span class="success-callout-body">
        <strong data-i18n="unwrap.destroyedTitle">Server copy destroyed</strong>
        <span data-i18n="unwrap.destroyedHint">Preview lives only in this browser session.</span>
      </span>
    </div>
    <div id="items" class="items"></div>
  </div>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/js/crypto.js"></script>
<script src="/static/js/unwrap.js"></script>
{% endblock %}