<!-- End Page Content -->
                    </div>
                </div>
            </main>

            <!-- Footer -->
            {{@if(it.isWebInterface)}}
                <footer class="c-footer text-center">
                    <div class="mx-auto d-md-none"> <strong>v{{it.txAdminVersion}}</strong> atop FXServer <strong>{{it.fxServerVersion}}</strong></div>
                    <div class="d-sm-down-none"> Written with ❤️ by
                        <a href="https://github.com/tabarra" class="credit-links" target="_blank">Tabarra</a> for
                        <a href="https://cfx.re" class="credit-links" target="_blank">Cfx.re</a>.
                    </div>
                    <div class="ml-auto d-sm-down-none"> <strong>v{{it.txAdminVersion}}</strong> atop FXServer <strong>{{it.fxServerVersion}}</strong></div>
                </footer>
            {{/if}}
        </div>
    </div>


<!-- Player info modal -->
<!-- FIXME: usar partials -->
<div class="modal fade" id="modPlayer" tabindex="-1" role="dialog" aria-labelledby="modPlayerTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modPlayerTitle">Loading...</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body" style="min-height: 240px;">
                <div class="text-center p-3" style="height: 100px; font-size: larger;" id="modPlayerMessage">
                    <div class="txSpinner">Loading...</div>
                </div>
                <div class="row p-0 d-none" id="modPlayerContent">

                    <div class="col-3 border-right">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="modPlayerMain-tab" data-toggle="pill" href="#modPlayerMain" role="tab" 
                                aria-controls="modPlayerMain" aria-selected="true"><i class="icon-user"></i> Info</a>
                            <a class="nav-link" id="modPlayerIDs-tab" data-toggle="pill" href="#modPlayerIDs" role="tab" 
                                aria-controls="modPlayerIDs" aria-selected="false"><i class="icon-list"></i> IDs</a>
                            <a class="nav-link" id="modPlayerHistory-tab" data-toggle="pill" href="#modPlayerHistory" role="tab" 
                                aria-controls="modPlayerHistory" aria-selected="false"><i class="icon-notebook"></i> History</a>
                            <a class="nav-link nav-link-red" id="modPlayerBan-tab" data-toggle="pill" href="#modPlayerBan" role="tab" 
                                aria-controls="modPlayerBan" aria-selected="false"><i class="icon-shield"></i> Ban</a>
                        </div>
                    </div> <!-- End Col -->

                    <div class="col-9">
                        <div class="tab-content">

                            <!-- Tab modPlayerMain -->
                            <div class="tab-pane fade show active" id="modPlayerMain" role="tabpanel" aria-labelledby="modPlayerMain-tab">
                                <h5>Player Info:</h5>
                                <strong>Session time:</strong> <span id="modPlayerMain-sessionTime">--</span> <br>
                                <strong>Play time:</strong> <span id="modPlayerMain-playTime">--</span> <br>
                                <strong>Join date:</strong> <span id="modPlayerMain-joinDate">--</span> <br>
                                <div class="form-group row m-0 mt-2">
                                    <label for="modPlayerFormNotes">
                                        <strong>Notes:</strong>
                                        <span id="modPlayerMain-notesLog" class="text-muted">
                                            --
                                        </span>
                                    </label>
                                    <textarea class="form-control" id="modPlayerMain-notes" rows="3" 
                                        placeholder="Insert notes here regarding this player."></textarea>
                                </div>
                            </div>

                            <!-- Tab modPlayerIDs -->
                            <div class="tab-pane fade" id="modPlayerIDs" role="tabpanel" aria-labelledby="modPlayerIDs-tab">
                                <h5>Player Identifiers:</h5>
                                <code id="modPlayerIDs-list">
                                    Loading...
                                </code>
                            </div>

                            <!-- Tab modPlayerHistory -->
                            <div class="tab-pane fade" id="modPlayerHistory" role="tabpanel" aria-labelledby="modPlayerHistory-tab">
                                <h5>Related History:</h5>
                                <div class="list-group list-group-accent" id="modPlayerHistory-log">
                                    loading...
                                </div>
                            </div>

                            <!-- Tab modPlayerBan -->
                            <div class="tab-pane fade" id="modPlayerBan" role="tabpanel" aria-labelledby="modPlayerBan-tab">
                                <h5>Ban Player:</h5>
                                <div class="form-group row">
                                    <label for="modPlayerBan-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="modPlayerBan-reason" maxlength="256"
                                            placeholder="doing bad things :(">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="modPlayerBan-durationSelect" class="col-sm-3 col-form-label">
                                        Duration
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="modPlayerBan-durationSelect">
                                            <option value="2 hours">2 hours</option>
                                            <option value="8 hours">8 hours</option>
                                            <option value="1 day">1 day</option>
                                            <option value="2 days" selected>2 days</option>
                                            <option value="1 week">1 week</option>
                                            <option value="2 weeks">2 weeks</option>
                                            <option value="permanent" class="font-weight-bold text-danger">permanent</option>
                                            <option value="custom" class="font-weight-bold">custom</option>
                                        </select>
                                        <div class="row mt-2">
                                            <div class="col-sm-3 pr-0">
                                                <input type="number" class="form-control" id="modPlayerBan-durationMultiplier" 
                                                    maxlength="3" placeholder="7" disabled>
                                            </div>
                                            <div class="col-sm-9 pl-2">
                                                <select class="form-control" id="modPlayerBan-durationUnit" disabled>
                                                    <option value="hours">hours</option>
                                                    <option value="days" selected>days</option>
                                                    <option value="weeks">weeks</option>
                                                    <option value="months">months</option>
                                                </select>
                                            </div>
                                        </div>
                                        <span class="form-text text-muted">
                                            <b>Note:</b> The ban will be applied to all identifiers.
                                        </span>
                                    </div>
                                </div>
            
                                <div class="text-center mt-4">
                                    <button class="btn btn-sm btn-danger" type="submit" 
                                        id="modPlayerButtons-ban" onclick="banPlayer()">
                                        <i class="icons cui-check"></i> Ban Player
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div> <!-- End Col -->

                </div> <!-- End Row -->
            </div> <!-- End Modal Body -->
            <div class="modal-footer align-items-end {{[(!it.isWebInterface), 'd-none', 'd-flex']|ternary}}">
                <button type="button" class="btn btn-outline-info mr-auto"
                    id="modPlayerButtons-search" onclick="searchPlayer()">
                    <i class="icon-info"></i> Search
                </button>
                <button type="button" class="btn btn-outline-dark"
                    id="modPlayerButtons-message" onclick="messagePlayer()">
                    <i class="icon-speech"></i> DM
                </button>
                <button type="button" class="btn btn-outline-dark"
                    id="modPlayerButtons-kick" onclick="kickPlayer()">
                    <i class="icon-ban"></i> Kick
                </button>
                <button type="button" class="btn btn-outline-warning"
                    id="modPlayerButtons-warn" onclick="warnPlayer()">
                    <i class="icon-exclamation"></i> Warn
                </button>
            </div>
        </div>
    </div>
