{% extends "base.html" %}
{% block title %}{{ t.connect_account }}{% endblock %}
{% block content %}
<div class="mx-auto max-w-md rounded-lg border bg-card p-6 space-y-4">
<h1 class="text-xl font-semibold tracking-tight">{{ t.connect_account }}</h1>
<p class="text-sm text-muted-foreground">{{ t.connect_why }}</p>
<p class="text-sm text-muted-foreground">
{{ t.connect_how }}
<a href="https://www.zotero.org/settings/keys/new" target="_blank" rel="noopener noreferrer" class="underline">{{ t.connect_key_page }}</a>
</p>
<form method="post" action="/ui/account" class="space-y-3">
<label class="block space-y-1">
<span class="text-sm font-medium">{{ t.zotero_key }}</span>
<input type="password" name="key" required autocomplete="off" spellcheck="false"
class="w-full rounded-md border bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring">
</label>
{%- if let Some(error) = error %}
<p role="alert" class="text-sm text-destructive">{{ error }}</p>
{%- endif %}
<button type="submit" class="w-full rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring">{{ t.connect }}</button>
</form>
<p class="text-sm text-muted-foreground">{{ t.connect_kept }}</p>
</div>
{% endblock %}