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

{% block wfbo_title %}{{ banner ? 'Edit' : 'New' }} {{ p.label|title }}{% endblock %}

{% block wfbo_content %}

    {% set errorFlashes = app.flashes('error') %}
    {% if errorFlashes %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">
            {% for flash in errorFlashes %}
                <div>{{ flash }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="mb-4">
        <a href="{{ path(p.routes.list) }}"
           class="back-link">
            ← Back to {{ p.title }}
        </a>
    </div>

    <div class="card" style="max-width: 560px;">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                {{ banner ? 'Edit' : 'New' }} {{ p.label|title }}
            </h2>

            <form method="POST"
                  action="{{ banner ? path(p.routes.edit, {id: banner.id}) : path(p.routes.new) }}"
                  data-testid="site-banner-form"
                  data-turbo="false"
                  enctype="multipart/form-data"
                  novalidate>
                <input type="hidden" name="_token"
                       value="{{ csrf_token(banner ? 'wfbo_site_banner_edit_' ~ banner.id : 'wfbo_site_banner_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm">
                        Title <span class="text-danger">*</span>
                    </label>
                    <input type="text"
                           name="title"
                           class="form-control"
                           style="max-width: 400px;"
                           placeholder="e.g. Summer Promo"
                           value="{{ submitted.title }}"
                           data-testid="input-title">
                    <p class="form-hint">Shown as the image's alt text.</p>
                </div>

                <div class="mb-3">
                    <label class="form-label--sm">
                        Banner Image {% if not banner %}<span class="text-danger">*</span>{% endif %}
                    </label>
                    {% if banner %}
                        <div class="mb-2">
                            <img src="{{ banner.imageUrl }}" alt="{{ banner.title }}" style="max-height: 80px; border-radius: 4px;">
                        </div>
                    {% endif %}
                    <input type="file"
                           name="image"
                           accept="image/*"
                           class="form-control"
                           style="max-width: 400px;"
                           data-testid="input-image">
                    {% if banner %}
                        <p class="form-hint">Leave empty to keep the current image.</p>
                    {% endif %}
                    {% if p.imageHint %}
                        <p class="form-hint">{{ p.imageHint }}</p>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label class="form-label--sm">
                        Link URL
                    </label>
                    <input type="text"
                           name="link_url"
                           class="form-control"
                           style="max-width: 400px;"
                           placeholder="e.g. https://example.com/promo"
                           value="{{ submitted.linkUrl }}"
                           data-testid="input-link-url">
                    <p class="form-hint">Optional — where the banner links to when clicked.</p>
                </div>

                <div class="mb-4">
                    <label class="form-label--sm">
                        Sort Order
                    </label>
                    <input type="number"
                           name="sort_order"
                           class="form-control"
                           style="max-width: 160px;"
                           value="{{ submitted.sortOrder }}"
                           data-testid="input-sort-order">
                    <p class="form-hint">Lower numbers show first.</p>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-submit">
                        {{ banner ? 'Update' : 'Save' }} {{ p.label|title }}
                    </button>
                    <a href="{{ path(p.routes.list) }}"
                       class="back-link">
                        Cancel
                    </a>
                </div>

            </form>

        </div>
    </div>

{% endblock %}