{% extends "base.html" %}
{% block content %}
<section class="hero-panel create-panel">
  <div class="composer">
    <div class="lang-bar">
      <div class="lang-current">
        <span class="lang-label" data-i18n="create.language">Highlight language</span>
        <button type="button" class="lang-chip" id="lang-chip" aria-haspopup="dialog">
          <span id="lang-chip-text">Plain text</span>
          <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
        </button>
      </div>
      <button type="button" class="btn tiny ghost" id="lang-change" data-i18n="create.languageChange">
        Change type
      </button>
      <input type="hidden" id="text-language" value="plaintext" />
    </div>
    <p id="lang-hint" class="lang-hint hidden"></p>

    <label class="sr-only" for="payload-text" data-i18n="create.text">Text</label>
    <div class="code-editor" id="code-editor">
      <pre class="code-highlight" aria-hidden="true"><code id="code-highlight" class="hljs"></code></pre>
      <textarea id="payload-text" class="code-input" spellcheck="false" data-i18n-placeholder="create.textPlaceholder" placeholder="Paste secrets, configs, notes…"></textarea>
    </div>

    <div id="dropzone" class="dropzone" tabindex="0">
      <p data-i18n="create.drop">Drop files here, click to browse, or paste a screenshot (⌘V / Ctrl+V)</p>
      <input id="file-input" type="file" multiple hidden />
    </div>
    <ul id="file-list" class="file-list"></ul>

    <div class="grid-2">
      <div class="field">
        <label for="ttl-seconds" data-i18n="create.ttl">Time to live</label>
        <select id="ttl-seconds"></select>
      </div>
      <div class="field">
        <label for="password" data-i18n="create.password">Password (optional)</label>
        <div class="input-with-action">
          <input id="password" type="password" autocomplete="new-password" data-i18n-placeholder="create.passwordPlaceholder" placeholder="Extra unlock secret" />
          <button type="button" class="field-icon-btn" id="generate-password" aria-describedby="generate-password-tip">
            <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
            <span class="sr-only" data-i18n="create.passwordGenerate">Generate password</span>
            <span class="ui-tooltip" id="generate-password-tip" role="tooltip" data-i18n="create.passwordGenerateTip">Generate a strong password</span>
          </button>
        </div>
      </div>
    </div>

    <div id="captcha-slot" class="captcha-slot"></div>
    <p id="form-error" class="error hidden"></p>

    <div class="actions actions-center">
      <button type="button" id="wrap-btn" class="btn primary">
        <span data-i18n="create.submit">Create wrapped token</span>
      </button>
    </div>
  </div>

  <div id="success-panel" class="success-panel hidden">
    <h2 data-i18n="create.successTitle">Token issued</h2>
    <p class="warn" data-i18n="create.successWarn">One-time unwrap. After someone opens it, ciphertext is destroyed on the server.</p>
    <label data-i18n="create.shareLink">Share link</label>
    <div class="copy-row">
      <input id="share-link" readonly />
      <button type="button" class="btn" id="copy-link" data-i18n="common.copy">Copy</button>
    </div>
    <label data-i18n="create.token">Wrapped token</label>
    <div class="copy-row">
      <input id="share-token" class="mono" readonly />
      <button type="button" class="btn" id="copy-token" data-i18n="common.copy">Copy</button>
    </div>
    <p class="expires-meta" id="expires-meta"></p>
    <button type="button" class="btn ghost" id="create-another" data-i18n="create.another">Create another</button>
  </div>
</section>

<div id="lang-modal" class="modal-root hidden" role="dialog" aria-modal="true" aria-labelledby="lang-modal-title">
  <div class="modal-backdrop" data-lang-close></div>
  <div class="modal-panel lang-modal-panel" role="document">
    <h2 class="modal-title" id="lang-modal-title" data-i18n="create.languagePickTitle">Text type</h2>
    <p class="modal-message" data-i18n="create.languagePickHint">Choose how the text should be highlighted.</p>
    <div class="lang-grid" id="lang-grid"></div>
    <div class="modal-actions">
      <button type="button" class="btn" data-lang-close data-i18n="modal.confirm.cancel">Cancel</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/crypto.js"></script>
<script src="/static/js/create.js"></script>
{% endblock %}