{{include("header")/}}


<div class="text-center mb-4">
    <h2>Experiment: Ban System</h2>
</div>

<div class="row justify-content-md-center">
    <div class="col-lg-12 col-xl-10">
        <div class="alert alert-warning text-center" role="alert">
            {{if(options.expEnabled===false)}}
            This is an experiment to test the database engine required for a ban system. <br>
            If this test works this will be implemented as a core feature of <strong>txAdmin</strong>, as well as a
            <strong>warn</strong> and <strong>whitelist</strong> system. <br>
            We cannot guarantee neither its functionality nor the persistence of the database, that's why a ban list
            export feature is provided. <br>
            <span class="text-danger font-weight-bold">If you understand the implications of the term "experiment" and
                still want to proceed, click in the button "Enable Experiment".</span> <br>
            After enabling this experiment a server restart is required. <br>
            You can disable this anytime you want. <br>
            <a href="/experiments/bans/actions/enable" role="button" class="btn btn-outline-dark mt-3"
                onclick="alert('WARNING: YOU MUST RESTART YOUR FXSERVER FOR THIS EXPERIMENT TO WORK!')">
                Enable Experiment</a>
            {{#else}}
            This is an experiment to test the database engine required for a ban system. <br>
            We cannot guarantee neither its functionality nor the persistence of the database, that's why a ban list
            export feature is provided. <br>
            <a href="/experiments/bans/actions/disable" role="button" class="btn btn-outline-dark mt-3">
                Disable Experiment</a>
            &nbsp;
            <a href="/experiments/bans/actions/export" role="button" class="btn btn-outline-dark mt-3">
                Export Bans</a>
            {{/if}}
        </div>
    </div>
</div>


{{if(options.expEnabled)}}
<div class="row justify-content-md-center">
    <div class="col-lg-10 col-xl-4">
        <div class="card card-accent-danger">
            <div class="card-header font-weight-bold">Add Ban:</div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="frmAddBan-identifier" class="col-sm-3 col-form-label">
                        Identifier
                        <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="frmAddBan-identifier"
                            placeholder="steam:101010101010101">
                        <span class="form-text text-muted">
                            Possible identifier types: <code>steam, license, xbl, live, discord</code>
                        </span>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="frmAddBan-reason" class="col-sm-3 col-form-label">
                        Reason
                        <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="frmAddBan-reason"
                            maxlength="64" placeholder="doing bad things :(">
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button class="btn btn-sm btn-danger" type="submit" id="frmAddBan-save" {{disableWrite}}>
                        <i class="icons cui-check"></i> Add Ban
                    </button>
                </div>
            </div>

        </div>
        <div class="text-center mt-4">
            <p>
                <strong>Note:</strong> This is the most basic example of a ban system. <br>
                The real version will be better integrated and have more features.
            </p>
            <p>
                <strong>Please do not modify any file related to this experiment.</strong>
            </p>
        </div>

    </div>


    <div class="col-lg-10 col-xl-6">
        <div class="card card-accent-info">
            <div class="card-header font-weight-bold">Ban List:</div>
            <div class="card-body">

                {{if(options.log.length === 0)}}
                <li>No bans recorded.</li>
                {{#else}}
                {{log|safe}}
                {{/if}}
            </div>
        </div>
    </div>
</div>
{{/if}}


{{include("footer")/}}


{{if(options.expEnabled)}}
<script>
    $(document).ready(function () {
        $('.unban-btn').click(function(e){
            let id = $(this).data('player-identifier');
            if(!id) return;
            unban(id);
        });
    });

    function unban(id){
        if(!id) return;
        if(!window.confirm(`Are you sure you want to unban '${id}'?`)){
            return;
        }

        let data = {
            identifier: id
        }
        var notify = $.notify({ message: '<p class="text-center">Unbanning...</p>' }, {});
        $.ajax({
            type: "POST",
            url: '/experiments/bans/actions/unban',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                if(data.refresh === true){
                    window.location.reload(true);
                }else{
                    notify.update('progress', 0);
                    notify.update('type', data.type);
                    notify.update('message', data.message);
                }
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    }

    $('#frmAddBan-save').click(function () {
        let data = {
            identifier: $('#frmAddBan-identifier').val().trim(),
            reason: $('#frmAddBan-reason').val().trim(),
        }
        if (!data.identifier.length || !data.reason.length) {
            var notify = $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
            return;
        }
        if (data.reason.length < 8) {
            var notify = $.notify({ message: 'The reason must be at least 8 characters.' }, { type: 'warning' });
            return;
        }
        var notify = $.notify({ message: '<p class="text-center">Banning...</p>' }, {});

        $.ajax({
            type: "POST",
            url: '/experiments/bans/actions/ban',
            timeout: timeoutMedium,
            data: data,
            dataType: 'json',
            success: function (data) {
                if(data.refresh === true){
                    window.location.reload(true);
                }else{
                    notify.update('progress', 0);
                    notify.update('type', data.type);
                    notify.update('message', data.message);
                }
            },
            error: function (xmlhttprequest, textstatus, message) {
                notify.update('progress', 0);
                notify.update('type', 'danger');
                notify.update('message', message);
            }
        });
    });
</script>
{{/if}}
