{% extends "django_cradmin/viewhelpers/listbuilder/itemvalue/titledescription.django.html" %}
{% load cradmin_tags %}
{% load cradmin_icon_tags %}
{% load i18n %}

{% block content %}
    <div class="{% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-details' %}">
        {{ block.super }}
    </div>

    {% block buttons %}
        <p class="{% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-buttons' %}">
            {% block select-button %}
                <button type="button"
                        id="{{ me.get_selectbutton_dom_id }}"
                        class="btn btn-default {% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-select-button' %}"
                        django-cradmin-multiselect2-select={{ select_directive_json|safe }}
                        aria-label='{{ me.get_selectbutton_aria_label }}'>
                    {% block usethis-button-content %}
                        {{ me.get_selectbutton_text }}
                        {% block usethis-button-icon %}
                            <span class="{% cradmin_icon 'select-left' %} hidden-xs"></span>
                        {% endblock usethis-button-icon %}
                    {% endblock usethis-button-content %}
                </button>
            {% endblock select-button %}
        </p>
    {% endblock buttons %}

    {% block selected-summary %}
        <div class="{% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-selectedsummary' %}">
            {% block selected-summary-content %}
                {% block selected-summary-prefix %}
                    <span class="{% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-selectedsummary-prefix' %}">
                        {% block selected-summary-prefix-content %}
                            <span class="{% cradmin_icon "multiselect2-selected" %}
                                         {% cradmin_test_css_class 'cradmin-multiselect2-itemvalue-selectedsummary-prefix-icon' %}"
                                aria-hidden="true"></span>
                            <span class="screenreader-only">({% trans "Selected" %})</span>
                        {% endblock selected-summary-prefix-content %}
                    </span>
                {% endblock selected-summary-prefix %}
                {% block selected-summary-title %}
                    {{ me.get_title }}
                {% endblock %}
            {% endblock selected-summary-content %}
        </div>
    {% endblock selected-summary %}

    {% block preview-wrapper %}
        {% cradmin_render_renderable me.selected_item_renderer %}
    {% endblock preview-wrapper %}
{% endblock content %}
