{#
 # For the full copyright and license information, please view the
 # docs/licenses/LICENSE.txt file that was distributed with this source code.
 #}
{% use 'bootstrap_4_layout.html.twig' %}

{% block shop_selector_widget %}
  <div class="shop-selector-content shop-selector" data-multiple="{{ multiple }}">
    <ul class="shop-selector-group-list">
      {% for groupName, groupShops in form.vars.choices %}
        <li class="shop-selector-group-item shop-selector-item">
          {{ 'Group'|trans({}, 'Admin.Global') ~ ' ' ~ groupName }}
        </li>

        {% for shopChoice in groupShops %}
          {% set shop = shopChoice.data %}

          <li class="shop-selector-shop-item shop-selector-item{% if shop.id == contextShopId %} selected-shop current-shop disabled{% endif %}" data-shop-id="{{ shop.id }}">
            {% if multiple %}
              {{ block('shop_option_checkbox_widget') }}
            {% else %}
              {{ block('shop_option_radio_widget') }}
            {% endif %}
          </li>
        {% endfor %}
      {% endfor %}
    </ul>

    {% set attr = attr|merge({class: 'd-none shop-selector-input'}) %}
    {{ block('choice_widget') }}
  </div>
{% endblock %}

{% block shop_option_checkbox_widget %}
  <div class="md-checkbox md-checkbox-inline">
    <label class="shop-selector-item-label">
      <input
        type="checkbox" data-value-type="boolean" class="form-check-input" value="{{ shop.id }}"
        {% if shopChoice is selectedchoice(value) %}checked{% endif %}
        {% if shop.id == contextShopId %}disabled="disabled"{% endif %}
      />
      <i class="md-checkbox-control"></i>
      {{ block('shop_selector_item_name') }}
    </label>
  </div>
{% endblock %}

{% block shop_option_radio_widget %}
  {{ block('shop_selector_item_name') }}
{% endblock %}

{% block shop_selector_item_name %}
  <div class="shop-selector-item-name">
    <span class="shop-selector-color-container">
      <span class="shop-selector-color"{% if shop.color is not empty %} style="background-color: {{ shop.color }};"{% endif %}></span>
    </span>
    {{ shop.name }}
    {% if not multiple %}
      <i class="material-icons">arrow_forward</i>
    {% else %}
      <span class="shop-selector-status" data-added-label="{{ 'Added'|trans({}, 'Admin.Global') }}" data-removed-label="{{ 'Removed'|trans({}, 'Admin.Global') }}">
        {% if shop.id == contextShopId %}
          {{ 'Current store'|trans({}, 'Admin.Global') }}
        {% endif %}
      </span>
    {% endif %}
  </div>
{% endblock %}
