<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            http-equiv="Content-Type"
            contentType="text/html; charset=UTF-8"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>OpenFusion: Server Selector</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css" />
        <link rel="stylesheet" href="assets/css/openfusion.css" />
        <link rel="stylesheet" href="assets/css/styles.css" />
    </head>

    <body onresize="onResize()">
        <section id="of-serverselector">
            <div class="container" id="serverselector-container">
                <div class="row text-center mt-3" id="of-logoheader">
                    <div class="col">
                        <img
                            class="img-fluid"
                            id="of-logo"
                            src="assets/img/of-3.png"
                            width="256"
                        />
                        <p id="of-intro-text">
                            Welcome to OpenFusion.<br />Select a server from the
                            list below to get started.
                        </p>
                    </div>
                </div>
                <div
                    class="row d-sm-flex d-xl-flex justify-content-center justify-content-sm-center justify-content-xl-center"
                    id="of-serverlist"
                >
                    <div class="col-8 mb-2">
                        <div
                            class="table-responsive text-center border rounded border-primary"
                            id="server-table"
                        >
                            <table class="table table-striped table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>Description</th>
                                        <th>Game Version</th>
                                    </tr>
                                </thead>
                                <tbody id="server-tablebody">
                                    <tr id="server-listing-placeholder">
                                        <td colspan="2">
                                            No servers added yet... perhaps you
                                            should find one?
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div
                    class="row row-cols-2 d-xl-flex justify-content-center justify-content-xl-center"
                    id="of-serverbuttons"
                    style="padding-bottom: 16px"
                >
                    <div
                        class="col-4 text-left d-inline-flex justify-content-xl-start"
                    >
                        <button
                            class="btn btn-success mr-1"
                            data-toggle="modal"
                            data-bs-tooltip=""
                            data-placement="bottom"
                            id="of-addserver-button"
                            type="button"
                            title="Add Server"
                            data-target="#of-addservermodal"
                            onclick="deselectServer()"
                        >
                            <i class="fas fa-plus"></i>
                        </button>
                        <button
                            class="btn btn-primary mr-1 disabled"
                            data-toggle="modal"
                            data-bs-tooltip=""
                            data-placement="bottom"
                            id="of-editserver-button"
                            type="button"
                            title="Edit Server"
                            data-target="#of-editservermodal"
                            disabled=""
                        >
                            <i class="fas fa-edit"></i>
                        </button>
                        <button
                            class="btn btn-danger mr-1 disabled"
                            data-toggle="modal"
                            data-bs-tooltip=""
                            data-placement="bottom"
                            id="of-deleteserver-button"
                            type="button"
                            title="Delete Server"
                            data-target="#of-deleteservermodal"
                            disabled=""
                        >
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                    <div class="col-4 d-inline-flex justify-content-end">
                        <button
                            class="btn btn-primary mr-1"
                            data-toggle="modal"
                            data-bs-tooltip=""
                            data-placement="bottom"
                            id="of-editcache-button"
                            type="button"
                            title="Edit Cache Storage"
                            data-target="#of-editcacheconfigmodal"
                        >
                            <i class="fas fa-cog"></i>
                        </button>
                        <button
                            class="btn btn-primary disabled"
                            id="of-connect-button"
                            type="button"
                            onclick="connectToServer()"
                            disabled=""
                        >
                            Connect&nbsp;<i
                                class="fas fa-angle-double-right"
                            ></i>
                        </button>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                tabindex="-1"
                id="of-aboutmodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">About OpenFusionClient</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p
                                id="of-aboutversionnumber"
                                class="text-monospace"
                            >
                                APP_VERSION_NUMBER
                            </p>
                            <p>
                                ©2020-2024 OpenFusion Contributors<br />OpenFusion
                                is licensed under MIT.<br />
                            </p>
                            <a
                                href="#of-restoreserversmodal"
                                onclick="$('#of-aboutmodal').modal('toggle')"
                                data-toggle="modal"
                                data-target="#of-restoreserversmodal"
                                >Reset to Default Servers</a
                            >
                        </div>
                        <div class="modal-footer">
                            <div class="row flex-fill">
                                <div class="col">
                                    <button
                                        class="btn btn-primary border rounded border-primary pb-1 pt-1 mr-2 pl-2 pr-2"
                                        data-toggle="tooltip"
                                        data-bs-tooltip=""
                                        type="button"
                                        title="Github Page"
                                        onclick="window.open(&#39;https://github.com/OpenFusionProject/OpenFusion&#39;,&#39;_blank&#39;);"
                                    >
                                        <i
                                            class="fab fa-github"
                                            style="font-size: 24px"
                                        ></i></button
                                    ><button
                                        class="btn btn-primary border rounded border-primary pb-1 pt-1 pl-2 pr-2"
                                        data-toggle="tooltip"
                                        data-bs-tooltip=""
                                        type="button"
                                        title="Discord Chat"
                                        onclick="window.open(&#39;https://discord.gg/DYavckB&#39;,&#39;_blank&#39;);"
                                    >
                                        <i
                                            class="fab fa-discord"
                                            style="
                                                font-size: 24px;
                                                position: relative;
                                                top: 1px;
                                            "
                                        ></i>
                                    </button>
                                </div>
                                <div class="col text-right">
                                    <button
                                        class="btn btn-primary border rounded border-primary"
                                        type="button"
                                        data-dismiss="modal"
                                    >
                                        Close
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                tabindex="-1"
                id="of-addservermodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add Server</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="addserver-form" class="needs-validation">
                                <label for="addserver-descinput"
                                    >Server Description</label
                                ><input
                                    class="form-control form-row w-75"
                                    type="text"
                                    id="addserver-descinput"
                                    placeholder="My OpenFusion Server"
                                    required=""
                                    minlength="1"
                                    maxlength="70"
                                /><label for="addserver-ipinput"
                                    >Server IP</label
                                ><input
                                    class="form-control form-row w-75"
                                    type="text"
                                    id="addserver-ipinput"
                                    placeholder="127.0.0.1:23000"
                                    required=""
                                    pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
                                /><label for="addserver-versionselect"
                                    >Game Version:&nbsp;</label
                                ><select
                                    class="form-control w-50"
                                    id="addserver-versionselect"
                                    required=""
                                    style="margin-left: -5px"
                                ></select>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button
                                class="btn btn-primary border rounded border-primary btn-danger border-danger"
                                id="addserver-cancel"
                                type="button"
                                data-dismiss="modal"
                            >
                                Cancel</button
                            ><button
                                class="btn btn-primary border rounded border-primary btn-success border-success"
                                id="addserver-savebutton"
                                type="submit"
                                data-dismiss="modal"
                                form="addserver-form"
                                onclick="addServer();"
                            >
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                tabindex="-1"
                id="of-editservermodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Edit Server</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="editserver-form" class="needs-validation">
                                <label for="editserver-descinput"
                                    >Server Description</label
                                ><input
                                    class="form-control form-row w-75"
                                    type="text"
                                    id="editserver-descinput"
                                    placeholder="My OpenFusion Server"
                                    required=""
                                    minlength="1"
                                    maxlength="70"
                                /><label for="addserver-ipinput"
                                    >Server IP</label
                                ><input
                                    class="form-control form-row w-75"
                                    type="text"
                                    id="editserver-ipinput"
                                    placeholder="127.0.0.1:23000"
                                    required=""
                                    pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"
                                /><label for="editserver-versionselect"
                                    >Game Version:&nbsp;</label
                                ><select
                                    class="form-control w-50"
                                    id="editserver-versionselect"
                                    required=""
                                    style="margin-left: -5px"
                                ></select>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button
                                class="btn btn-primary border rounded border-primary btn-danger border-danger"
                                id="editserver-cancel"
                                type="button"
                                data-dismiss="modal"
                            >
                                Cancel</button
                            ><button
                                class="btn btn-primary border rounded border-primary btn-success border-success"
                                id="addserver-savebutton"
                                type="submit"
                                data-dismiss="modal"
                                form="editserver-form"
                                onclick="editServer();"
                            >
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                tabindex="-1"
                id="of-deleteservermodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Are you sure?</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p class="lead">
                                Do you really want to delete<br />"<a
                                    id="deleteserver-servername"
                                    >SERVER_NAME</a
                                >"?<br /><br />You could always re-add it later.
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button
                                class="btn btn-primary border rounded border-primary"
                                type="button"
                                data-dismiss="modal"
                            >
                                Cancel</button
                            ><button
                                class="btn btn-primary border rounded border-primary btn-danger border-danger"
                                id="deleteserver-button"
                                type="button"
                                data-dismiss="modal"
                                onclick="deleteServer();"
                            >
                                Yes, Delete
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                tabindex="-1"
                id="of-restoreserversmodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Are you sure?</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p class="lead">
                                Do you really want to restore the default
                                servers?
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button
                                class="btn btn-primary border rounded border-primary"
                                type="button"
                                data-dismiss="modal"
                            >
                                Cancel</button
                            ><button
                                class="btn btn-primary border rounded border-primary btn-danger border-danger"
                                id="deleteserver-button"
                                type="button"
                                data-dismiss="modal"
                                onclick="restoreDefaultServers();"
                            >
                                Yes, Restore
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="modal fade"
                role="dialog"
                id="of-editcacheconfigmodal"
            >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Edit Cache Config</h4>
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div
                                class="table-responsive text-center border rounded border-primary"
                                id="cache-table"
                            >
                                <table class="table table-striped table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Game Version</th>
                                            <th>Game Cache</th>
                                            <th>Offline Cache</th>
                                        </tr>
                                    </thead>
                                    <tbody id="cache-tablebody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="of-versionnumberdiv">
                <a
                    id="of-versionnumber"
                    class="text-monospace text-secondary"
                    href="#of-aboutmodal"
                    data-toggle="modal"
                    data-target="#of-aboutmodal"
                    >v0</a
                >
            </div>
        </section>
        <section>
            <div id="client"></div>
        </section>
        <script
            src="assets/js/jquery.min.js"
            onload="window.$ = window.jQuery = module.exports;"
        ></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/bs-init.js"></script>
        <script src="assets/js/uuidv4.min.js"></script>
        <script src="assets/js/server-selector.js"></script>
        <script src="assets/js/game-client.js"></script>
        <script src="assets/js/snowflakes.min.js"></script>
        <script src="assets/js/easter-eggs.js"></script>
    </body>
</html>