{% extends "common.html" %}
{% block title %}Your bouquet · 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="new">
    <button class="button primary compact" type="submit">New entry</button>
  </form>
  <form action="{{ url_for('flower_vase.application') }}" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="rehush">
    <button class="button ghost compact" type="submit">Password</button>
  </form>
  <form action="{{ url_for('flower_vase.application') }}" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="logout">
    <button class="button ghost compact" type="submit">Sign out</button>
  </form>
{% endblock %}
{% block content %}
<section class="vault-header">
  <div>
    <h1>Your bouquet</h1>
  </div>
  <label class="search-field" for="search">
    <span class="sr-only">Search entries</span>
    <input id="search" type="search" placeholder="Search organization or login" value="{{ filter|default('') }}" autocomplete="off">
  </label>
</section>

<div class="entry-list" id="entry-list">
  {% for flower in flowers %}
  <form class="entry-row" data-search="{{ flower.organization }} {{ flower.myID }}" action="{{ url_for('flower_vase.application') }}" method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="show">
    <input type="hidden" name="organization" value="{{ flower.organization }}">
    <input type="hidden" name="datetime" value="{{ flower.dateCreated }}">
    <input type="hidden" name="filter" class="current-filter" value="{{ filter|default('') }}">
    <button type="submit" class="entry-button">
      <span class="entry-icon" aria-hidden="true">{{ flower.organization[:1]|upper }}</span>
      <span class="entry-copy">
        <strong>{{ flower.organization }}</strong>
        <span>{{ flower.myID }}</span>
      </span>
      <time datetime="{{ flower.dateCreated }}">{{ flower.dateCreated[:10] }}</time>
      <span class="chevron" aria-hidden="true">›</span>
    </button>
  </form>
  {% else %}
  <div class="empty-state">
    <span aria-hidden="true">✣</span>
    <h2>No active entries</h2>
    <p>Create an entry to start your collection.</p>
  </div>
  {% endfor %}
</div>
<p class="empty-state filtered-empty" id="filtered-empty" hidden>No entries match that search.</p>

<script>
  const search = document.querySelector('#search');
  const rows = [...document.querySelectorAll('.entry-row')];
  const filteredEmpty = document.querySelector('#filtered-empty');
  function filterRows() {
    const query = search.value.trim().toLocaleLowerCase();
    let visible = 0;
    rows.forEach((row) => {
      const match = row.dataset.search.toLocaleLowerCase().includes(query);
      row.hidden = !match;
      row.querySelector('.current-filter').value = search.value;
      if (match) visible += 1;
    });
    filteredEmpty.hidden = visible !== 0 || rows.length === 0;
  }
  search.addEventListener('input', filterRows);
  filterRows();
</script>
{% endblock %}