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

{% block wfbo_title %}Mines 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(mgSettingsForm, {attr: {'data-testid': 'mg-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 Mines 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-mg-enabled-wrapper">
                {{ form_widget(mgSettingsForm.mgEnabled) }}
                {{ form_label(mgSettingsForm.mgEnabled, null, {label_attr: {class: 'form-check-label'}}) }}
                {{ form_errors(mgSettingsForm.mgEnabled) }}
            </div>
        </div>
    </div>

    {# ── Bet Limit ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Bet Limit</h2>
            <p class="wfbo-card-desc">
                Maximum bet amount per Mines round. Leave blank for no limit.
            </p>
            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(mgSettingsForm.mgMaxBetAmount, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(mgSettingsForm.mgMaxBetAmount) }}
                {{ form_errors(mgSettingsForm.mgMaxBetAmount) }}
            </div>
        </div>
    </div>

    {# ── House Win Rate ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">House Win Rate</h2>
            <p class="wfbo-card-desc">
                Override the general house win rate for Mines only. Leave blank to use the general setting.
                Higher means more rounds resolve in the house's favor.
            </p>
            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(mgSettingsForm.mgHouseWinRate, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(mgSettingsForm.mgHouseWinRate, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">%</span>
                </div>
                {{ form_errors(mgSettingsForm.mgHouseWinRate) }}
                <p class="form-hint">
                    Leave blank to fall back to the general house win rate setting.
                </p>
            </div>
        </div>
    </div>

    {# ── Risk Level: Green Light ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Green Light</h2>
            <p class="wfbo-card-desc">
                Low-risk configuration. Fewer mines on the grid with lower multipliers.
            </p>
            <div class="row">
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgGreenMines, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(mgSettingsForm.mgGreenMines) }}
                    {{ form_errors(mgSettingsForm.mgGreenMines) }}
                    <p class="form-hint">Number of mines on the 16-tile grid (1–15).</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgGreenBaseMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgGreenBaseMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgGreenBaseMultiplier) }}
                    <p class="form-hint">Payout multiplier for the first safe tile.</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgGreenIncrementalMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgGreenIncrementalMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">+</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgGreenIncrementalMultiplier) }}
                    <p class="form-hint">Additional multiplier per consecutive safe tile.</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Risk Level: Standard ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Standard</h2>
            <p class="wfbo-card-desc">
                Medium-risk configuration. Balanced mines and multipliers.
            </p>
            <div class="row">
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgStandardMines, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(mgSettingsForm.mgStandardMines) }}
                    {{ form_errors(mgSettingsForm.mgStandardMines) }}
                    <p class="form-hint">Number of mines on the 16-tile grid (1–15).</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgStandardBaseMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgStandardBaseMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgStandardBaseMultiplier) }}
                    <p class="form-hint">Payout multiplier for the first safe tile.</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgStandardIncrementalMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgStandardIncrementalMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">+</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgStandardIncrementalMultiplier) }}
                    <p class="form-hint">Additional multiplier per consecutive safe tile.</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Risk Level: High Risk ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">High Risk</h2>
            <p class="wfbo-card-desc">
                High-risk configuration. More mines with higher payout multipliers.
            </p>
            <div class="row">
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgHighRiskMines, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(mgSettingsForm.mgHighRiskMines) }}
                    {{ form_errors(mgSettingsForm.mgHighRiskMines) }}
                    <p class="form-hint">Number of mines on the 16-tile grid (1–15).</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgHighRiskBaseMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgHighRiskBaseMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgHighRiskBaseMultiplier) }}
                    <p class="form-hint">Payout multiplier for the first safe tile.</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgHighRiskIncrementalMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgHighRiskIncrementalMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">+</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgHighRiskIncrementalMultiplier) }}
                    <p class="form-hint">Additional multiplier per consecutive safe tile.</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Risk Level: Black Out ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Black Out</h2>
            <p class="wfbo-card-desc">
                Maximum risk configuration. Highest mine count with the biggest multipliers.
            </p>
            <div class="row">
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgBlackoutMines, null, {label_attr: {class: 'form-label--sm'}}) }}
                    {{ form_widget(mgSettingsForm.mgBlackoutMines) }}
                    {{ form_errors(mgSettingsForm.mgBlackoutMines) }}
                    <p class="form-hint">Number of mines on the 16-tile grid (1–15).</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgBlackoutBaseMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgBlackoutBaseMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">×</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgBlackoutBaseMultiplier) }}
                    <p class="form-hint">Payout multiplier for the first safe tile.</p>
                </div>
                <div class="col-md-4 mb-3" style="max-width: 260px;">
                    {{ form_label(mgSettingsForm.mgBlackoutIncrementalMultiplier, null, {label_attr: {class: 'form-label--sm'}}) }}
                    <div class="input-group" style="max-width: 200px;">
                        {{ form_widget(mgSettingsForm.mgBlackoutIncrementalMultiplier, {attr: {class: 'border-end-0'}}) }}
                        <span class="input-group-text input-group-suffix">+</span>
                    </div>
                    {{ form_errors(mgSettingsForm.mgBlackoutIncrementalMultiplier) }}
                    <p class="form-hint">Additional multiplier per consecutive safe tile.</p>
                </div>
            </div>
        </div>
    </div>

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

    {{ form_end(mgSettingsForm) }}

{% endblock %}