{{ form_start(form) }}
<div class="form-group mb-3">

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }} mt-3">
            <font color="black">{{ message }}</font>
        </div>
    {% endfor %}
{% endfor %}
    <label for="idItem">{{ "Objet à vendre"|trans }}</label>
    <select name="cms_shop[idItem]" id="idItem" class="form-control js-item-select" {% if cms_shop.idItem is not null %} disabled {% endif %}>
        <option value="">{{ 'Sélectionner un objet...'|trans }}</option>
        {% for item in items %}
            <option value="{{ item.id }}" {% if cms_shop.idItem == item.id %}selected{% endif %}>
                {{ item.name }}
            </option>
        {% endfor %}
    </select>
    {% if cms_shop.idItem is not null %}
        <input type="hidden" name="cms_shop[idItem]" value="{{ cms_shop.idItem }}">
    {% endif %}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Prix"|trans}}
    </label>
    {{ form_widget(form.price) }}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Quantité"|trans}}
    </label>
    {{ form_widget(form.quantity) }}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Promotion"|trans}}
    </label>
    {{ form_widget(form.promotion) }}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Description"|trans}}
    </label>
    {{ form_widget(form.forceddescription) }}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Image"|trans}}
    </label>
    {{ form_widget(form.image) }}
</div>

<div class="form-group mt-3 mb-3">
    <label for="cms_shop_idItem">
        {{"Visible ?"|trans}}
    </label>
    {{ form_widget(form.visible) }}
</div>

<button class="btn btn-success btn-block mb-3">{{"Sauvegarder"|trans}}</button>
{{ form_end(form) }}
{% block javascripts %}
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            new TomSelect('#idItem', {
                create: false,
                sortField: {
                    field: "text",
                    direction: "asc"
                },
                placeholder: "Rechercher un objet...",
                maxOptions: 1000
            });
        });
    </script>
{% endblock %}