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

{% block wfbo_title %}Color Game — Payouts{% endblock %}

{% block wfbo_content %}

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

    <form method="POST" action="{{ path('app_wfbo_color_game_multiplier') }}" data-turbo="false">

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

                <h2 class="wfbo-card-title">Payout Multipliers</h2>
                <p class="wfbo-card-desc">
                    Payout multipliers based on how many cubes match the player's chosen color.
                    Each round rolls one real, unrigged set of 3 cubes shared by every bet — the house edge comes
                    entirely from these multipliers being below the true odds, not from any hidden win/lose rate.
                </p>

                <div class="mb-4" style="max-width: 320px;">
                    <label class="form-label--sm">1 Cube Matches</label>
                    <div class="input-group" style="max-width: 160px;">
                        <input type="number" name="cgMultiplier1"
                               value="{{ setting.cgMultiplier1 }}"
                               min="1.00" step="0.01"
                               class="form-control border-end-0"
                               required>
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                </div>

                <div class="mb-4" style="max-width: 320px;">
                    <label class="form-label--sm">2 Cubes Match</label>
                    <div class="input-group" style="max-width: 160px;">
                        <input type="number" name="cgMultiplier2"
                               value="{{ setting.cgMultiplier2 }}"
                               min="1.00" step="0.01"
                               class="form-control border-end-0"
                               required>
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                </div>

                <div class="mb-0" style="max-width: 320px;">
                    <label class="form-label--sm">3 Cubes Match</label>
                    <div class="input-group" style="max-width: 160px;">
                        <input type="number" name="cgMultiplier3"
                               value="{{ setting.cgMultiplier3 }}"
                               min="1.00" step="0.01"
                               class="form-control border-end-0"
                               required>
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                </div>

            </div>
        </div>

        <div>
            <button type="submit" class="btn btn-admin-save">Save Payouts</button>
        </div>

    </form>

{% endblock %}