{% extends 'Application/' ~ settings.get("theme") ~ '/base.html.twig' %}

{% block title %}{{ 'Lista graczy'|trans }}{% endblock %}

{% block body %}
<section class="frame card reveal in" id="players">
    <div class="head">
        <div>
            <h2>{{ 'Lista graczy'|trans }}</h2>
            <p>{{ 'Aktualna lista postaci na serwerze.'|trans }}</p>
        </div>
    </div>

    {% if serveur_statut is defined and serveur_statut == false %}
        <div class="p-3">
            <div class="alert alert-warning text-dark mb-0">
                {{ "Serwer jest offline, lista graczy jest tymczasowo wyłączona."|trans }}
            </div>
        </div>
    {% else %}
        <div class="playersTableWrap">
            <div class="table-responsive">
                <table id="players-table" class="table players-table text-center align-middle mb-0">
                    <thead>
                        <tr>
                            <th>{{ 'Nazwa'|trans }}</th>
                            <th>{{ 'Poziom'|trans }}</th>
                            <th>{{ 'PD'|trans }}</th>
                            <th>{{ 'gildia'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for player in players %}
                            <tr>
                                <td>{{ player.name }}</td>
                                <td>{{ player.level }}</td>
                                <td>
                                    {% if player.level == settings.get("max_level") %}
                                        <strong>{{ 'Maksymalny poziom osiągnięty!'|trans }}</strong>
                                    {% else %}
                                        <b>{{ player.exp }}</b>
                                    {% endif %}
                                </td>
                                <td>{{ player.guild_name }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
</section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            if (!$.fn.DataTable.isDataTable('#players-table')) {
                $('#players-table').DataTable({
                    language: {
                        search: "Szukaj gracza:",
                        zeroRecords: "Nie znaleziono pasujących graczy",
                        emptyTable: "Brak danych w tabeli",
                        info: "",
                        infoEmpty: "",
                        infoFiltered: ""
                    },
                    paging: false,
                    info: false,
                    ordering: true,
                    responsive: true,
                    order: [[1, 'desc']],
                    dom: '<"datatable-top"f>rt'
                });
            }
        });
    </script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
        .playersTableWrap {
            padding: 18px;
        }

        .players-table {
            width: 100% !important;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.03);
        }

        .players-table thead th {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            font-weight: 700;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 14px 12px;
            text-align: center !important;
        }

        .players-table tbody td {
            padding: 14px 12px;
            color: #eaeaea;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            text-align: center !important;
            vertical-align: middle;
        }

        .players-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.04);
            transition: background 0.2s ease;
        }

        .dataTables_wrapper {
            color: #fff;
        }

        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 14px;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_filter label {
            color: #fff;
            font-weight: 600;
        }

        .dataTables_wrapper .dataTables_filter input {
            margin-left: 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            border-radius: 10px;
            padding: 8px 12px;
            outline: none;
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: none;
        }

        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_paginate {
            color: #ddd !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #fff !important;
        }

        @media (max-width: 768px) {
            .playersTableWrap {
                padding: 12px;
            }

            .players-table thead th,
            .players-table tbody td {
                font-size: 14px;
                padding: 10px 8px;
            }

            .dataTables_wrapper .dataTables_filter {
                text-align: left;
            }

            .dataTables_wrapper .dataTables_filter input {
                width: 100%;
                margin-left: 0;
                margin-top: 8px;
            }
        }
    </style>
{% endblock %}