{% extends "base.html" %}

{% block title %}{% trans %}NHL Scrabble Analyzer - Playoff Bracket{% endtrans %}{% endblock %}

{% block content %}
    <!-- Top Statistics -->
    <div class="stats-summary fade-on-scroll">
        <div class="stat-card">
            <h4>{% trans %}Total Teams{% endtrans %}</h4>
            <p class="stat-value">{{ stats.total_teams }}</p>
        </div>
        <div class="stat-card">
            <h4>{% trans %}Playoff Teams{% endtrans %}</h4>
            <p class="stat-value">{{ playoff_teams_count }}</p>
        </div>
        <div class="stat-card">
            <h4>{% trans %}Top Seed{% endtrans %}</h4>
            <p class="stat-value">{{ stats.highest_team_score }}</p>
            <p class="stat-detail">{{ stats.highest_team }} ({{ stats.highest_team_name }})</p>
        </div>
        <div class="stat-card">
            <h4>{% trans %}Total Players{% endtrans %}</h4>
            <p class="stat-value">{{ stats.total_players }}</p>
        </div>
    </div>

    <!-- Playoff Bracket -->
    <section class="results-section">
        <h3>{% trans %}Playoff Bracket by Scrabble Score{% endtrans %}</h3>
        <div class="playoff-container">
            {% for conference, teams in playoff_bracket.items() %}
                <div class="conference-bracket">
                    <h4>{{ conference }} {% trans %}Conference{% endtrans %}</h4>
                    <div class="playoff-teams">
                        {% for team in teams %}
                            <div class="playoff-team">
                                <div class="team-seed">
                                    {% if team.seed_type == "division" %}
                                        <span class="seed-badge division-seed" title="{% trans %}Division winner{% endtrans %}">{{ team.division_rank }}</span>
                                    {% elif team.seed_type == "wildcard" %}
                                        <span class="seed-badge wildcard-seed" title="{% trans %}Wild card{% endtrans %}">WC</span>
                                    {% else %}
                                        <span class="seed-badge">-</span>
                                    {% endif %}
                                    {% if team.status_indicator %}
                                        <span class="status-indicator">{{ team.status_indicator }}</span>
                                    {% endif %}
                                </div>
                                <div class="team-info">
                                    <span class="team-abbrev">{{ team.abbrev }}</span>
                                    <span class="team-score">{{ team.total }}</span>
                                    <span class="team-avg">({% trans %}avg{% endtrans %}: {{ team.avg|round(1) }})</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="playoff-legend">
            <h5>{% trans %}Legend:{% endtrans %}</h5>
            <ul>
                <li><strong>1-3:</strong> {% trans %}Division winners (automatic qualification){% endtrans %}</li>
                <li><strong>WC:</strong> {% trans %}Wild card teams (top 2 non-division winners){% endtrans %}</li>
                <li><strong>z:</strong> {% trans %}Conference leader{% endtrans %}</li>
                <li><strong>p:</strong> {% trans %}Presidents' Trophy (best overall record){% endtrans %}</li>
                <li><strong>y:</strong> {% trans %}Division leader{% endtrans %}</li>
                <li><strong>x:</strong> {% trans %}Clinched playoff spot{% endtrans %}</li>
            </ul>
        </div>
    </section>
{% endblock %}