{% extends "base.html" %}
{% block title %}{{ group.name }}{% endblock %}
{% block content %}
<p class="mb-4 text-sm"><a href="/" class="underline">{{ t.back_to_library }}</a></p>
<section class="space-y-2">
<h1 class="text-2xl font-semibold tracking-tight">{{ group.name }}</h1>
<p class="text-sm text-muted-foreground">{{ t.your_role }} {{ role }}</p>
{%- if !group.description.is_empty() %}
<p class="text-sm">{{ group.description }}</p>
{%- endif %}
{%- if let Some(error) = error %}
<p role="alert" class="text-sm text-destructive">{{ error }}</p>
{%- endif %}
</section>
{%- if manager && can_write %}
<section class="mt-6 rounded-lg border bg-card p-5 space-y-3">
<form method="post" action="/ui/groups/{{ group.id }}/settings" class="space-y-3">
<label class="block space-y-1">
<span class="block text-sm font-medium">{{ t.group_name }}</span>
<input name="name" required maxlength="100" value="{{ group.name }}"
class="w-full rounded-md border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
</label>
<label class="block space-y-1">
<span class="block text-sm font-medium">{{ t.group_description }}</span>
<textarea name="description" maxlength="1000" rows="2"
class="w-full rounded-md border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring">{{ group.description }}</textarea>
</label>
<label class="block space-y-1">
<span class="block text-sm font-medium">{{ t.library_editing }}</span>
<select name="library_editing" class="rounded-md border bg-background px-3 py-1.5 text-sm">
<option value="members"{% if group.library_editing == "members" %} selected{% endif %}>{{ t.editing_members }}</option>
<option value="admins"{% if group.library_editing == "admins" %} selected{% endif %}>{{ t.editing_admins }}</option>
</select>
</label>
<label class="block space-y-1">
<span class="block text-sm font-medium">{{ t.file_editing }}</span>
<select name="file_editing" class="rounded-md border bg-background px-3 py-1.5 text-sm">
<option value="members"{% if group.file_editing == "members" %} selected{% endif %}>{{ t.editing_members }}</option>
<option value="admins"{% if group.file_editing == "admins" %} selected{% endif %}>{{ t.editing_admins }}</option>
<option value="none"{% if group.file_editing == "none" %} selected{% endif %}>{{ t.editing_none }}</option>
</select>
</label>
<button type="submit" class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted">{{ t.save }}</button>
</form>
</section>
{%- endif %}
<section class="mt-4 rounded-lg border bg-card p-5 space-y-3">
<h2 class="font-semibold">{{ t.members }}</h2>
<ul class="divide-y text-sm">
{%- for member in members %}
<li class="flex flex-wrap items-center justify-between gap-2 py-2">
<span>
<span class="font-medium">{{ member.name }}</span>
<span class="text-muted-foreground">· {{ member.role }}{% if member.me %} · {{ t.you }}{% endif %}</span>
{%- if !member.orcid.is_empty() %}
<a href="https://orcid.org/{{ member.orcid }}" class="block font-mono text-muted-foreground underline">{{ member.orcid }}</a>
{%- endif %}
</span>
{%- if can_write %}
<span class="flex flex-wrap gap-2">
{%- if member.promotable %}
<form method="post" action="/ui/groups/{{ group.id }}/members">
<input type="hidden" name="user" value="{{ member.id }}">
<input type="hidden" name="role" value="{% if member.admin %}member{% else %}admin{% endif %}">
<button type="submit" class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted">
{%- if member.admin %}{{ t.make_member }}{% else %}{{ t.make_admin }}{% endif -%}
</button>
</form>
{%- endif %}
{%- if member.removable %}
<form method="post" action="/ui/groups/{{ group.id }}/remove">
<input type="hidden" name="user" value="{{ member.id }}">
<button type="submit" class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted">
{%- if member.me %}{{ t.leave_group }}{% else %}{{ t.remove }}{% endif -%}
</button>
</form>
{%- endif %}
</span>
{%- endif %}
</li>
{%- endfor %}
</ul>
{%- if manager && can_write %}
<form method="post" action="/ui/groups/{{ group.id }}/members" class="flex flex-wrap items-end gap-2">
<label class="space-y-1">
<span class="block text-sm font-medium">{{ t.orcid_id }}</span>
<input name="orcid" required placeholder="0000-0000-0000-0000" spellcheck="false"
class="w-56 rounded-md border bg-background px-3 py-1.5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring">
</label>
{%- if owner %}
<label class="space-y-1">
<span class="block text-sm font-medium">{{ t.role }}</span>
<select name="role" class="rounded-md border bg-background px-3 py-1.5 text-sm">
<option value="member">{{ t.role_member }}</option>
<option value="admin">{{ t.role_admin }}</option>
</select>
</label>
{%- endif %}
<button type="submit" class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90">{{ t.add_member }}</button>
</form>
<p class="text-xs text-muted-foreground">{{ t.add_member_intro }}</p>
{%- endif %}
</section>
{%- if owner && can_write %}
<section class="mt-4 rounded-lg border bg-card p-5 space-y-3">
<form method="post" action="/ui/groups/{{ group.id }}/delete">
<button type="submit" class="rounded-md border border-destructive px-3 py-1.5 text-sm text-destructive hover:bg-muted">{{ t.delete_group }}</button>
</form>
<p class="text-xs text-muted-foreground">{{ t.delete_group_note }}</p>
</section>
{%- endif %}
{% endblock %}