{% extends "admin/layout.html" %}
{% let active_page = "users" %}

{% block title %}{{ t.users_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.users_title }}</h1>
</div>

{% for user in &users %}
<div class="item-card">
    <div class="item-card-header">
        <span class="name">{{ user.login }}{% if let Some(dn) = user.display_name.as_deref() %} <span style="font-weight:400;color:#888;">— {{ dn }}</span>{% endif %}</span>
        <span class="badge badge-{{ user.status }}">{{ t.client_status(&user.status) }}</span>
    </div>
    <div class="item-card-meta">
        <span>🕐 {{ user.created_at.format("%d.%m.%Y %H:%M") }}</span>
    </div>
    <div class="item-card-actions">
        {% if user.status == "active" %}
            <form method="post" action="/admin/users/{{ user.id }}/archive">
                <button type="submit" class="button is-small is-warning is-outlined btn-sm">{{ t.action_archive }}</button>
            </form>
        {% else %}
            <form method="post" action="/admin/users/{{ user.id }}/activate">
                <button type="submit" class="button is-small is-success is-outlined btn-sm">{{ t.action_activate }}</button>
            </form>
        {% endif %}
    </div>
</div>
{% endfor %}

<div class="form-card" style="margin-top:1.5rem;">
    <h2 class="is-size-5 has-text-weight-bold mb-3">{{ t.users_add_title }}</h2>
    {% if let Some(err) = error.as_ref() %}
        <div class="notification is-danger is-light">{{ err }}</div>
    {% endif %}
    <form method="post" action="/admin/users/add">
        <div class="columns is-mobile">
            <div class="column">
                <div class="field">
                    <label class="label is-small">{{ t.users_login }}</label>
                    <div class="control"><input class="input" type="text" name="login" required></div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label is-small">{{ t.users_display_name }}</label>
                    <div class="control"><input class="input" type="text" name="display_name"></div>
                </div>
            </div>
        </div>
        <div class="columns is-mobile">
            <div class="column">
                <div class="field">
                    <label class="label is-small">{{ t.users_password }}</label>
                    <div class="control"><input class="input" type="password" name="password" required minlength="4"></div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label class="label is-small">{{ t.users_password_confirm }}</label>
                    <div class="control"><input class="input" type="password" name="password_confirm" required minlength="4"></div>
                </div>
            </div>
        </div>
        <button type="submit" class="button is-primary">{{ t.users_add_button }}</button>
    </form>
</div>
{% endblock %}