{% 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>
      <input type="hidden" id="text-language" value="plaintext" />
    </div>

    <label class="sr-only" for="payload-text" data-i18n="create.text">Text</label>
    <div class="template-chips" id="template-chips" role="group" aria-label="Templates"></div>
    <div class="field">
      <label for="text-label" data-i18n="create.itemLabel">Label (optional)</label>
      <input id="text-label" type="text" maxlength="120" data-i18n-placeholder="create.itemLabelPlaceholder" placeholder="e.g. Instructions" />
    </div>
    <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>
    <p id="size-meter" class="size-meter hint" aria-live="polite"></p>

    <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="max-opens" data-i18n="create.maxOpens">Opens</label>
        <select id="max-opens"></select>
      </div>
    </div>
    <div class="grid-2">
      <div class="field">
        <label for="available-from" data-i18n="create.availableFrom">Available from (optional)</label>
        <input id="available-from" type="datetime-local" />
        <p class="hint" data-i18n="create.availableFromHint">Empty = available immediately</p>
      </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>
    <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="create.successWarnTitle">One-time unwrap</strong>
        <span data-i18n="create.successWarnHint">After opening, ciphertext is deleted on the server.</span>
      </span>
    </div>

    <div class="success-layout">
      <div class="success-main">
        <div id="success-password-block" class="success-password-block hidden">
          <div class="success-password-badge" role="status">
            <i class="fa-solid fa-lock" aria-hidden="true"></i>
            <span data-i18n="create.passwordProtected">Password protected</span>
          </div>
          <label for="share-password" data-i18n="create.sharePassword">Password</label>
          <div class="copy-row">
            <input id="share-password" class="mono" readonly autocomplete="off" />
            <button type="button" class="btn" id="copy-password" data-i18n="common.copy">Copy</button>
          </div>
          <p class="hint success-password-hint" data-i18n="create.passwordSeparateHint">
            Do not send the password in the same chat as the link.
          </p>
        </div>

        <div id="success-meta-badges" class="success-meta-badges"></div>

        <label for="share-link" 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 for="share-token" 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>
      </div>

      <div class="success-qr" aria-label="QR code">
        <div id="share-qr" class="share-qr"></div>
        <p class="hint success-qr-hint" data-i18n="create.qrHint">Scan to open the share link</p>
        <div class="success-qr-actions">
          <button type="button" class="qr-action-btn hidden" id="share-native" aria-describedby="share-native-tip">
            <i class="fa-solid fa-share-nodes" aria-hidden="true"></i>
            <span class="sr-only" data-i18n="create.share">Share</span>
            <span class="ui-tooltip" id="share-native-tip" role="tooltip" data-i18n="create.share">Share</span>
          </button>
          <button type="button" class="qr-action-btn" id="download-qr" aria-describedby="download-qr-tip">
            <i class="fa-solid fa-download" aria-hidden="true"></i>
            <span class="sr-only" data-i18n="create.downloadQr">Download QR</span>
            <span class="ui-tooltip" id="download-qr-tip" role="tooltip" data-i18n="create.downloadQr">Download QR</span>
          </button>
        </div>
      </div>
    </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="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ static_url('js/crypto.js') }}"></script>
<script src="{{ static_url('js/create.js') }}"></script>
{% endblock %}