{% extends "common.html" %}
{% block title %}{{ flower.organization }} · Flowers{% endblock %}
{% block menuoptions %}
  <form action="{{ url_for('flower_vase.application') }}" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="list">
    <input type="hidden" name="filter" value="{{ filter|default('') }}">
    <button class="button ghost compact" type="submit">Back to bouquet</button>
  </form>
{% endblock %}
{% block content %}
<section class="detail-card card">
  <div class="detail-heading">
    <span class="entry-icon large" aria-hidden="true">{{ flower.organization[:1]|upper }}</span>
    <div>
      <p class="eyebrow">Flower</p>
      <h1>{{ flower.organization }}</h1>
      {% if flower.dateCreated not in ('STORED', 'FAILED') %}<p class="muted">Version from {{ flower.dateCreated[:10] }}</p>{% endif %}
    </div>
  </div>
  <dl class="details">
    <div><dt>Name</dt><dd>{{ flower.myName or '—' }}</dd></div>
    <div><dt>Login</dt><dd>{{ flower.myID }}</dd></div>
    <div>
      <dt>Secret</dt>
      <dd class="secret-line">
        <span id="secret" data-secret="{{ flower.mySecret }}">••••••••••••</span>
        <button class="icon-button" id="reveal" type="button">Reveal</button>
        <button class="icon-button" id="copy" type="button">Copy</button>
      </dd>
    </div>
  </dl>
  {% if flower.dateCreated not in ('STORED', 'FAILED') %}
  <div class="detail-actions">
    <form id="edit-form" action="{{ url_for('flower_vase.application') }}" method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="action" value="edit">
      <input type="hidden" name="organization" value="{{ flower.organization }}">
      <input type="hidden" name="datetime" value="{{ flower.dateCreated }}">
      <button class="button primary" type="submit">Edit entry</button>
    </form>
  </div>
  {% endif %}
</section>
<script>
  const secret = document.querySelector('#secret');
  const reveal = document.querySelector('#reveal');
  const copy = document.querySelector('#copy');
  const editForm = document.querySelector('#edit-form');
  let visible = false;

  const returnToList = window.setTimeout(() => {
    window.location.assign('{{ url_for("flower_vase.application") }}');
  }, 8000);

  if (editForm) {
    editForm.addEventListener('submit', () => window.clearTimeout(returnToList));
  }

  reveal.addEventListener('click', () => {
    visible = !visible;
    secret.textContent = visible ? secret.dataset.secret : '••••••••••••';
    reveal.textContent = visible ? 'Hide' : 'Reveal';
  });
  copy.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(secret.dataset.secret);
      copy.textContent = 'Copied';
    } catch (_) {
      const field = document.createElement('textarea');
      field.value = secret.dataset.secret;
      field.style.position = 'fixed';
      field.style.opacity = '0';
      document.body.appendChild(field);
      field.select();
      copy.textContent = document.execCommand('copy') ? 'Copied' : 'Select and copy';
      field.remove();
    }
    window.setTimeout(() => copy.textContent = 'Copy', 1400);
  });
</script>
{% endblock %}