{% load i18n %}
{% include "admin/djangocms_icon/includes/assets.html" %}

<div class="djangocms-icon"
    data-name="{{ name }}"
    data-iconset="{{ iconset }}">
    {% if not iconsets %}
        <div class="alert alert-danger">
            {% trans "No Iconsets configured. Please configure at least one Iconset before using this widget." %}
        </div>
    {% else %}
        <div class="icon js-icon js-icon-{{ name }} form-inline">
            {# label "icon" relates to elements ID #}
            {% if not is_required %}
                <input id="id_{{ name }}" class="checkbox js-icon-enable{% if is_required %} hidden{% endif %}" name="icons-enabled-{{ name }}" type="checkbox"{% if value or is_required %} checked="checked"{% endif %}>
            {% endif %}

            <span class="icon-widgets js-icon-widgets{% if not is_required %} hidden{% endif %}">
                <label>
                    <select class="form-control js-iconset">
                        {% for iconpicker_iconset, iconset_prefix, verbose_name, iconset_version in iconsets %}
                            <option value="{{ iconpicker_iconset }}" data-iconset-version="{{ iconset_version }}" data-iconset-prefix="{{ iconset_prefix }}"{% if iconset == iconpicker_iconset %} selected="selected"{% endif %}>{{ verbose_name }}</option>
                        {% endfor %}
                    </select>
                </label>

                <label class="iconpicker iconpicker-wrapper js-icon-picker">
                    <button type="button" {% if is_required %} id="id_{{ name }}"{% endif %}
                        name="{{ name }}"
                        data-iconset="{{ iconset }}"
                        data-iconset-version="{{ version }}"
                        data-icon="{{ value }}">
                    </button>
                    <input type="hidden" name="{{ name }}" value="{{ prefix }} {{ value }}">
                </label>
            </span>
        </div>
    {% endif %}
</div>
