<!--
Copyright (C) 2019-2023 Nicola Murino

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
{{template "base" .}}

{{define "title"}}{{.Title}}{{end}}

{{define "extra_css"}}
<link href="{{.StaticURL}}/vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
{{end}}

{{define "page_body"}}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">{{if .IsAdd}}Add a new admin{{else}}Edit admin{{end}}</h6>
    </div>
    <div class="card-body">
        {{if .Error}}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{.Error}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {{end}}
        <form id="admin_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">
            <div class="form-group row">
                <label for="idUsername" class="col-sm-2 col-form-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="idUsername" name="username" placeholder=""
                        value="{{.Admin.Username}}" maxlength="255" autocomplete="nope" spellcheck="false" required {{if not .IsAdd}}readonly{{end}}>
                </div>
            </div>

            <div class="form-group row">
                <label for="idStatus" class="col-sm-2 col-form-label">Status</label>
                <div class="col-sm-10">
                    <select class="form-control selectpicker" id="idStatus" name="status">
                        <option value="1" {{if eq .Admin.Status 1 }}selected{{end}}>Active</option>
                        <option value="0" {{if eq .Admin.Status 0 }}selected{{end}}>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="idEmail" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="idEmail" name="email" placeholder=""
                        value="{{.Admin.Email}}" maxlength="255" spellcheck="false">
                </div>
            </div>

            <div class="form-group row">
                <label for="idDescription" class="col-sm-2 col-form-label">Description</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="idDescription" name="description" placeholder=""
                        value="{{.Admin.Description}}" maxlength="255" aria-describedby="descriptionHelpBlock">
                    <small id="descriptionHelpBlock" class="form-text text-muted">
                        Optional description, for example the admin full name
                    </small>
                </div>
            </div>

            <div class="form-group row">
                <label for="idPassword" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="idPassword" name="password" placeholder="" autocomplete="new-password" spellcheck="false"
                    {{if not .IsAdd}}aria-describedby="pwdHelpBlock" {{end}}>
                    {{if not .IsAdd}}
                    <small id="pwdHelpBlock" class="form-text text-muted">
                        If empty the current password will not be changed
                    </small>
                    {{end}}
                </div>
            </div>

            <div class="form-group row">
                <label for="idPermissions" class="col-sm-2 col-form-label">Permissions</label>
                <div class="col-sm-10">
                    <select class="form-control selectpicker" id="idPermissions" name="permissions" required multiple>
                        {{range $validPerm := .Admin.GetValidPerms}}
                        <option value="{{$validPerm}}" {{range $perm :=$.Admin.Permissions }}
                        {{if eq $perm $validPerm}}selected{{end}}{{end}}>{{$validPerm}}
                        </option>
                        {{end}}
                    </select>
                </div>
            </div>

            <div class="card bg-light mb-3">
                <div class="card-header">
                    <b>Role</b>
                </div>
                <div class="card-body">
                    <h6 class="card-title mb-4">Setting a role limit the administrator to only manage users with the same role. Role administrators cannot have the following permissions: "manage_admins", "manage_roles", "manage_event_rules", "manage_apikeys", "manage_system", "manage_ip_lists"</h6>
                    <div class="form-group row">
                        <label for="idRole" class="col-sm-2 col-form-label">Role</label>
                        <div class="col-sm-10">
                            <select class="form-control selectpicker" data-live-search="true" id="idRole" name="role">
                                <option value=""></option>
                                {{- range .Roles}}
                                <option value="{{.Name}}" {{if eq $.Admin.Role .Name}}selected{{end}}>{{.Name}}</option>
                                {{- end}}
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-light mb-3">
                <div class="card-header">
                    <b>Groups for users</b>
                </div>
                <div class="card-body">
                    <h6 class="card-title mb-4">Groups automatically selected for new users created by this admin. The admin will still be able to choose different groups. These settings are only used for this admin UI and they will be ignored in REST API/hooks.</h6>
                    <div class="form-group row">
                        <div class="col-md-12 form_field_groups_outer">
                            {{range $idx, $val := .Admin.Groups}}
                            <div class="row form_field_groups_outer_row">
                                <div class="form-group col-md-7">
                                    <select class="form-control selectpicker" data-live-search="true" id="idGroup{{$idx}}" name="group{{$idx}}">
                                        <option value=""></option>
                                        {{- range $.Groups}}
                                        <option value="{{.Name}}" {{if eq $val.Name .Name}}selected{{end}}>{{.Name}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <select class="form-control selectpicker" id="idAddAsGroupType{{$idx}}" name="add_as_group_type{{$idx}}">
                                        <option value="0" {{if eq $val.Options.AddToUsersAs 0}}selected{{end}}>Add as membership</option>
                                        <option value="1" {{if eq $val.Options.AddToUsersAs 1}}selected{{end}}>Add as primary</option>
                                        <option value="2" {{if eq $val.Options.AddToUsersAs 2}}selected{{end}}>Add as secondary</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-1">
                                    <button class="btn btn-circle btn-danger remove_group_btn_frm_field">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            {{else}}
                            <div class="row form_field_groups_outer_row">
                                <div class="form-group col-md-7">
                                    <select class="form-control selectpicker" data-live-search="true" id="idGroup0" name="group0">
                                        <option value=""></option>
                                        {{- range .Groups}}
                                        <option value="{{.Name}}">{{.Name}}</option>
                                        {{- end}}
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <select class="form-control selectpicker" id="idAddAsGroupType0" name="add_as_group_type0">
                                        <option value="0">Add as membership</option>
                                        <option value="1">Add as primary</option>
                                        <option value="2">Add as secondary</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-1">
                                    <button class="btn btn-circle btn-danger remove_group_btn_frm_field">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            {{end}}
                        </div>
                    </div>

                    <div class="row mx-1">
                        <button type="button" class="btn btn-secondary add_new_group_field_btn">
                            <i class="fas fa-plus"></i> Add group
                        </button>
                    </div>
                </div>
            </div>

            <div class="card bg-light mb-3">
                <div class="card-header">
                    <b>User page preferences</b>
                </div>
                <div class="card-body">
                    <h6 class="card-title mb-4">You can hide some sections from the user page. These are not security settings and are not enforced server side in any way. They are only intended to simplify the user page in the WebAdmin UI.</h6>
                    <div class="form-group row">
                        <label for="idUserPageHiddenSections" class="col-sm-2 col-form-label">Hide sections</label>
                        <div class="col-sm-10">
                            <select class="form-control selectpicker" id="idUserPageHiddenSections" name="user_page_hidden_sections" multiple>
                                <option value="1" {{if .Admin.Filters.Preferences.HideGroups}}selected{{end}}>Groups</option>
                                <option value="2" {{if .Admin.Filters.Preferences.HideFilesystem}}selected{{end}}>Filesystem</option>
                                <option value="3" {{if .Admin.Filters.Preferences.HideVirtualFolders}}selected{{end}}>Virtual Folders</option>
                                <option value="4" {{if .Admin.Filters.Preferences.HideProfile}}selected{{end}}>Profile</option>
                                <option value="5" {{if .Admin.Filters.Preferences.HideACLs}}selected{{end}}>ACLs</option>
                                <option value="6" {{if .Admin.Filters.Preferences.HideDiskQuotaAndBandwidthLimits}}selected{{end}}>Disk quota and bandwidth limits</option>
                                <option value="7" {{if .Admin.Filters.Preferences.HideAdvancedSettings}}selected{{end}}>Advanced settings</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="idDefaultUsersExpiration" class="col-sm-2 col-form-label">Default users expiration</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="idDefaultUsersExpiration" name="default_users_expiration"
                                value="{{.Admin.Filters.Preferences.DefaultUsersExpiration}}" min="0" aria-describedby="defaultUsersExpirationHelpBlock">
                            <small id="defaultUsersExpirationHelpBlock" class="form-text text-muted">
                                Default expiration for newly created users as number of days
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <label for="idAllowedIP" class="col-sm-2 col-form-label">Allowed IP/Mask</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="idAllowedIP" name="allowed_ip" rows="3" placeholder=""
                        aria-describedby="allowedIPHelpBlock">{{.Admin.GetAllowedIPAsString}}</textarea>
                    <small id="allowedIPHelpBlock" class="form-text text-muted">
                        Comma separated IP/Mask in CIDR format, for example "192.168.1.0/24,10.8.0.100/32"
                    </small>
                </div>
            </div>

            <div class="form-group">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="idAllowAPIKeyAuth" name="allow_api_key_auth"
                    {{if .Admin.Filters.AllowAPIKeyAuth}}checked{{end}} aria-describedby="allowAPIKeyAuthHelpBlock">
                    <label for="idAllowAPIKeyAuth" class="form-check-label">Allow API key authentication</label>
                    <small id="allowAPIKeyAuthHelpBlock" class="form-text text-muted">
                        Allow to impersonate this admin, in REST API, with an API key
                    </small>
                </div>
            </div>

            <div class="form-group row">
                <label for="idAdditionalInfo" class="col-sm-2 col-form-label">Additional info</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="idAdditionalInfo" name="additional_info" rows="3"
                        aria-describedby="additionalInfoHelpBlock">{{.Admin.AdditionalInfo}}</textarea>
                    <small id="additionalInfoHelpBlock" class="form-text text-muted">
                        Free form text field
                    </small>
                </div>
            </div>

            <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
            <button type="submit" class="btn btn-primary float-right mt-3 px-5">Submit</button>
        </form>
    </div>
</div>
{{end}}

{{define "extra_js"}}
<script src="{{.StaticURL}}/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
    $("body").on("click", ".add_new_group_field_btn", function () {
        let index = $(".form_field_groups_outer").find(".form_field_groups_outer_row").length;
        while (document.getElementById("idGroup"+index) != null){
            index++;
        }
        $(".form_field_groups_outer").append(`
            <div class="row form_field_groups_outer_row">
                <div class="form-group col-md-7">
                    <select class="form-control" id="idGroup${index}" name="group${index}">
                        <option value=""></option>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <select class="form-control" id="idAddAsGroupType${index}" name="add_as_group_type${index}">
                        <option value="0">Add as membership</option>
                        <option value="1">Add as primary</option>
                        <option value="2">Add as secondary</option>
                    </select>
                </div>
                <div class="form-group col-md-1">
                    <button class="btn btn-circle btn-danger remove_group_btn_frm_field">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        `);
        {{- range .Groups}}
        $("#idGroup"+index).append($('<option>').val('{{.Name}}').text('{{.Name}}'));
        {{- end}}
        $("#idGroup"+index).selectpicker({'liveSearch': true});
        $("#idAddAsGroupType"+index).selectpicker();
    });

    $("body").on("click", ".remove_group_btn_frm_field", function () {
        $(this).closest(".form_field_groups_outer_row").remove();
    });

</script>
{{end}}