{% extends "layout.html" %}

{% block content %}
<!-- todo: move this! -->
<style>
    .server-row {
        cursor: pointer;
    }

    .modal-content, .nav-item {
        background-color: #212529;
        color: #fff;
    }

    .modal-header, .modal-footer {
        border-color: #32383e !important;
    }

    .modal-dark button.close, a.nav-link {
        color: #fff;
    }
</style>

<div class="modal modal-dark" id="serverModalCenter" tabindex="-1" role="dialog" aria-labelledby="serverModalCenterTitle" 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="serverModalTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="h5" id="server_socket"></div>
            </div>
            <div class="modal-footer">
                <button id="connect_button" type="button" class="btn btn-dark">Connect</button>
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <nav>
            <div class="nav nav-tabs" id="server_game_tabs" role="tablist">
                {% for game in games %}
                <a class="nav-item nav-link {{'active' if loop.first else ''}}" id="{{game}}_servers_tab" data-toggle="tab" href="#{{game}}_servers" role="tab" aria-controls="{{game}}_servers" aria-selected="{{'true' if loop.first else 'false' }}">{{game}}</a>
                {% endfor %}
            </div>
        </nav>
        <div class="tab-content" id="server_game_tabs_content">
            {% for game, servers in games.items() %}

            <div class="tab-pane {{'show active' if loop.first else ''}}" id="{{game}}_servers" role="tabpanel" aria-labelledby="{{game}}_servers_tab">

                <table class="table table-dark table-striped table-hover table-responsive-lg">
                    <thead>
                        <tr>
                            <th>Server Name</th>
                            <th>Map Name</th>
                            <th>Players</th>
                            <th>Mode</th>
                            <th class="text-center">Connect</th>
                        </tr>
                    </thead>
                    <tbody>

                        {% for server in servers %}

                        <tr class="server-row" data-toggle="modal" data-target="#serverModalCenter"
                            data-ip="{{server.ip}}" data-port="{{server.port}}">
                            <td data-hostname="{{server.hostname}}" class="server-hostname">{{server.hostname}}</td>
                            <td data-map="{{server.map}} " class="server-map">{{server.map}}</td>
                            <td data-clientnum="{{server.clientnum}}" data-maxclientnum="{{server.maxclientnum}}"
                                class="server-clientnum">
                                {{server.clientnum}}/{{server.maxclientnum}}
                            </td>
                            <td data-gametype="{{server.gametype}}" class="server-gametype">{{server.gametype}}</td>
                            <td class="text-center"><span class="oi oi-play-circle"></span></td>
                        </tr>

                        {% endfor %}

                    </tbody>
                </table>
            </div>

            {% endfor %}
        </div>
        <div class="w-100 small text-right  text-muted">
            <span>Developed by RaidMax</span><br />
            <span>PRERELEASE</span>
        </div>
    </div>
</div>
    {% endblock %}

    {% block scripts %}
<script>
    $(document).ready(() => {
        $('.server-row').off('click');
        $('.server-row').on('click', function (e) {
            $('#serverModalTitle').text($(this).find('.server-hostname').text());
            $('#server_socket').text(`/connect ${$(this).data('ip')}:${$(this).data('port')}`);
        });

        $('#connect_button').off('click');
        $('#connect_button').on('click', (e) => alert('soon...'));
    });
</script>
    {% endblock %}