</div>



<!-- Change password modal -->
<div class="modal fade" id="modChangePassword" tabindex="-1" role="dialog" aria-labelledby="modChangePassword-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modChangePassword-title">Change your password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center" id="modChangePassword-body">
                <div class="form-group row">
                    {{@if(it.isTempPassword)}}
                        <script>const isTempPassword = true;</script>
                        <div class="col-sm-8 mx-auto">
                            <h5 class="text-danger mx-auto">Your account has a temporary password that needs to be changed.</h5>
                        </div>
                    {{#else}}
                        <div class="col-sm-8 mx-auto">
                            <label for="modChangePassword-oldPassword" class="col-sm-12 col-form-label">
                                Enter your <b>current</b> password
                            </label>
                            <div class="input-group">
                                <input type="password" autocomplete="new-password" class="form-control text-center"
                                    id="modChangePassword-oldPassword" maxlength="64">
                            </div>
                        </div>
                        <div class="col-sm-12" style="margin-top: 1.75em;"></div>
                    {{/if}}


                    <div class="col-sm-8 mx-auto">
                        <label for="modChangePassword-newPassword" class="col-sm-12 col-form-label">
                            Enter a <b>new</b> password
                        </label>
                        <div class="input-group">
                            <input type="password" autocomplete="new-password" class="form-control text-center"
                                id="modChangePassword-newPassword" maxlength="24">
                        </div>
                    </div>
                    <div class="col-sm-8 mx-auto">
                        <label for="modChangePassword-confirmPassword" class="col-sm-12 col-form-label">
                            Confirm your <b>new</b> password
                        </label>
                        <div class="input-group">
                            <input type="password" autocomplete="new-password" class="form-control text-center"
                                id="modChangePassword-confirmPassword">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <span class="form-text text-muted text-center">
                            The new password has to be between 6 and 24 characters.
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-center">
                <div class="mx-auto">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="modChangePassword-save">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>


    <!-- CoreUI and necessary plugins-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" 
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://unpkg.com/@popperjs/core@2.6.0/dist/umd/popper.min.js"></script>
    <script src="{{it.resourcePath}}js/coreui.bundle.min.js"></script>
    <script src="{{it.resourcePath}}js/bootstrap-notify.min.js"></script>
    <script src="{{it.resourcePath}}js/jquery-confirm.min.js"></script>
    <script src="{{it.resourcePath}}js/txadmin/base.js"></script>
    <script src="{{it.resourcePath}}js/txadmin/main.js"></script>
    <script src="{{it.resourcePath}}js/txadmin/players.js"></script>
</body>
</html>
