{% extends "base.html" %}
{% block title %}{{ t.groups }}{% endblock %}
{% block content %}
<div class="flex flex-wrap items-baseline justify-between gap-3">
<h1 class="text-2xl font-semibold tracking-tight">{{ t.groups }}</h1>
<a href="{{ zotero_new }}" target="_blank" rel="noreferrer" class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted">{{ t.create_group }}</a>
</div>
<p class="mt-2 text-sm text-muted-foreground">{{ t.groups_managed }}</p>
<section class="mt-6 rounded-lg border bg-card p-5 space-y-3">
<h2 class="font-semibold">{{ t.your_groups }}</h2>
{%- if mine.is_empty() %}
<p class="text-sm text-muted-foreground">{{ t.no_groups }}</p>
{%- else %}
<ul class="divide-y text-sm">
{%- for group in mine %}
<li class="flex flex-wrap items-baseline justify-between gap-2 py-2">
<a href="/ui/groups/{{ group.id }}" class="font-medium underline">{{ group.name }}</a>
<span class="text-muted-foreground">{{ group.kind }}{% if let Some(role) = group.role %} · {{ role }}{% endif %}</span>
</li>
{%- endfor %}
</ul>
{%- endif %}
</section>
<section class="mt-4 rounded-lg border bg-card p-5 space-y-3">
<h2 class="font-semibold">{{ t.search_groups }}</h2>
<form method="get" action="/ui/groups" role="search" class="flex gap-2">
<input type="hidden" name="lang" value="{{ layout.lang.code() }}">
<input type="search" name="q" value="{{ q }}" placeholder="{{ t.search_groups_placeholder }}" aria-label="{{ t.search_groups_placeholder }}"
class="flex-1 rounded-md border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
<button type="submit" class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted">{{ t.search_button }}</button>
</form>
<p class="text-sm text-muted-foreground">{{ t.search_groups_hint }} <a href="{{ zotero_search }}" target="_blank" rel="noreferrer" class="underline">{{ t.search_on_zotero }}</a>.</p>
{%- if let Some(found) = found %}
{%- if found.is_empty() %}
<p class="text-sm text-muted-foreground">{{ t.no_groups_match }}</p>
{%- else %}
<ul class="divide-y text-sm">
{%- for group in found %}
<li class="flex flex-wrap items-baseline justify-between gap-2 py-2">
<a href="/ui/groups/{{ group.id }}" class="font-medium underline">{{ group.name }}</a>
<span class="text-muted-foreground">{{ group.kind }}{% if let Some(role) = group.role %} · {{ role }}{% endif %}</span>
</li>
{%- endfor %}
</ul>
{%- endif %}
{%- endif %}
</section>
{% endblock %}