<%- await include('basic/header.html', locals) %>


<div class="text-center mb-4">
    <h2>Settings</h2>
</div>


<div class="row justify-content-md-center">
    <div class="col-md-7 mw-col8">

        <!-- Settings Card -->
        <div class="card card-accent-danger">
            <div class="card-header font-weight-bold" style="border-bottom: 0px;">
                <ul class="nav nav-tabs card-header-tabs" id="tabSelector">
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'global' ? 'active' : '' %>" id="nav-global-tab" data-toggle="tab" href="#nav-global"
                            role="tab" aria-controls="nav-global" aria-selected="true">Global</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'fxserver' ? 'active' : '' %>" id="nav-fxserver-tab" data-toggle="tab" href="#nav-fxserver"
                            role="tab" aria-controls="nav-fxserver" aria-selected="true">FXServer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'monitor' ? 'active' : '' %>" id="nav-monitor-tab" data-toggle="tab" href="#nav-monitor"
                            role="tab" aria-controls="nav-monitor" aria-selected="true">Restarter</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'playerManager' ? 'active' : '' %>" id="nav-playerManager-tab" data-toggle="tab" href="#nav-playerManager"
                            role="tab" aria-controls="nav-playerManager" aria-selected="true">Player Manager</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'discord' ? 'active' : '' %>" id="nav-discord-tab" data-toggle="tab" href="#nav-discord"
                            role="tab" aria-controls="nav-discord" aria-selected="true">Discord</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-item nav-link <%= activeTab === 'menu' ? 'active' : '' %>" id="nav-menu-tab" data-toggle="tab" href="#nav-menu" role="tab" aria-controls="nav-menu" aria-selected="true">Menu</a>
                    </li>
                </ul>
            </div>

            <div class="card-body settings-card">
                <div class="tab-content" id="nav-tabContent">

                    <!-- Global Tab -->
                    <div class="tab-pane fade <%= activeTab === 'global' ? 'active show' : '' %>" id="nav-global" role="tabpanel"
                        aria-labelledby="nav-global-tab">
                        <div class="form-group row">
                            <label for="frmGlobal-serverName" class="col-sm-3 col-form-label">
                                Server Name
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmGlobal-serverName"
                                    value="<%= (global.serverName !== 'undefined') ? global.serverName : '' %>" maxlength="24" placeholder="server name" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                   A <strong>short</strong> server name to be used in txAdmin interface and Chat/Discord messages.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmGlobal-language" class="col-sm-3 col-form-label">
                                Language
                            </label>
                            <div class="col-sm-9">
                                <select class="form-control" id="frmGlobal-language" <%= readOnly ? 'disabled' : '' %>>
                                    <option value="en" <%= global.language === 'en' ? 'selected' : '' %>>English (default)</option>

                                    <option value="ar" <%= global.language === 'ar' ? 'selected' : '' %>>Arabic</option>
                                    <option value="bs" <%= global.language === 'bs' ? 'selected' : '' %>>Bosnian</option>
                                    <option value="cs" <%= global.language === 'cs' ? 'selected' : '' %>>Czech</option>
                                    <option value="da" <%= global.language === 'da' ? 'selected' : '' %>>Danish</option>
                                    <option value="de" <%= global.language === 'de' ? 'selected' : '' %>>German</option>
                                    <option value="el" <%= global.language === 'el' ? 'selected' : '' %>>Greek</option>
                                    <option value="es" <%= global.language === 'es' ? 'selected' : '' %>>Spanish</option>
                                    <option value="et" <%= global.language === 'et' ? 'selected' : '' %>>Estonian</option>
                                    <option value="fa" <%= global.language === 'fa' ? 'selected' : '' %>>Farsi - Persian</option>
                                    <option value="fi" <%= global.language === 'fi' ? 'selected' : '' %>>Finnish</option>
                                    <option value="fr" <%= global.language === 'fr' ? 'selected' : '' %>>French</option>
                                    <option value="hu" <%= global.language === 'hu' ? 'selected' : '' %>>Hungarian</option>
                                    <option value="it" <%= global.language === 'it' ? 'selected' : '' %>>Italian</option>
                                    <option value="lt" <%= global.language === 'lt' ? 'selected' : '' %>>Lithuanian</option>
                                    <option value="lv" <%= global.language === 'lv' ? 'selected' : '' %>>Latvian</option>
                                    <option value="nl" <%= global.language === 'nl' ? 'selected' : '' %>>Dutch</option>
                                    <option value="no" <%= global.language === 'no' ? 'selected' : '' %>>Norwegian</option>
                                    <option value="pl" <%= global.language === 'pl' ? 'selected' : '' %>>Polish</option>
                                    <option value="pt" <%= global.language === 'pt' ? 'selected' : '' %>>Portuguese</option>
                                    <option value="ro" <%= global.language === 'ro' ? 'selected' : '' %>>Romanian</option>
                                    <option value="ru" <%= global.language === 'ru' ? 'selected' : '' %>>Russian</option>
                                    <option value="sl" <%= global.language === 'sl' ? 'selected' : '' %>>Slovenian</option>
                                    <option value="sv" <%= global.language === 'sv' ? 'selected' : '' %>>Swedish</option>
                                    <option value="th" <%= global.language === 'th' ? 'selected' : '' %>>Thai</option>
                                    <option value="tr" <%= global.language === 'tr' ? 'selected' : '' %>>Turkish</option>
                                    <option value="zh" <%= global.language === 'zh' ? 'selected' : '' %>>Chinese</option>

                                    <option value="custom" <%= global.language === 'custom' ? 'selected' : '' %>>Custom (txData/locale.json)</option>
                                </select>
                                <span class="form-text text-muted">
                                    The language to use on Chat/Discord messages. <br>
                                    <b>Note:</b> For the Custom option, read the <a href="https://github.com/tabarra/txAdmin/blob/master/docs/translation.md" target="_blank" rel="noopener noreferrer">documentation</a>.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmGlobal-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save Global Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Global Tab -->

                    <!-- FXServer Tab -->
                    <div class="tab-pane fade <%= activeTab === 'fxServer' ? 'active show' : '' %>" id="nav-fxserver" role="tabpanel" aria-labelledby="nav-fxserver-tab">
                        <div class="form-group row">
                            <label for="frmFXServer-serverDataPath" class="col-sm-3 col-form-label">Server Data Folder
                                <span class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmFXServer-serverDataPath" value="<%= fxserver.serverDataPath || '' %>"
                                    placeholder="C:/Users/Admin/Desktop/server01" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The folder that <strong>contains</strong> the <code>resources</code> and
                                    <code>cache</code> folders, usually it's where you put your <code>server.cfg</code>. <br>
                                    <% if (isZapHosting) { %>
                                        <span class="font-weight-bold">ZAP-Hosting warning: this path must start with <code><%= txDataPath %></code>.</span>
                                    <% } %>
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-cfgPath" class="col-sm-3 col-form-label">CFG File Path
                                <span class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmFXServer-cfgPath" value="<%= fxserver.cfgPath || '' %>"
                                    placeholder="C:/Users/Admin/Desktop/server01/server.cfg" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The path to your server config file, usually named <code>server.cfg</code>. <br>
                                    This can either be absolute, or relative to the Server Data folder.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-commandLine" class="col-sm-3 col-form-label">
                                Additional Arguments
                            </label>
                            <div class="col-sm-9">
                                <textarea id="frmFXServer-commandLine" rows="1" class="form-control expandable-textarea" placeholder="+set sv_enforceGameBuild 2545" <%= readOnly ? 'disabled' : '' %>><%= fxserver.commandLine || '' %></textarea>
                                <span class="form-text text-muted">
                                    Additional command-line arguments to pass to the FXServer instance. <br>
                                    For example, you can add <code>+set</code> and <code>+exec</code> commands. <br>
                                    <b>Note:</b> These commands can be set inside the <code>server.cfg</code> as well.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmFXServer-onesync" class="col-sm-3 col-form-label">OneSync</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="frmFXServer-onesync" <%= readOnly ? 'disabled' : '' %>>
                                    <option value="off" <%= fxserver.onesync === 'off' ? 'selected' : '' %>>Off (default)</option>
                                    <option value="legacy" <%= fxserver.onesync === 'legacy' ? 'selected' : '' %>>Legacy (without infinity)</option>
                                    <option value="on" <%= fxserver.onesync === 'on' ? 'selected' : '' %>>On (with infinity)</option>
                                </select>
                                <span class="form-text text-muted">
                                    Required if your server has more than 48 slots. <br>
                                    <b>Note:</b> Setting to <code>on</code> will override <code>onesync_enableInfinity</code> if set as an Additional Argument above. <br>
                                    <b>Note:</b> Setting onesync in your <code>server.cfg</code> will override this configuration.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Autostart</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmFXServer-autostart"
                                        <%= fxserver.autostart || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Start the server automatically after <strong>txAdmin</strong> starts.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Quiet Mode</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmFXServer-quiet"
                                        <%= fxserver.quiet || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Do not print FXServer's output to the terminal. <br>
                                    You will still be able to use the Live Console.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmFXServer-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save FXServer Settings
                            </button>
                        </div>
                    </div>
                    <!-- /FXServer Tab -->

                    <!-- Restarter Tab -->
                    <div class="tab-pane fade <%= activeTab === 'monitor' ? 'active show' : '' %>" id="nav-monitor" role="tabpanel" aria-labelledby="nav-monitor-tab">
                        <div class="form-group row">
                            <label for="frmMonitor-restarterSchedule" class="col-sm-3 col-form-label">Scheduled Restarts</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmMonitor-restarterSchedule" value="<%= monitor.restarterSchedule || '' %>"
                                    placeholder="05:00, 13:00" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-danger" id="frmMonitor-timezoneAlert"></span>
                                <span class="form-text text-muted">
                                    At which times of day to restart the server. Leave it blank to disable this feature. <br>
                                    The time MUST be in the 24-hour format with two digits for hours as well as
                                    minutes (<code>HH:MM</code>) and the times should be separated by commas. <br>
                                    <strong>Note:</strong> Make sure your schedule matches your server time and not your local time.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">
                                Disable Chat Warnings
                            </label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmMonitor-chatMessages"
                                        <%= monitor.disableChatWarnings || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Check this if you want to disable broadcast chat warning messages in game before each scheduled restart.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmMonitor-restarterScheduleWarnings" class="col-sm-3 col-form-label">Restart Warnings</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmMonitor-restarterScheduleWarnings" value="<%= monitor.restarterScheduleWarnings || '' %>"
                                    placeholder="30, 15, 10, 5, 4, 3, 2, 1" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    Minutes before restarts to trigger chat warnings <br>
                                    All the minutes must be between 1 and 360 minutes and be separated by commas. <br>
                                    <strong>Note:</strong> This will also trigger the server event <code>txAdmin:events:scheduledRestart</code> <a href="https://github.com/tabarra/txAdmin/blob/master/docs/events.md" target="_blank" rel="noopener noreferrer">(docs)</a>
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmMonitor-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save Monitor/Restarter Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Restarter Tab -->
                    
                    <!-- Player Manager Tab -->
                    <div class="tab-pane fade <%= activeTab === 'playerManager' ? 'active show' : '' %>" id="nav-playerManager" role="tabpanel" aria-labelledby="nav-playerManager-tab">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">
                                Enable Banlist
                            </label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmPlayerManager-onJoinCheckBan"
                                        <%= playerController.onJoinCheckBan || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Enable checking for <strong>Ban</strong> status on player join. <br>
                                    Bans will not work if this option is disabled.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">
                                Enable Whitelist
                            </label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmPlayerManager-onJoinCheckWhitelist"
                                        <%= playerController.onJoinCheckWhitelist || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Enable checking for <strong>Whitelist</strong> status on player join. <br>
                                    Whitelists will not work if this option is disabled.
                                </span>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="frmPlayerManager-minSessionTime" class="col-sm-3 col-form-label">
                                Minimum <br>
                                Session Time
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" id="frmPlayerManager-minSessionTime"
                                    value="<%= playerController.minSessionTime || '' %>" placeholder="15" min="1" max="60" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The minimum amount of minutes a player needs to be in the server before it gets saved to the database. <br>
                                    This is done to prevent the database from getting too big. <br>
                                    This number must be between <code>1</code> and <code>60</code> minutes.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmPlayerManager-whitelistRejectionMessage" class="col-sm-3 col-form-label">
                                Whitelist <br>Rejection Message
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <textarea id="frmPlayerManager-whitelistRejectionMessage" rows="3" class="form-control expandable-textarea" placeholder="You are not yet whitelisted in this server.&#10;Please join http://discord.gg/example.&#10;Your Request ID: <id>" <%= readOnly ? 'disabled' : '' %>><%= playerController.whitelistRejectionMessage || '' %></textarea>
                                <span class="form-text text-muted">
                                    The message that will be returned to the player if he is not whitelisted. <br>
                                    Use <code>&lt;id&gt;&#10;</code> as a placeholder for the whitelist request ID.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">
                                Wipe Pending Whitelist <br>
                                On txAdmin Start
                            </label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmPlayerManager-wipePendingWLOnStart"
                                        <%= playerController.wipePendingWLOnStart || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    When enabled, the pending whitelist will be wiped every time txAdmin starts <br>
                                    This is done to prevent the database from getting too big.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmPlayerManager-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save Player Manager Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Player Manager Tab -->

                    <!-- Discord Tab -->
                    <div class="tab-pane fade <%= activeTab === 'discord' ? 'active show' : '' %>" id="nav-discord" role="tabpanel" aria-labelledby="nav-discord-tab">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Enable Bot</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmDiscord-enabled"
                                        <%= discord.enabled || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Enable Discord Integration.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-token" class="col-sm-3 col-form-label">Token <span
                                    class="text-danger">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control blur-input" id="frmDiscord-token" 
                                    value="<%= readOnly ? '[redacted]' : (discord.token || '') %>"
                                    placeholder="CXPcWbxKOHpwlUBaYKznIfkz.ExpTAB.NX-3YxfmVIGUJLGbPamViXGAEiY"
                                    maxlength="96" autocomplete="off" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    To get a token and the bot to join your server, follow these two guides:
                                    <a href="https://discordjs.guide/preparations/setting-up-a-bot-application.html"
                                        target="_blank" rel="noopener noreferrer">Setting up a bot application</a> and
                                    <a href="https://discordjs.guide/preparations/adding-your-bot-to-servers.html"
                                        target="_blank" rel="noopener noreferrer">Adding your bot to servers</a>.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-announceChannel" class="col-sm-3 col-form-label">Announcements <br>Channel ID</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" id="frmDiscord-announceChannel"
                                    value="<%= discord.announceChannel || '' %>" 
                                    placeholder="578045190955335691" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The ID of the channel to send Announcements (eg server restarts). <br>
                                    Leave it blank to disable this feature. <br>
                                    To get the channel ID, go to Discord's settings and
                                    <a href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png"
                                    target="_blank" > enable developer mode</a>, then right-click on the channel name and select "Copy ID".
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-prefix" class="col-sm-3 col-form-label">
                                Command Prefix
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmDiscord-prefix" value="<%= discord.prefix || '' %>"
                                    placeholder="/" maxlength="1" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The prefix for all commands.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmDiscord-statusMessage" class="col-sm-3 col-form-label">
                                Status Command Message
                                <span class="text-danger">*</span>
                            </label>
                            <div class="col-sm-9">
                                <textarea id="frmDiscord-statusMessage" rows="3" class="form-control expandable-textarea" placeholder="**Join:** `connect cfx.re/join/xxxxxx`&#10;**Players:** &lt;players&gt;&#10;**Uptime:** &lt;uptime&gt;" <%= readOnly ? 'disabled' : '' %>><%= discord.statusMessage || '' %></textarea>
                                <span class="form-text text-muted">
                                    The response to the <code>/status</code> command. <br>
                                    Supported placeholders: <code>players</code>, <code>port</code>, <code>uptime</code>.
                                </span>
                            </div>
                        </div>


                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmDiscord-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save Discord Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Discord Tab -->

                    <!-- Menu Tab -->
                    <div class="tab-pane fade <%= activeTab === 'menu' ? 'active show' : '' %>" id="nav-menu" role="tabpanel" aria-labelledby="nav-menu-tab">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Enable Menu</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmMenu-enabled"
                                        <%= global.menuEnabled || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    When enabled, admins will be able to open the menu by typing <code>/tx</code> or using the keybind configured in the FiveM settings.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Align Right</label>
                            <div class="col-sm-9">
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success fix-pill-form">
                                    <input class="c-switch-input" type="checkbox" id="frmMenu-alignRight"
                                        <%= global.menuAlignRight || '' %> <%= readOnly ? 'disabled' : '' %>>
                                    <span class="c-switch-slider" data-checked="Yes" data-unchecked="No"></span>
                                </label>
                                <span class="form-text text-muted">
                                    Move menu to the right side of the screen.
                                </span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="frmMenu-pageKey" class="col-sm-3 col-form-label">Page Switch Key</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="frmMenu-pageKey"
                                    value="<%= global.menuPageKey || '' %>"
                                    placeholder="578045190955335691" <%= readOnly ? 'disabled' : '' %>>
                                <span class="form-text text-muted">
                                    The key used to to switch tabs in the menu. <br>
                                    Click above and press any key to change the configuration. <br>
                                    <strong>Note:</strong> The default is <code>Tab</code>, and you cannot use <code>Escape</code> or <code>Backspace</code>.
                                </span>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-sm btn-primary" type="submit" id="frmMenu-save" <%= readOnly ? 'disabled' : '' %>>
                                <i class="icon-check"></i> Save Menu Settings
                            </button>
                        </div>
                    </div>
                    <!-- /Menu Tab -->

                </div>
            </div>


        </div>

    </div>
