{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Data{% endblock %}
{% block content %}
<header class="flex flex-wrap items-start justify-between gap-4">
  <div class="flex flex-col gap-2">
    <h1 class="text-3xl font-semibold">Data</h1>
    <p class="max-w-2xl text-sm text-text-secondary">Browse all your coffee data.</p>
  </div>
  {% if is_authenticated %}
  <a
    href="/add?type={{ active_type }}"
    class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
  >
    {% call icons::plus_circle("h-4 w-4") %}
    Add
  </a>
  {% endif %}
</header>

<div class="rounded-lg border bg-surface">
  {% include "partials/tab_bar.html" %}
  <!-- Search -->
  <div class="border-t px-3 py-2" data-signals:_data-search="'{{ search_value }}'">
    <input
      type="search"
      data-bind:_data-search
      placeholder="Search..."
      class="input-field w-full text-sm"
      data-on:input__debounce.300ms="history.pushState(null, '', '/data?type=' + $_activeTab + '&q=' + encodeURIComponent($_dataSearch)); @get('/data?type=' + $_activeTab + '&q=' + encodeURIComponent($_dataSearch), {responseOverrides: {selector: '#data-content', mode: 'inner'}})"
      {% if !search_value.is_empty() %}autofocus{% endif %}
    />
  </div>
</div>

<div id="data-content" class="data-page-content">
  {{ content|safe }}
</div>

<div id="detail-panel"></div>
{% endblock %}