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

{% block wfbo_title %}Head2Head Karera Settings{% 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 %}

    {{ form_start(h2hSettingsForm, {attr: {'data-testid': 'h2h-settings-form', 'novalidate': 'novalidate', 'data-turbo': 'false'}}) }}

    {# ── Game Toggle ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Game Visibility</h2>
            <p class="wfbo-card-desc">
                Enable or disable Head2Head Karera on the site. When disabled, the game card is hidden from the home page and the route redirects to home.
            </p>
            <div class="form-check mb-0" data-testid="input-h2h-enabled-wrapper">
                {{ form_widget(h2hSettingsForm.h2hEnabled) }}
                {{ form_label(h2hSettingsForm.h2hEnabled, null, {label_attr: {class: 'form-check-label'}}) }}
                {{ form_errors(h2hSettingsForm.h2hEnabled) }}
            </div>
        </div>
    </div>

    {# ── Win Multiplier ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Win Multiplier</h2>
            <p class="wfbo-card-desc">
                Multiplier applied to the winner's bet amount. For example, a multiplier of 2.00 means the winner receives their bet times 2.
            </p>
            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(h2hSettingsForm.h2hWinMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(h2hSettingsForm.h2hWinMultiplier, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">x</span>
                </div>
                {{ form_errors(h2hSettingsForm.h2hWinMultiplier) }}
            </div>
        </div>
    </div>

    <div>
        <button type="submit"
                class="btn btn-admin-save"
                data-testid="btn-save-h2h-settings">
            Save Settings
        </button>
    </div>

    {{ form_end(h2hSettingsForm) }}

{% endblock %}