{% extends 'xprez/admin/contents/base.html' %}

{% block options %}
    <ul class="xprez-module__options-group">
        <li><span class="xprez-option-btn js-checkbox_controller js-box" data-formfield_selector="#id_content-{{ content.pk }}-box">Box</span></li>
    </ul>
    <ul class="xprez-module__options-group js-select_controller js-box-show" data-formfield_selector="#id_content-{{ content.pk }}-width">
        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ content.SIZE_FULL }}">Full width</span></li>
        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ content.SIZE_MID }}">Mid width</span></li>
        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ content.SIZE_TEXT }}">Text width</span></li>
    </ul>
{% endblock %}

{% block content %}
    {{ content.admin_form.text }}
{% endblock %}

{% block hidden_form %}
    {{ block.super }}
    {{ content.admin_form.width }}
    {{ content.admin_form.box }}
    {{ content.admin_form.css_class }}

{% endblock %}


{% block js %}
    <script>
        jqueryME(document).ready(function () {
            initializeMediumEditors(jqueryME('.js-content-{{ content.pk }}'));
        });

        $(function () {
            var $jsBox = $('.js-content-{{ content.pk }}').find('.js-box');
            var $boxOptions = $('.js-content-{{ content.pk }}').find('.js-box-show');
            if (!$jsBox.hasClass('active')) {
                $boxOptions.hide();
            }
            $jsBox.on('activated', function () {
                $boxOptions.show();
            });
            $jsBox.on('deactivated', function () {
                $boxOptions.hide();
            });


        });
    </script>
{% endblock %}
