{# Admin-only panels: central SMTP and account management. #}
<section class="panel">
    <div class="panel-header">
        <div>
            <h2 class="panel-title">Email (SMTP)</h2>
            <p class="panel-copy">
                Configured once here and reused by every <span class="mono">type: email</span> task and every
                pipeline <span class="mono">notify:</span> block. A task may still override any field inline.
            </p>
        </div>
        <span class="meta-pill">{% if smtp.configured %}configured{% else %}not configured{% endif %}</span>
    </div>

    <div class="settings-form">
        <label class="login-field"><span class="small-kicker">Host</span>
            <input id="smtp-host" type="text" value="{{ smtp.host }}" placeholder="smtp.example.com"></label>
        <label class="login-field"><span class="small-kicker">Port</span>
            <input id="smtp-port" type="number" value="{{ smtp.port }}"></label>
        <label class="login-field"><span class="small-kicker">Username</span>
            <input id="smtp-username" type="text" value="{{ smtp.username }}" autocomplete="off"></label>
        <label class="login-field"><span class="small-kicker">Password</span>
            <input id="smtp-password" type="password" autocomplete="new-password"
                   placeholder="{% if smtp.password_set %}unchanged{% else %}not set{% endif %}"></label>
        <label class="login-field"><span class="small-kicker">From address</span>
            <input id="smtp-from" type="text" value="{{ smtp.from_address }}" placeholder="piply@example.com"></label>
        <label class="toolbar-check">
            <input id="smtp-tls" type="checkbox" {% if smtp.use_tls %}checked{% endif %}> STARTTLS</label>
        <label class="toolbar-check">
            <input id="smtp-ssl" type="checkbox" {% if smtp.use_ssl %}checked{% endif %}> Implicit SSL</label>
    </div>

    <p class="footer-note">
        The password is write-only: it is never returned by the API or shown here. Leave it blank to keep the
        stored value. Setting <span class="mono">PIPLY_SMTP_PASSWORD</span> in the environment takes precedence
        and avoids storing it in the database at all.
    </p>

    <div class="card-actions">
        <button class="button primary" onclick="saveSmtp()">Save</button>
        <button class="button ghost" onclick="testSmtp()">Send test email</button>
    </div>
    <pre class="code-block" id="smtp-result" hidden></pre>
</section>

<section class="panel">
    <div class="panel-header">
        <div>
            <h2 class="panel-title">Users and permissions</h2>
            <p class="panel-copy">
                Admins see everything. Other accounts only see the pipelines they are granted, and can only take
                the actions granted on each one.
            </p>
        </div>
        <span class="meta-pill">{% if auth_required %}authentication on{% else %}authentication off{% endif %}</span>
    </div>

    {% if users %}
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th>User</th><th>Role</th><th>State</th><th>Last login</th>
                    <th>Pipeline permissions</th><th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for item in users %}
                <tr>
                    <td class="mono">{{ item.username }}</td>
                    <td>{{ item.role }}</td>
                    <td>{% if item.is_active %}active{% else %}disabled{% endif %}</td>
                    <td class="nowrap">{{ item.last_login_at or "never" }}</td>
                    <td>
                        {% if item.role == 'admin' %}
                        <span class="meta-pill tiny">every pipeline</span>
                        {% elif item.permissions %}
                        {% for pipeline_id, actions in item.permissions.items() %}
                        <span class="meta-pill tiny mono">{% if pipeline_id == '*' %}all{% else %}{{ pipeline_id }}{% endif %}: {{ actions|join(',') }}</span>
                        {% endfor %}
                        {% else %}<span class="muted">none</span>{% endif %}
                    </td>
                    <td>
                        <div class="table-actions">
                            <button class="button ghost tiny-button" onclick="promptGrant('{{ item.username }}')">Grant</button>
                            <button class="button ghost tiny-button" onclick="deleteAccount('{{ item.username }}')">Delete</button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        No accounts exist, so authentication is off. Create the first one below, or with
        <span class="mono">piply users create &lt;name&gt; --role admin</span>.
    </div>
    {% endif %}

    <div class="settings-form" style="margin-top:12px;">
        <label class="login-field"><span class="small-kicker">New username</span>
            <input id="new-username" type="text" autocomplete="off"></label>
        <label class="login-field"><span class="small-kicker">Password (8+ characters)</span>
            <input id="new-password" type="password" autocomplete="new-password"></label>
        <label class="login-field"><span class="small-kicker">Role</span>
            <select id="new-role">
                <option value="user">user</option>
                <option value="admin">admin</option>
            </select></label>
    </div>
    <div class="card-actions">
        <button class="button primary" onclick="createAccount()">Create account</button>
    </div>
    <pre class="code-block" id="user-result" hidden></pre>
</section>