{{define "title"}}Add Admin{{end}}
{{define "page_title"}}Add Admin{{end}}

{{define "content"}}
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><i class="bi bi-person-plus me-2"></i>Add a new admin</h5></div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" required autofocus>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Initial password</label>
                        <input type="password" class="form-control" id="password" name="password" required minlength="10">
                        <div class="form-text">At least 10 characters, with a letter, a number, and a symbol. They'll be asked to change it on first login.</div>
                    </div>

                    {{if .can_grant_global}}
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_global_admin" name="is_global_admin">
                            <label class="form-check-label" for="is_global_admin"><strong>Global admin</strong></label>
                            <div class="form-text">Full access to every domain, sender, and setting — same as your own account. Leave unchecked to scope this admin to specific domains below.</div>
                        </div>
                    </div>
                    {{end}}

                    <div id="domain-picker" class="mb-4">
                        <label class="form-label">Domains this admin can manage</label>
                        {{if .domains}}
                        <div class="border rounded p-3" style="max-height: 240px; overflow-y: auto;">
                            {{range .domains}}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="domain_ids" value="{{.ID}}" id="dom-{{.ID}}">
                                <label class="form-check-label" for="dom-{{.ID}}">{{.DomainName}}</label>
                            </div>
                            {{end}}
                        </div>
                        {{else}}
                        <p class="text-muted">You don't manage any domains yet to delegate.</p>
                        {{end}}
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="/pymta-manager/admins" class="btn btn-secondary"><i class="bi bi-arrow-left me-2"></i>Back</a>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-person-plus me-2"></i>Create Admin</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "extra_js"}}
{{if .can_grant_global}}
<script>
    document.getElementById('is_global_admin').addEventListener('change', function(e) {
        document.getElementById('domain-picker').style.display = e.target.checked ? 'none' : '';
    });
</script>
{{end}}
{{end}}