{{define "title"}}App Passwords - Email Server{{end}}
{{define "page_title"}}App Passwords{{end}}

{{define "content"}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-key me-2"></i>App Passwords <small class="text-muted fs-6">{{.mailbox.Email}}</small></h2>
    <div class="d-flex gap-2">
        <a href="/pymta-manager/mailboxes/{{.mailbox.ID}}/edit" class="btn btn-outline-warning"><i class="bi bi-shield-lock me-2"></i>Reset Mailbox Password</a>
        <a href="/pymta-manager/mailboxes" class="btn btn-secondary"><i class="bi bi-arrow-left me-2"></i>Back to Mailboxes</a>
    </div>
</div>

<div class="alert alert-info">
    <i class="bi bi-info-circle me-2"></i>Use an app password (never the mailbox's own password) to set this mailbox up in Thunderbird or any other IMAP/SMTP client. Each one is shown only once, right after you create it. To reset the mailbox owner's own login password (used for the self-service portal), use <strong>Reset Mailbox Password</strong> above.
</div>

<div class="card mb-4">
    <div class="card-header"><h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Create App Password</h5></div>
    <div class="card-body">
        <form method="POST" action="/pymta-manager/mailboxes/{{.mailbox.ID}}/apppasswords/add" class="row g-2 align-items-end">
            <div class="col-auto">
                <label for="label" class="form-label">Label</label>
                <input type="text" class="form-control" id="label" name="label" placeholder="e.g. Thunderbird laptop">
            </div>
            <div class="col-auto">
                <label for="expires_preset" class="form-label">Expires</label>
                <select class="form-select" id="expires_preset" name="expires_preset" onchange="toggleCustomExpiry()">
                    <option value="never" selected>Never</option>
                    <option value="1d">1 day</option>
                    <option value="7d">7 days</option>
                    <option value="30d">1 month</option>
                    <option value="180d">6 months</option>
                    <option value="365d">1 year</option>
                    <option value="custom">Custom date&hellip;</option>
                </select>
            </div>
            <div class="col-auto" id="expires_custom_wrap" style="display: none;">
                <label for="expires_custom" class="form-label">Expiration Date</label>
                <input type="date" class="form-control" id="expires_custom" name="expires_custom">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-success"><i class="bi bi-key me-2"></i>Generate</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header"><h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Existing App Passwords</h5></div>
    <div class="card-body p-0">
        {{if .passwords}}
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead><tr><th>Label</th><th>Created</th><th>Last Used</th><th>Expires</th><th>Status</th><th>Actions</th></tr></thead>
                    <tbody>
                        {{range .passwords}}
                        <tr>
                            <td>{{.Label}}</td>
                            <td><small class="text-muted">{{strftime "%Y-%m-%d %H:%M" .CreatedAt}}</small></td>
                            <td><small class="text-muted">{{if .LastUsedAt}}{{strftime "%Y-%m-%d %H:%M" .LastUsedAt}}{{else}}Never{{end}}</small></td>
                            <td>
                                {{if .ExpiresAt}}
                                    <small class="{{if isPast .ExpiresAt}}text-danger{{else}}text-muted{{end}}">{{strftime "%Y-%m-%d %H:%M" .ExpiresAt}}</small>
                                    {{if isPast .ExpiresAt}}<span class="badge bg-danger ms-1">Expired</span>{{end}}
                                {{else}}<small class="text-muted">Never</small>{{end}}
                            </td>
                            <td>{{if .IsActive}}<span class="badge bg-success">Active</span>{{else}}<span class="badge bg-danger">Revoked</span>{{end}}</td>
                            <td>
                                <form method="post" action="/pymta-manager/mailboxes/{{$.mailbox.ID}}/apppasswords/{{.ID}}/revoke" class="d-inline">
                                    <button type="submit" class="btn btn-outline-danger btn-sm" title="Revoke" data-confirm="Revoke app password &quot;{{.Label}}&quot;? Any client using it will stop working."><i class="bi bi-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        {{else}}
            <div class="text-center py-5">
                <i class="bi bi-key text-muted" style="font-size: 4rem;"></i>
                <h4 class="text-muted mt-3">No app passwords yet</h4>
                <p class="text-muted">Create one above to connect a mail client to this mailbox.</p>
            </div>
        {{end}}
    </div>
</div>

{{if .reveal}}
<div class="modal fade" id="appPasswordRevealModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark text-white border border-secondary">
            <div class="modal-header border-secondary">
                <h5 class="modal-title"><i class="bi bi-key-fill me-2"></i>App Password Created</h5>
            </div>
            <div class="modal-body">
                <p class="mb-2">Label: <strong>{{.reveal.Label}}</strong></p>
                <p class="text-warning"><i class="bi bi-exclamation-triangle me-1"></i>Copy this password now — it will not be shown again.</p>
                <div class="input-group">
                    <input type="text" class="form-control font-monospace" id="revealedAppPassword" value="{{.reveal.Secret}}" readonly onclick="this.select()">
                    <button class="btn btn-outline-light" type="button" onclick="copyRevealedAppPassword()"><i class="bi bi-clipboard me-1"></i>Copy</button>
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
            </div>
        </div>
    </div>
</div>
{{end}}
{{end}}

{{define "extra_js"}}
<script>
    function toggleCustomExpiry() {
        const preset = document.getElementById('expires_preset').value;
        const wrap = document.getElementById('expires_custom_wrap');
        wrap.style.display = preset === 'custom' ? '' : 'none';
        document.getElementById('expires_custom').required = preset === 'custom';
    }

    {{if .reveal}}
    document.addEventListener('DOMContentLoaded', function() {
        new bootstrap.Modal(document.getElementById('appPasswordRevealModal')).show();
    });
    function copyRevealedAppPassword() {
        const input = document.getElementById('revealedAppPassword');
        input.select();
        navigator.clipboard.writeText(input.value)
            .then(() => showToast('Copied to clipboard', 'success'))
            .catch(() => { document.execCommand('copy'); showToast('Copied to clipboard', 'success'); });
    }
    {{end}}
</script>
{{end}}