{% extends 'layouts/app.html.twig' %}

{% block title %}Przykłady AI | micey-projects{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}

    <section class="panel panel--hero">
        <div class="panel__header panel__header--space-between">
            <div>
                <p class="panel__eyebrow">AI Studio</p>
                <h2 class="panel__title">Przykłady AI</h2>
                <p class="panel__text">Dobre i złe przykłady będą używane jako kontekst w przyszłym API. Na tym etapie są lokalną bazą wiedzy.</p>
            </div>
            <a href="{{ path('app_ai_studio') }}" class="button button--ghost">AI Studio</a>
        </div>
    </section>

    <section class="panel">
        <h3 class="panel__section-title">Dodaj przykład</h3>
        <form method="post" class="stack-form ai-add-form">
            <input type="hidden" name="_token" value="{{ csrf_token('ai_example_add') }}">
            <div class="form-grid form-grid--two">
                <label>Typ
                    <select class="form-control" name="example_type">
                        <option value="good">Dobry</option>
                        <option value="bad">Zły</option>
                    </select>
                </label>
                <label>Tytuł
                    <input class="form-control" name="title" required>
                </label>
                <label>Field code
                    <input class="form-control" name="field_code" placeholder="np. short_description">
                </label>
                <label>Block code
                    <input class="form-control" name="block_code" placeholder="np. life_scene">
                </label>
            </div>
            <label>Kontekst wejściowy
                <textarea class="form-control" name="input_context" rows="3"></textarea>
            </label>
            <label>Treść
                <textarea class="form-control" name="content" rows="6" required></textarea>
            </label>
            <label>Powód
                <textarea class="form-control" name="reason" rows="2"></textarea>
            </label>
            <div class="form-actions">
                <button class="button button--primary" type="submit">Dodaj przykład</button>
            </div>
        </form>
    </section>

    <section class="panel">
        <h3 class="panel__section-title">Lista przykładów</h3>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr><th>ID</th><th>Typ</th><th>Zakres</th><th>Tytuł</th><th>Powód</th></tr>
                </thead>
                <tbody>
                {% for example in examples %}
                    <tr>
                        <td>#{{ example.id }}</td>
                        <td>
                            <span class="text-badge {{ example.exampleType == 'good' ? 'text-badge--success' : 'text-badge--warning' }}">
                                {{ example.exampleType }}
                            </span>
                        </td>
                        <td>{{ example.fieldCode ?: example.blockCode ?: 'global' }}</td>
                        <td><strong>{{ example.title }}</strong></td>
                        <td>{{ example.reason ?: '—' }}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="5">Brak przykładów.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
{% endblock %}