{% extends "base.html" %}

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

{% block content %}
    <div class="hero">
        <h2>{% trans %}Analyze NHL Player Names by Scrabble Score{% endtrans %}</h2>
        <p class="hero-subtitle">
            {% trans %}Calculate Scrabble scores for NHL player names and see team standings, playoff brackets, and statistics based on letter values.{% endtrans %}
        </p>
    </div>

    <section class="analysis-form-section">
        <h3>{% trans %}Run Analysis{% endtrans %}</h3>

        <form id="analysisForm"
              class="analysis-form"
              hx-get="/api/analyze"
              hx-target="#results"
              hx-indicator="#loading"
              hx-trigger="submit">
            <!-- Hidden field to preserve locale in HTMX requests -->
            <input type="hidden" name="lang" value="{{ locale }}">
            <div class="form-row">
                <div class="form-group">
                    <label for="topPlayers">
                        {% trans %}Top Players to Display{% endtrans %}
                        <span class="help-text">{% trans %}Number of top-scoring players (1-100){% endtrans %}</span>
                    </label>
                    <input type="number"
                           id="topPlayers"
                           name="top_players"
                           min="1"
                           max="100"
                           value="20"
                           aria-label="{% trans %}Number of top-scoring players to display (1-100){% endtrans %}"
                           aria-describedby="topPlayersHelp"
                           required>
                </div>

                <div class="form-group">
                    <label for="topTeamPlayers">
                        {% trans %}Top Players per Team{% endtrans %}
                        <span class="help-text">{% trans %}Players per team in results (1-30){% endtrans %}</span>
                    </label>
                    <input type="number"
                           id="topTeamPlayers"
                           name="top_team_players"
                           min="1"
                           max="30"
                           value="5"
                           aria-label="{% trans %}Number of top players to show per team (1-30){% endtrans %}"
                           aria-describedby="topTeamPlayersHelp"
                           required>
                </div>

                <div class="form-group">
                    <label for="useCache">
                        <input type="checkbox"
                               id="useCache"
                               name="use_cache"
                               aria-label="{% trans %}Use cached results for faster loading{% endtrans %}"
                               checked>
                        {% trans %}Use Cached Results (faster){% endtrans %}
                    </label>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit"
                        class="btn btn-primary"
                        id="analyzeBtn"
                        aria-label="{% trans %}Analyze NHL player Scrabble scores{% endtrans %}">
                    <span class="btn-text">{% trans %}Analyze{% endtrans %}</span>
                    <span class="btn-loading" hidden>
                        <span class="spinner"></span>
                        {% trans %}Fetching NHL data...{% endtrans %}
                    </span>
                </button>

                <!-- HTMX loading indicator -->
                <div id="loading" class="htmx-indicator" hidden>
                    <span class="spinner"></span>
                    {% trans %}Loading NHL data...{% endtrans %}
                </div>
            </div>
        </form>
    </section>

    <!-- Results container (populated by JavaScript) -->
    <div id="results" class="results-container" hidden>
        <!-- Results will be inserted here -->
    </div>

    <!-- Error message container -->
    <div id="error" class="error-container" hidden role="alert">
        <!-- Error messages will be inserted here -->
    </div>

    <section class="info-section">
        <h3>{% trans %}About{% endtrans %}</h3>
        <p>
            {% trans %}NHL Scrabble Analyzer calculates Scrabble scores for all NHL players using standard Scrabble letter point values. Teams are ranked by their total roster score, creating an alternative playoff bracket based on alphabetical prowess rather than on-ice performance.{% endtrans %}
        </p>

        <h4>{% trans %}Scrabble Letter Values{% endtrans %}</h4>
        <div class="scrabble-values">
            <div class="value-group">
                <strong>{% trans %}1 point:{% endtrans %}</strong> A, E, I, O, U, L, N, S, T, R
            </div>
            <div class="value-group">
                <strong>{% trans %}2 points:{% endtrans %}</strong> D, G
            </div>
            <div class="value-group">
                <strong>{% trans %}3 points:{% endtrans %}</strong> B, C, M, P
            </div>
            <div class="value-group">
                <strong>{% trans %}4 points:{% endtrans %}</strong> F, H, V, W, Y
            </div>
            <div class="value-group">
                <strong>{% trans %}5 points:{% endtrans %}</strong> K
            </div>
            <div class="value-group">
                <strong>{% trans %}8 points:{% endtrans %}</strong> J, X
            </div>
            <div class="value-group">
                <strong>{% trans %}10 points:{% endtrans %}</strong> Q, Z
            </div>
        </div>

        <p class="references">
            <strong>{% trans %}References:{% endtrans %}</strong>
            <a href="https://en.wikipedia.org/wiki/Scrabble#Letter_distribution" target="_blank">{% trans %}Scrabble Letter Values{% endtrans %}</a> |
            <a href="https://en.wikipedia.org/wiki/Scrabble_letter_distributions" target="_blank">{% trans %}Letter Distributions{% endtrans %}</a>
        </p>
    </section>
{% endblock %}