<!--
Copyright (C) 2023 Nicola Murino

This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:

https://keenthemes.com/products/templates-mega-bundle

KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.

This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}

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

{{- define "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 class="card-title text-primary">{{if .IsAdd}}Add a new share{{else}}Edit share{{end}}</h3>
    </div>
    <div class="card-body">
        {{- template "errmsg" .Error}}
        <form id="share_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Name</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="" name="name" value="{{.Share.Name}}"
                        maxlength="255" autocomplete="nope" required {{if not .IsAdd}}readonly{{end}} />
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Scope</label>
                <div class="col-md-9">
                    <select name="scope" class="form-select" data-control="select2" data-hide-search="true">
                        <option value="1" {{if eq .Share.Scope 1 }}selected{{end}}>Read</option>
                        <option value="2" {{if eq .Share.Scope 2 }}selected{{end}}>Write</option>
                        <option value="3" {{if eq .Share.Scope 3 }}selected{{end}}>Read/Write</option>
                    </select>
                    <div class="form-text">
                        For scope "Write" and "Read&Write" you have to define one path and it must be a directory
                    </div>
                </div>
            </div>

            <div class="card card-rounded mt-10">
                <div class="card-header bg-light">
                    <h3 class="card-title">Paths</h3>
                </div>
                <div class="card-body">
                    <div id="paths">
                        <div class="form-group">
                            <div data-repeater-list="paths">
                                {{- range $idx, $val := .Share.Paths}}
                                <div data-repeater-item>
                                    <div class="form-group row">
                                        <div class="col-md-9">
                                            <input type="text" class="form-control mt-3 mt-md-8"
                                                placeholder="file or directory path, i.e. /dir or /dir/file.txt"
                                                name="path" value="{{$val}}" />
                                        </div>
                                        <div class="col-md-3">
                                            <a href="#" data-repeater-delete
                                                class="btn btn-light-danger mt-3 mt-md-8">
                                                <i class="ki-duotone ki-trash fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {{- else}}
                                <div data-repeater-item>
                                    <div class="form-group row">
                                        <div class="col-md-9">
                                            <input type="text" class="form-control mt-3 mt-md-8"
                                                placeholder="file or directory path, i.e. /dir or /dir/file.txt"
                                                name="path" value="" />
                                        </div>
                                        <div class="col-md-3">
                                            <a href="#" data-repeater-delete
                                                class="btn btn-light-danger mt-3 mt-md-8">
                                                <i class="ki-duotone ki-trash fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {{- end}}
                            </div>
                        </div>

                        <div class="form-group mt-5">
                            <a href="#" data-repeater-create class="btn btn-light-primary">
                                <i class="ki-duotone ki-plus fs-3"></i>
                                Add
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Password</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" name="password" autocomplete="new-password"
                        placeholder="" spellcheck="false" value="{{.Share.Password}}" />
                    <div class="form-text">
                        If set the share will be password-protected
                    </div>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Expiration</label>
                <div class="col-md-9 d-flex">
                    <input id="id_expiration" class="form-control" placeholder="Pick an expiration date" />
                    <button class="btn btn-icon btn-light-danger ms-2 d-none" id="id_expiration_clear">
                        <i class="ki-duotone ki-cross fs-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </button>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Max tokens</label>
                <div class="col-md-9">
                    <input type="number" min="0" class="form-control" name="max_tokens" value="{{.Share.MaxTokens}}" />
                    <div class="form-text">
                        Maximum number of times this share can be accessed. 0 means no limit
                    </div>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Allowed IP/Mask</label>
                <div class="col-md-9">
                    <textarea class="form-control" name="allowed_ip" rows="3"
                        placeholder="">{{.Share.GetAllowedFromAsString}}</textarea>
                    <div class="form-text">
                        Comma separated IP/Mask in CIDR format, for example "192.168.1.0/24,10.8.0.100/32"
                    </div>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Description</label>
                <div class="col-md-9">
                    <textarea class="form-control" name="description" rows="3"
                        placeholder="">{{.Share.Description}}</textarea>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-12">
                <input type="hidden" name="expiration_date" id="hidden_start_datetime" value="">
                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                <button type="submit" id="form_submit" class="btn btn-primary px-10">
                    <span class="indicator-label">
                        Submit
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>
{{- end}}

{{- define "extra_js"}}
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    KTUtil.onDOMContentLoaded(function () {
            initRepeater('#paths');
            initRepeaterItems();

            const picker = $('#id_expiration').flatpickr({
                enableTime: false,
                time_24hr: true,
                dateFormat: "Y-m-d",
                defaultHour: 23,
                defaultMinute: 59,
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length > 0){
                        $('#id_expiration_clear').removeClass("d-none");
                    } else {
                        $('#id_expiration_clear').addClass("d-none");
                    }
                }
            });
            //{{ if gt .Share.ExpiresAt 0 }}
            let input_dt = moment('{{.Share.ExpiresAt }}', 'x').format('YYYY-MM-DD');
            picker.setDate(input_dt, true);
            //{{ end }}

            $('#id_expiration_clear').on("click", function(e){
                e.preventDefault();
                picker.clear();
            });

            $("#share_form").submit(function (event) {
                $('#hidden_start_datetime').val("");
                let dt = picker.selectedDates;
                if (dt.length > 0) {
                    let d = dt[0];
                    if (d) {
                        let dateString = moment.utc(d).format('YYYY-MM-DD HH:mm:ss');
                        $('#hidden_start_datetime').val(dateString);
                    }
                }
                let submitButton = document.querySelector('#form_submit');
                submitButton.setAttribute('data-kt-indicator', 'on');
                submitButton.disabled = true;
            });
        });
</script>
{{- end}}