{% extends "layout.html" %}
{% block content %}
<div class="tab-content" id="myTabContent">
    {% for rating_type, leaders in leaders.items() %}
    <div class="tab-pane fade{{' active show' if rating_type == 0 else ''}}" id="leaderboards-{{rating_type}}">
        <div class="container my-5">
            <!-- Leader Cards -->
            <div class="card-deck mb-5">
                {% for category, data in leaders.items() %}
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title mb-4">{{ data.title }}</h5>
                        <p class="mb-0 player-name">{{ data.entry.player_name }}</p>
                        <p class="mt-1 alt-name">{{ data.entry.user_accounts }}</p>
                        <p class="score-large">{{ data.entry.score }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- Leaderboards -->
            <div id="leaderboards-{{rating_type}}-data" class="accordion">
                {% for category, leaderboard in leaderboards.items() %}
                <div class="card">
                    <div class="card-header">
                        <button class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#{{ category|lower|replace(' ', '-') }}">
                            {{ category }}
                        </button>
                    </div>
                    <div id="{{ category|lower|replace(' ', '-') }}" class="collapse" data-parent="#leaderboards-{{rating_type}}-data">
                        <div class="card-body">
                            <table class="table table-striped">
                                {% for entry in leaderboard[rating_type] %}
                                <tr>
                                    <td>
                                        <div class="player-name">{{ entry.player_name }}</div>
                                        <div class="alt-name">{{ entry.user_accounts }}</div>
                                    </td>
                                    <td class="score">{{ entry.score }}</td>
                                </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

        </div>
    </div>
    {% endfor %}


    <!-- Variants -->
    <div class="tab-pane fade" id="variants">
        <div class="container my-5">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th scope="col" class="text-center">Variant</th>
                    <th scope="col" class="text-center">Player count</th>
                    <th scope="col" class="text-center">Rating</th>
                    <th scope="col" class="text-center">Games Played</th>
                    <th scope="col" class="text-center">Max Scores</th>
                </tr>
                </thead>
                <tbody>
                {% for variant in variants %}
                <tr>
                    <td class="text-center"><strong>{{ variant.name }}</strong></td>
                    <td class="text-center">{{ variant.num_players }}</td>
                    <td class="text-center variant-rating">{{ variant.rating | int }}</td>
                    <td class="text-center">{{ variant.games_played }}</td>
                    <td class="text-center">{{ variant.games_won }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="tab-pane fade" id="info">
        <div class="container my-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="alert alert-info" role="alert">
                            <h4 class="alert-heading">Welcome to the league!</h4>
                            <p>Season One will be live from <strong>TODO</strong></p>
                            <hr>
                            <p class="mb-0">Sign ups are open from TODO on.</p>
                        </div>
                    </div>
                </div>
            </div>

            <h3>About</h3>
            TODO: Write info.
        </div>
    </div>

</div>
{% endblock %}