{% extends 'wfbo/_layout.html.twig' %}

{% block wfbo_title %}Race Dividends{% endblock %}

{% block wfbo_content %}

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <form method="POST" action="{{ path('app_wfbo_race_dividends') }}" data-testid="race-dividends-form" data-turbo="false" novalidate>
        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_race_dividends') }}">

        <div class="card mb-4">
            <div class="card-body">

                <h2 class="wfbo-card-title">
                    Default Dividends
                </h2>
                <p class="wfbo-card-desc">
                    Set the dividend payout for each pair of finishing positions.
                    Row = 1st finisher, Column = 2nd finisher.
                </p>

                <div class="overflow-x-auto">
                    <table class="dividend-table" data-testid="race-dividends-table">
                        <thead>
                            <tr>
                                <th style="width: 48px;"></th>
                                {% for col in 6..2 %}
                                    <th class="dividend-table__header-wide">
                                        {{ col }}
                                    </th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in 1..5 %}
                                <tr>
                                    <th>
                                        {{ row }}
                                    </th>
                                    {% for col in 6..2 %}
                                        {% if col > row %}
                                            <td>
                                                <input
                                                    type="number"
                                                    name="race_dividends[{{ row }}-{{ col }}]"
                                                    value="{{ setting.getRaceDividend(row, col) }}"
                                                    min="0"
                                                    max="1000"
                                                    step="0.01"
                                                    class="form-control form-control-sm dividend-input"
                                                    data-testid="race-dividend-{{ row }}-{{ col }}"
                                                >
                                            </td>
                                        {% else %}
                                            <td class="dividend-table__empty"></td>
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" name="shuffle" id="shuffle"
                           value="1" {{ setting.raceDividendShuffle ? 'checked' : '' }}
                           data-testid="checkbox-shuffle">
                    <label class="form-check-label" for="shuffle">
                        Shuffle dividend values each race
                    </label>
                </div>

            </div>
        </div>

        <div class="d-flex align-items-center gap-3">
            <button type="submit"
                    class="btn btn-admin-save"
                    data-testid="btn-save-race-dividends">
                Save Dividends
            </button>
        </div>
    </form>

{% endblock %}