<!--
Copyright (C) 2024 Nicola Murino

This WebUI uses the KeenThemes Bootstrap Templates:

https://keenthemes.com/bootstrap-templates

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 "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 data-i18n="{{.Title}}" class="card-title section-title"></h3>
    </div>
    <div class="card-body">
        {{- template "errmsg" .Error}}
        <form id="iplist_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">

            <div class="form-group row">
                <label for="idType" data-i18n="general.type" class="col-md-3 col-form-label">Type</label>
                <div class="col-md-9">
                    <input id="idType" type="text" {{if eq .Entry.Type 1}}data-i18n="[value]ip_list.allow_list"{{end}}{{if eq .Entry.Type 2}}data-i18n="[value]ip_list.defender_list"{{end}}{{if eq .Entry.Type 3}}data-i18n="[value]ip_list.ratelimiters_safe_list"{{end}} name="type" maxlength="50"
                        class="form-control-plaintext readonly-input" readonly />
                </div>
            </div>

            <div class="form-group row mt-10">
                <label for="idIPOrNet" data-i18n="ip_list.ip_net" class="col-md-3 col-form-label">IP/Network</label>
                <div class="col-md-9">
                    <input id="idIPOrNet" type="text" name="ipornet" value="{{.Entry.IPOrNet}}" maxlength="50" autocomplete="off"
                        required {{if eq .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control" aria-describedby="idIPOrNetHelp"{{end}} />
                    {{- if ne .Mode 2}}
                    <div id="idIPOrNetHelp" class="form-text" data-i18n="ip_list.ip_net_help"></div>
                    {{- end}}
                </div>
            </div>

            {{- if eq .Entry.Type 2}}
            <div class="form-group row mt-10">
                <label for="idMode" data-i18n="general.mode" class="col-md-3 col-form-label">Mode</label>
                <div class="col-md-9">
                    <select id="idMode" name="mode" class="form-select" data-control="i18n-select2" data-hide-search="true">
                        <option value="2" data-i18n="ip_list.deny" {{if eq .Entry.Mode 2 }}selected{{end}}>Deny</option>
                        <option value="1" data-i18n="ip_list.allow" {{if eq .Entry.Mode 1 }}selected{{end}}>Allow</option>
                    </select>
                </div>
            </div>
            {{- end}}

            <div class="form-group row mt-10">
                <label for="idProtocols" data-i18n="ip_list.protocols" class="col-md-3 col-form-label">
                    Protocols
                </label>
                <div class="col-md-9">
                    <select id="idProtocols" name="protocols" data-i18n="[data-placeholder]ip_list.any" class="form-select" data-control="i18n-select2" data-close-on-select="false" multiple>
                        <option value="1" {{if .Entry.HasProtocol "SSH" }}selected{{end}}>SSH</option>
                        <option value="2" {{if .Entry.HasProtocol "FTP" }}selected{{end}}>FTP</option>
                        <option value="4" {{if .Entry.HasProtocol "DAV" }}selected{{end}}>DAV</option>
                        <option value="8" {{if .Entry.HasProtocol "HTTP" }}selected{{end}}>HTTP</option>
                    </select>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label for="idDescription" data-i18n="general.description" class="col-md-3 col-form-label">Description</label>
                <div class="col-md-9">
                    <input id="idDescription" type="text" class="form-control" name="description" value="{{.Entry.Description}}" maxlength="512">
                </div>
            </div>

            <div class="d-flex justify-content-end mt-12">
                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                <button type="submit" id="form_submit" class="btn btn-primary px-10" name="form_action" value="submit">
                    <span data-i18n="general.submit" class="indicator-label">
                        Submit
                    </span>
                    <span data-i18n="general.wait" 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 type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    $(document).on("i18nshow", function(){
        $('#iplist_form').submit(function (event) {
			let submitButton = document.querySelector('#form_submit');
			submitButton.setAttribute('data-kt-indicator', 'on');
			submitButton.disabled = true;
        });
    });
</script>
{{- end}}