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

{% block wfbo_title %}Karera{% endblock %}

{% block wfbo_content %}

    <h1 style="margin-bottom: 8px; color: #000;">Karera</h1>
    <p style="color: var(--wfbo-text-secondary); margin-bottom: 24px;">Manage horses, jockeys, trainers, and arenas.</p>

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

    {% if is_granted('ROLE_OPERATIONS') %}
    <div class="mb-4">
        <form method="POST" action="{{ path('app_wfbo_karera_enabled_toggle') }}" class="d-flex align-items-center gap-2">
            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_enabled_toggle') }}">
            <span>Player-facing Karera page is
                <strong data-testid="karera-enabled-status">{{ setting.kareraEnabled ? 'Enabled' : 'Disabled' }}</strong>
            </span>
            <button type="submit" class="pill-link--secondary" data-testid="toggle-karera-enabled">
                {{ setting.kareraEnabled ? 'Disable' : 'Enable' }}
            </button>
        </form>
    </div>
    {% endif %}

    <div class="row">

        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-md-4 mb-4">
            <a href="{{ path('app_wfbo_karera_horses') }}" class="card" style="text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s;" data-testid="karera-hub-horses">
                <div class="card-body">
                    <h2 class="wfbo-card-title" style="margin-bottom: 4px;">Horses</h2>
                    <p class="wfbo-card-desc" style="margin-bottom: 0;">Manage the list of horses.</p>
                </div>
            </a>
        </div>
        {% endif %}

        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-md-4 mb-4">
            <a href="{{ path('app_wfbo_karera_jockeys') }}" class="card" style="text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s;" data-testid="karera-hub-jockeys">
                <div class="card-body">
                    <h2 class="wfbo-card-title" style="margin-bottom: 4px;">Jockeys</h2>
                    <p class="wfbo-card-desc" style="margin-bottom: 0;">Manage the list of jockeys.</p>
                </div>
            </a>
        </div>
        {% endif %}

        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-md-4 mb-4">
            <a href="{{ path('app_wfbo_karera_trainers') }}" class="card" style="text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s;" data-testid="karera-hub-trainers">
                <div class="card-body">
                    <h2 class="wfbo-card-title" style="margin-bottom: 4px;">Trainers</h2>
                    <p class="wfbo-card-desc" style="margin-bottom: 0;">Manage the list of trainers.</p>
                </div>
            </a>
        </div>
        {% endif %}

        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-md-4 mb-4">
            <a href="{{ path('app_wfbo_karera_arenas') }}" class="card" style="text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s;" data-testid="karera-hub-arenas">
                <div class="card-body">
                    <h2 class="wfbo-card-title" style="margin-bottom: 4px;">Arenas</h2>
                    <p class="wfbo-card-desc" style="margin-bottom: 0;">Manage the list of arenas.</p>
                </div>
            </a>
        </div>
        {% endif %}

        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-md-4 mb-4">
            <a href="{{ path('app_wfbo_karera_events') }}" class="card" style="text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s;" data-testid="karera-hub-events">
                <div class="card-body">
                    <h2 class="wfbo-card-title" style="margin-bottom: 4px;">Events</h2>
                    <p class="wfbo-card-desc" style="margin-bottom: 0;">Create race events and manage races and entries.</p>
                </div>
            </a>
        </div>
        {% endif %}

    </div>

{% endblock %}