{# Icon settings #}
{% if not iconsets %}
    <div class="form-inline">
        <div class="alert alert-danger">
            No Iconsets configured! Please configure at least on Iconset before using this widget.
        </div>
    </div>
{% else %}
<div class="icon js-icon js-icon-{{ name }} form-inline">
    <input class="checkbox js-icon-enable{% if is_required %} hidden{% endif %}" name="icons-enabled-{{ name }}" type="checkbox"{% if value or is_required %} checked="checked"{% endif %} />
    <span class="js-icon-widgets hidden">
        <select class="form-control js-iconset">
            {% for iconpicker_iconset, prefix, verbose_name in iconsets %}
                <option value="{{ iconpicker_iconset }}" data-prefix="{{ prefix }}"{% if iconset == prefix %} selected="selected"{% endif %}>{{ verbose_name }}</option>
            {% endfor %}
        </select>
        <span class="iconpicker js-icon-picker">
            <button id="id_{{ name }}" class="btn btn-default form-control" name="{{ name }}" data-icon="{{ value }}"></button>
        </span>
    </span>
</div>

{# Styling definitions #}

<!-- overriding django cms admin style -->
<style>
    {# TODO: Find a way to move this into a scss file #}
   .icon select { width: auto; }
   .iconpicker button.btn-default, .iconpicker-popover button.btn-default, .btn-icon-positions button.btn-default {
       background-image: none !important;
       box-shadow: none !important;
       border: 1px solid #ccc !important;
       margin-top: 0;
   }
   .iconpicker button.btn-default:hover, .iconpicker-popover button.btn-default:hover, .btn-icon-positions button.btn-default:hover {
       color: #333 !important;
       background-color: #e6e6e6 !important;
       border-color: #adadad !important;
   }
   .iconpicker-popover table {
       margin: 0 !important;
       padding: 0 !important;
   }
   .iconpicker-popover table tr td, .iconpicker-popover table tr th {
       border-bottom: none;
       padding: 0;
   }
   .iconpicker-popover table tfoot tr td {
       padding-top: 5px;
       border-top: 0;
       background: none;
   }
   .btn-icon-positions button.btn.active {
       background: #e6e6e6 !important;
       box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !important;
   }
   .field-icon_left, .field-icon_right { min-height: 55px; }
   .form-control-static { float: none !important; margin-left: 0 !important; padding: 0 !important; }


</style>

{# Javascript #}
<script>
    if (!$) {
        $ = django.jQuery;
    }
    $( document ).ready(function() {
        var name = '{{ name }}';
        var initialIconsetPrefix = '{{ iconset }}';
        var isRequired = Boolean('{% if is_required %}true{% endif %}');
        var iconPicker = $('.js-icon-' + name + ' .js-icon-picker');
        var iconSet = $('.js-icon-' + name + ' .js-iconset');
        var enableIconCheckbox = $('.js-icon-' + name + ' .js-icon-enable');
        var widgets = $('.js-icon-' + name + ' .js-icon-widgets');

        window['iconPicker_' + name] = iconPicker;
        window['iconSet_' + name] = iconSet;
        window['enableIconCheckbox_' + name] = enableIconCheckbox;

        var iconPickerButton = iconPicker.find('button');
        var initialValue = iconPickerButton.data('icon');
        // var initialIconsetPrefix = initialValue.split('-')[0];

        var initialIconset = iconSet.find('option[data-prefix=' + initialIconsetPrefix + ']').attr('value');

        if ( iconSet.find('option').length == 1 ) {
            iconSet.hide();
            iconSet.parent().prepend('<label class="form-control-static">' + iconSet.find('option').text() + '</label>');
        }


        iconPickerButton.iconpicker({
            arrowClass: 'btn-default',
            icon: initialValue,
            iconset: initialIconset
        });
        iconSet.on('change', function(){
            var newIconset = $(this).val();
            iconPickerButton.iconpicker('setIconset', newIconset);
            window['iconsetSelected_' + name] = newIconset;
        });

        iconPicker.on('change', function(e) {
            var iconSelected = iconPickerButton.find('input').attr('value');
            var iconSelectedCss = $(this).find('i').attr('class');
            window['iconSelected_' + name] = iconSelected;
            window['iconSelectedCss_' + name] = iconSelectedCss;
        });

        enableIconCheckbox.on('change', function(e) {
            if ($(this).prop('checked')) {
                widgets.removeClass('hidden');
                iconPicker.trigger('change');
            } else {
                widgets.addClass('hidden');
                window['iconSelected_' + name] = '';
                window['iconSelectedCss_' + name] = '';
                iconPickerButton.find('input').val('');
                console.log('remove icon');
            }
        });
        enableIconCheckbox.trigger('change');

        // Init active icon
        window['iconSelected_' + name] = initialValue;
        window['iconsetSelected_' + name] = initialIconset;
        window['iconsetSelectedCss_' + name] = iconPicker.find('i').attr('class');
    });
</script>
{% endif %}
