<!--
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 "page_body"}}

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">My profile - {{.LoggedUser.Username}}</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="profile_form" action="{{.CurrentURL}}" method="POST">
            <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="" spellcheck="false"
                        value="{{.Email}}" maxlength="255" autocomplete="nope" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
                </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="{{.Description}}" maxlength="255" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
                </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 not .LoggedUser.CanChangeAPIKeyAuth}}disabled="disabled"{{end}}
                    {{if .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 yourself, in REST API, with an API key. If this permission is not granted, your credentials are required to use the REST API on your behalf
                    </small>
                </div>
            </div>

            {{if .LoggedUser.CanManagePublicKeys}}
            <div class="card bg-light mb-3">
                <div class="card-header">
                    Public keys
                </div>
                <div class="card-body">
                    <div class="form-group row">
                        <div class="col-md-12 form_field_pk_outer">
                            {{range $idx, $val := .PublicKeys}}
                            <div class="row form_field_pk_outer_row">
                                <div class="form-group col-md-11">
                                    <textarea class="form-control" id="idPublicKey{{$idx}}" name="public_keys" rows="4"
                                        placeholder="Paste your public key here">{{$val}}</textarea>
                                </div>
                                <div class="form-group col-md-1">
                                    <button class="btn btn-circle btn-danger remove_pk_btn_frm_field">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            {{else}}
                            <div class="row form_field_pk_outer_row">
                                <div class="form-group col-md-11">
                                    <textarea class="form-control" id="idPublicKey0" name="public_keys" rows="4"
                                        placeholder="Paste your public key here"></textarea>
                                </div>
                                <div class="form-group col-md-1">
                                    <button class="btn btn-circle btn-danger remove_pk_btn_frm_field" disabled>
                                        <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_pk_field_btn">
                            <i class="fas fa-plus"></i> Add new public key
                        </button>
                    </div>
                </div>
            </div>
            {{end}}
            {{if .CanSubmit}}
            <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
            <button type="submit" class="btn btn-primary float-right mt-3 px-5">Submit</button>
            {{end}}
        </form>
    </div>
</div>
{{end}}

{{define "extra_js"}}
{{if .LoggedUser.CanManagePublicKeys}}
<script type="text/javascript">
    $(document).ready(function () {
        $("body").on("click", ".add_new_pk_field_btn", function () {
            let index = $(".form_field_pk_outer").find(".form_field_pk_outer_row").length;
            while (document.getElementById("idPublicKey"+index) != null){
                index++;
            }
            $(".form_field_pk_outer").append(`
                    <div class="row form_field_pk_outer_row">
                        <div class="form-group col-md-11">
                            <textarea class="form-control" id="idPublicKey${index}" name="public_keys" rows="4"
                                placeholder="Paste your public key here"></textarea>
                        </div>
                        <div class="form-group col-md-1">
                            <button class="btn btn-circle btn-danger remove_pk_btn_frm_field">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                `);
        });

        $("body").on("click", ".remove_pk_btn_frm_field", function () {
            $(this).closest(".form_field_pk_outer_row").remove();
        });
    });
</script>
{{end}}
{{end}}