</div>


<%- await include('basic/footer.html', locals) %>


<script>
    //============================================== General
    const serverTimezone = "<%= serverTimezone %>";
    const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    if(serverTimezone !== browserTimezone){
        const msg = `Server's timezone: <b>${serverTimezone}</b> <br>
            Your timezone: <b>${browserTimezone}</b> <br>
            Make sure to adjust the times to match your expectations.`;
        $('#frmMonitor-timezoneAlert').html(msg);
    }


    const resizeTextArea = (el) => {
        el.style.height = "auto";
        el.style.height = `${el.scrollHeight+2}px`;
    }

    const expandables = document.getElementsByClassName('expandable-textarea');
    for (const el of expandables) {
        el.onkeyup = (ev) =>{
            resizeTextArea(el);
        }
        el.onfocus = (ev) =>{
            resizeTextArea(el);
        }
    }

    const tabChangers = document.querySelectorAll('#tabSelector > li > a');
    for (const el of tabChangers) {
        el.onclick = (ev) => {
            setTimeout(() => {
                const visibleExpandables = document.querySelectorAll('#nav-tabContent .show .expandable-textarea');
                for (const el of visibleExpandables) {
                    resizeTextArea(el);
                }
            }, 500);
        }
    }

    //============================================== Global Settings
    $('#frmGlobal-save').click(function () {
        let data = {
            serverName: $('#frmGlobal-serverName').val().trim(),
            language: $('#frmGlobal-language').val(),
        }
        if (!data.serverName.length) {
            return $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
        }
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/global',
            data: data,
            dataType: 'json',
            success: function (data) {
                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);
            }
        });
    });


    //============================================== FXServer Settings
    $('#frmFXServer-save').click(function () {
        let data = {
            serverDataPath: $('#frmFXServer-serverDataPath').val().trim(),
            cfgPath: $('#frmFXServer-cfgPath').val().trim(),
            commandLine: $('#frmFXServer-commandLine').val().trim(),
            onesync: $('#frmFXServer-onesync').val(),
            autostart: $('#frmFXServer-autostart').is(':checked'),
            quiet: $('#frmFXServer-quiet').is(':checked')
        }
        if (!data.serverDataPath.length || !data.cfgPath.length) {
            return $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
        }
        if (data.commandLine.includes(' onesync ')){
            return $.notify({ message: 'You cannot set onesync in Additional Arguments. Please use the selectbox below it.' }, { type: 'warning' });
        }
        //Removing menu beta convar (v4.9)
        data.commandLine = data.commandLine.replace(/\+?setr? txEnableMenuBeta true\s?/gi, '');
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/fxserver',
            data: data,
            dataType: 'json',
            success: function (data) {
                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);
            }
        });
    });


    //============================================== Player Manager Settings
    $('#frmPlayerManager-save').click(function () {
        let data = {
            onJoinCheckBan: $('#frmPlayerManager-onJoinCheckBan').is(':checked'),
            onJoinCheckWhitelist: $('#frmPlayerManager-onJoinCheckWhitelist').is(':checked'),
            minSessionTime: $('#frmPlayerManager-minSessionTime').val().trim(),
            whitelistRejectionMessage: $('#frmPlayerManager-whitelistRejectionMessage').val().trim(),
            wipePendingWLOnStart: $('#frmPlayerManager-wipePendingWLOnStart').is(':checked'),
        }
        if (!data.minSessionTime.length || !data.whitelistRejectionMessage.length) {
            return $.notify({ message: 'The fields with "*" are required.' }, { type: 'warning' });
        }
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/playerController',
            data: data,
            dataType: 'json',
            success: function (data) {
                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);
            }
        });
    });


    //============================================== Monitor Settings
    $('#frmMonitor-save').click(function () {
        let data = {
            restarterSchedule: $('#frmMonitor-restarterSchedule').val().trim(),
            restarterScheduleWarnings: $('#frmMonitor-restarterScheduleWarnings').val().trim(),
            disableChatWarnings: ($('#frmMonitor-chatMessages').is(':checked') === true),
        }
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/monitor',
            data: data,
            dataType: 'json',
            success: function (data) {
                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);
            }
        });
    });


    //============================================== Discord Settings
    $('#frmDiscord-save').click(function () {
        let data = {
            enabled: ($('#frmDiscord-enabled').is(':checked') === true),
            token: $('#frmDiscord-token').val().trim(),
            announceChannel: $('#frmDiscord-announceChannel').val().trim(),
            prefix: $('#frmDiscord-prefix').val().trim(),
            statusMessage: $('#frmDiscord-statusMessage').val().trim(),
        };
        if (data.enabled && (!data.token.length || !data.prefix.length || !data.statusMessage.length)) {
            return $.notify({ message: 'The fields with "*" are required when the bot is enabled.' }, { type: 'warning' });
        }
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/discord',
            data: data,
            dataType: 'json',
            success: function (data) {
                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);
            }
        });
    });


    //============================================== Menu Settings
    const pageKeyEl = document.getElementById('frmMenu-pageKey');
    pageKeyEl.onkeydown = (e) => {
        if (!e.metaKey) e.preventDefault();

        if(["Escape", "Backspace"].includes(e.code)){
            pageKeyEl.value = 'Tab';
        }else{
            pageKeyEl.value = e.code;
        }
    }

    $('#frmMenu-save').click(function () {
        let data = {
            menuEnabled: ($('#frmMenu-enabled').is(':checked') === true),
            menuAlignRight: ($('#frmMenu-alignRight').is(':checked') === true),
            menuPageKey: $('#frmMenu-pageKey').val().trim()
        };
        const notify = $.notify({ message: '<p class="text-center">Saving...</p>' }, {});

        txAdminAPI({
            type: "POST",
            url: '/settings/save/menu',
            data: data,
            dataType: 'json',
            success: function (data) {
                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>
