{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}
    <div class="content-panel">
        <h1 class="mb-4">Wyślij powiadomienie do wybranych urządzeń</h1>

        {% if sent %}
            <div class="alert alert-success">Powiadomienie zostało wysłane.</div>
        {% endif %}

        {% if error %}
            <div class="alert alert-danger">Błąd: {{ error }}</div>
        {% endif %}

        {% if output is defined %}
            <ul class="mt-3">
                {% for line in output %}
                    <li>{{ line }}</li>
                {% endfor %}
            </ul>
        {% endif %}

        <div class="form-wrapper card p-4 shadow-sm">
            {{ form_start(form) }}
            <div class="mb-3">
                {{ form_label(form.title) }}
                {{ form_widget(form.title, { attr: { class: 'form-control' } }) }}
                {{ form_errors(form.title) }}
            </div>
            <div class="mb-3">
                {{ form_label(form.body) }}
                {{ form_widget(form.body, { attr: { class: 'form-control' } }) }}
                {{ form_errors(form.body) }}
            </div>
            <div class="mb-3">
                {{ form_label(form.tokens) }}
                <div class="form-check-list border p-2 rounded" style="max-height: 300px; overflow-y: auto;">
                    {% for child in form.tokens %}
                        <div style="word-break: break-all; white-space: normal;" class="form-check mb-1">
                            {{ form_widget(child) }}
                            {{ form_label(child) }}
                        </div>
                    {% endfor %}
                </div>

                {{ form_errors(form.tokens) }}
            </div>
            <div class="mt-4">
                {{ form_widget(form.submit, { attr: { class: 'btn btn-primary' } }) }}
            </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}