{% extends 'base.html.twig' %}

{% block stylesheets %}
    <!-- Theme CSS - Includes Bootstrap -->
    <style type="text/css">
        .masthead{
            background: url(../img/bg-pattern.png),linear-gradient(to right,#943129,#826412) !important;
        }
        .red-strike {
            text-decoration: line-through;
            border: 1px solid red !important;
        }
        .success {
            background: #02c502;
            color: white;
            font-weight: 800;
            font-size: 20px;
        }
        .divider {
            max-width: 100% !important;
        }
        .main-block {
            border: 5px solid antiquewhite;
            box-shadow: 2px 2px;
            border-radius: 5px;
        }
        .th-colour {
            background: linear-gradient(45deg, #7c4293, #33db38);
        }
        .table {
            font-size: x-large !important;
        }
        .table td {
            border-top: 0 !important;
            vertical-align: middle;
        }
        .table th {
            border-top: 0 !important;
        }
        body {
            background: url(../img/bg-pattern.png),linear-gradient(to right,#943129,#826412) !important;
        }
        .circle_yellow
        {
            padding: 10px 11px;
            background: #f1df38;
            border-radius: 100%;
            margin-left: auto;
            margin-right: auto;
            width: 1%;
        }
        .blink_me {
		 color: #28a745!important;
 		 animation: blinker 1s linear infinite;
	}

	@keyframes blinker {
  	  50% {
    	    opacity: 0;
  	  }
	}
	.result-text {
	  font-size: xx-large;
    	  color: #073fa9;
    	  font-weight: bold;
	}
    </style>
{% endblock %}
{% block menu %} {% endblock %}
{% block body %}
    <header class="masthead">
        <div class="container h-100">
            <h4 class="text-uppercase text-white font-weight-bold">{{ group.tatami }} - ( {{ group.name }} )</h4>
            <div class="row main-block pb-5 align-items-center justify-content-center text-center" style="background: #01013a">
                <div class="col-lg-10 align-self-end1">
                    <h3 class="text-uppercase text-white font-weight-bold mt-5"> Score board </h3>

                    <table class="table table-striped text-white font-weight-bold bt-0 {{ finishedPlayers ? '' : 'd-none' }}" >
                        <thead>
                            <tr class="th-colour">
                                <th>#Rank</th>
                                <th>Competitor</th>
                                <th>Score</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for pl in finishedPlayers |slice(0, 8) %}
			    {% if group.status=='finished' and loop.index==1 %}
                                <tr style=" color: #d4af37;">
				<td><i class="fas fa-medal"></i></td>
                            {% elseif group.status=='finished' and loop.index == 2 %}
                                <tr style=" color: #c0c0c0;">
                                <td><i class="fas fa-medal"></i></td>
                            {% elseif group.status=='finished' and (loop.index == 3 or loop.index ==4) %}
                                <tr style=" color: #A57164;">
                                <td><i class="fas fa-medal"></i></td>
                            {% else %}
                                <tr>
				<td># {{ loop.index }}</td>
                            {% endif%}
                            <td>{{ pl.student.name }} - ( {{ pl.student.club.name }} )</td>
                            <td>{{ pl.grandTotal }}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <hr class="divider {{ finishedPlayers ? '' : 'd-none' }}"/>
                </div>
                <div class="col-lg-10 align-items-left justify-content-left text-left pt-3 {{ player ? '' : 'd-none' }}">

                    <table class="table" style="background: linear-gradient(45deg, #f13906, #f3ec07)">
                        <tbody>
                            <tr>
                                <td>{{ player ? player.student.name }}</td>
                                <td>{{ player ? player.student.club.name }}</td>
                                <td class="{{ player ? player.status == 'finished' ? 'circle_yellow result-text' : 'text-right blink_me' }}">
                                    {{ player ? player.status == 'finished' ? player.grandTotal : 'Playing'}}
                                </td>
                                {#<td class="circle_yellow">7.0</td>#}
                            </tr>
                        </tbody>
                    </table>
                    <h5 class="text-right text-uppercase text-danger font-weight-bold"> {{ player ? player.kata.name }}</h5>
                </div>
            </div>
            {% include 'footer.html.twig' %}
        </div>
    </header>
{% if group.status=='playing' %}
<script type="text/javascript">
        setTimeout(function(){
            window.location.reload(1);
        }, 5000);
    </script>
{% endif %}
{% endblock %}
{% block footer %}
{% endblock %}