#extend("base"):
    #export("title", "User administration")
    #export("body"):
        <div class="users loading list" data-source="#baseURL/api/admin" data-dialog="dialog#user" data-item="User">
            <div class="progress">Loading <span class="spinner"></span></div>
            <table>
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Name</th>
                        <th>Roles</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <button class="new" data-dialog="dialog#invite">Invite</button>
            <template>
                <tr>
                    <td class="email" data-label="Email"></td>
                    <td class="fullname" data-label="Name"></td>
                    <td class="roles" data-label="Roles"></td>
                    <td class="active" data-label="Active"></td>
                </tr>
            </template>
        </div>
        <dialog id="user" data-save-url="#baseURL/api/admin">
            <form method="post" onsubmit="saveUser (event);">
                <input type="hidden" name="userid"></input>
                <table>
                    <tr>
                        <td><label for="email">Email</label></td>
                        <td>
                            <input type="email" name="email" autocomplete="email"></input>
                            <p class="error" for="email">Email is required</p>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="fullname">Name</label></td>
                        <td>
                            <input type="text" name="fullname" autocomplete="name"></input>
                            <p class="error" for="fullname">Name is required</p>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="active"></input><label for="active">Active</label></td>
                    </tr>
                    <tr>
                        <th colspan="2">Roles</th>
                    </tr>
#for(role in roles):                    <tr>
                        <td><input type="checkbox" name="role" class="role" value="#(role)"></input><label for="role">#(role)</label></td>
                    </tr>
#endfor                    <tr>
                        <td colspan="2">
                            <button class="save">Save</button><button class="cancel">Cancel</button>
                            <p class="error" id="failure">Failed to save, try again later.</p>
                        </td>
                    </tr>
                </table>
            </form>
        </dialog>
        <dialog id="invite" data-invite-url="#baseURL/api/admin">
            <form method="post" onsubmit="inviteUser (event);">
                <table>
                    <tr>
                        <td><label for="email">Email</label></td>
                        <td>
                            <input type="email" name="email" autocomplete="email"></input>
                            <p class="error" for="email">Email is required</p>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="fullname">Name</label></td>
                        <td>
                            <input type="text" name="fullname" autocomplete="name"></input>
                            <p class="error" for="fullname">Name is required</p>
                        </td>
                    </tr>
#for(role in roles):                    <tr>
                        <td><input type="checkbox" name="role" class="role" value="#(role)"></input><label for="role">#(role)</label></td>
                    </tr>
#endfor                    <tr>
                        <td colspan="2">
                            <button class="invite">Invite</button><button class="cancel">Cancel</button>
                            <p class="error" id="failure">Invite failed, try again later.</p>
                        </td>
                    </tr>
                </table>
            </form>
        </dialog>
    #endexport
#endextend