{% extends "admin/list/base_list_custom_batch.html.twig" %}
{% trans_default_domain 'admin' %}

{% block stylesheets %}
  {{ parent() }}
  <style type="text/css">
      @media (max-width:767px) {
        .select2-drop {
          left: 16px !important;
          right: 16px !important;
          width: unset !important;
        }
      }
      @media (min-width:768px) {
        body:not(.modal-open) .select2-result {
          max-width: 50vw !important;
        }
        body.modal-open .select2-result {
          max-width: 530px !important;
        }
      }
      @media (min-width:992px) {
        body.modal-open .select2-result {
          max-width: 830px !important;
        }
      }
  </style>
{% endblock %}

{% block notice %}
  {% include '@SonataCore/FlashMessage/render.html.twig' %}
  <form action="{{ path('gogo_elements_list_columns') }}" method="POST">
    <div class="input-group input-group-sm" style="display: flex; align-items: center; padding: 10px;">
      <span class="input-group-addon">Choix des colonnes</span>
      <select class="select2" multiple="true" name="fields[]"
              style="flex: 1 auto; width: auto !important;">
        {% for column in admin.availableColumns %}
          <option {% if column in admin.selectedColumns %}selected{% endif %}>{{ column }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="btn-sm btn btn-primary">Apply</button>
    </div>
  </form>
{% endblock %}