@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100">
                <div class="card-header h2">Rozgrywki Know Your Team</div>
                <div id="gameOverflow" class="card-body overflow-auto">
                    <table id="gameTable" class="table table-striped table-sm mt-4">
                        <thead class="thead-dark">
                        <tr>
                            <th>Nazwa testu</th>
                            <th>Data rozgrywki</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div id="loaderImage" class="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="h5 text-center p-4" id="errorMessage"></div>
                    @include('blocks.knt.result')
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script type="text/javascript" src="{{ asset('js/knt_games.js') }}"></script>
@endsection

@section('style')
<style>
    .card-body{
        text-align: center;
    }
    .table td {
        transition-duration: 0.3s;
        cursor: pointer;
        vertical-align: middle !important;
    }

    .table thead th {
        position: sticky;
        top: 0;
    }

    #gameTable tr:hover td{
        background-color: #FFDE95;
    }

    .info {
        width: 100%;
        white-space: nowrap;
    }

    .close {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 10px;
        color:white;
        padding: 7px;
        cursor: pointer;
    }

    #kntResultContainer{
        position: fixed;
        transition-duration: 0.4s;
        right: 0;
        color:white;
        z-index: 2;
        max-width: 1230px;
        overflow: auto;
        background-color: #187fd4;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 5px;
        border: 2px solid #ffde95;
        bottom:0;
        height: 50vh;
        width: 0;
    }
</style>
@endsection