{% load static %}
<div class="xprez-module {% if content.admin_has_errors %}xprez-module--error{% endif %} js-content js-content-{{ content.pk }} {% block extra_class %}{% endblock %}" data-pk="{{ content.pk }}">
    {% if allowed_contents %}
        <div class="xprez-add xprez-add-before">
            <div class="xprez-add__cont">
                {% include "../includes/add_list.html" with xprez_admin=xprez_admin allowed_contents=allowed_contents before_content=content %}
            </div>
        </div>
    {% endif %}

    {% block js %}{% endblock %}
    <div style="display: none;">
        {% block hidden_form %}
            {{ content.admin_form.position }}
            {{ content.admin_form.visible }}
            {{ content.admin_form.css_class }}
            {{ content.admin_form.background_color }}
            {{ content.admin_form.alternate_color }}
            {{ content.admin_form.margin_bottom }}
            {{ content.admin_form.padding_top }}
            {{ content.admin_form.padding_bottom }}
        {% endblock %}
    </div>
    <div class="xprez-module__title js-sortable-handler">
        {% block btn_collapse %}<span class="xprez-icon-btn-collapse js-collapser" title="Collapse"></span>{% endblock %}
        {% block btn_delete %}<span class="xprez-icon-btn-remove js-delete-content" data-pk="{{ content.pk }}" data-url="{% url xprez_admin.xprez_delete_content_url_name content.pk %}" title="Remove"></span>{% endblock %}
        {% block btn_copy_content %}<span class="xprez-icon-btn-copy js-copy-content" data-pk="{{ content.pk }}" data-url="{% url xprez_admin.xprez_copy_content_url_name content.pk %}" title="Copy and paste the module"></span>{% endblock %}
        {% block btn_toggle_visible %}<span class="xprez-icon-btn-eye js-checkbox_controller" data-formfield_selector="#id_content-{{ content.pk }}-visible" title="Visibility on/off"></span>{% endblock %}
        <h2>
            <b>{{ content.verbose_name }}</b>
            {% if content.margin_bottom != content.MARGIN_BOTTOM_DEFAULT %}<i>margin bottom: <b>{{ content.get_margin_bottom_display }}</b></i>{% endif %}
            {% if content.padding_top != content.PADDING_TOP_DEFAULT or content.padding_bottom != content.PADDING_BOTTOM_DEFAULT %}
                <i>
                    padding
                    {% if content.padding_top != content.PADDING_TOP_DEFAULT %}top: <b>{{ content.get_padding_top_display }}</b>{% endif %}
                    {% if content.padding_bottom != content.PADDING_BOTTOM_DEFAULT %}bottom: <b>{{ content.get_padding_bottom_display }}</b>{% endif %}
                </i>
            {% endif %}
            {% if content.alternate_color %}<i><b>alternate color</b></i>{% endif %}
            {% if content.background_color %}<i>background color: <b>{{ content.background_color }}</b></i>{% endif %}
            {% if content.css_class  %}<i>class: <b>{{ content.css_class }}</b></i>{% endif %}
        </h2>

        <span class="xprez-icon-btn-dots-horizontal-triple js-common-options-toggle" title="Common options"></span>
    </div>
    <div class="xprez-module__collapse-cont">
        <div class="xprez-module__options xprez-module__common-options js-common-options">
            <div>
                <ul class="xprez-module__options-group js-select_controller" data-formfield_selector="#id_content-{{ content.pk }}-margin_bottom">
                    <li>
                        <label class="xprez-option-label">Margin bottom:</label>
                    </li>
                    {% for value, label in content.admin_form.margin_bottom.field.choices %}
                        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ value }}">{{ label }}</span></li>
                    {% endfor %}
                </ul>
                <ul class="xprez-module__options-group js-select_controller" data-formfield_selector="#id_content-{{ content.pk }}-padding_top">
                    <li>
                        <label class="xprez-option-label">Padding top:</label>
                    </li>
                    {% for value, label in content.admin_form.padding_top.field.choices %}
                        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ value }}">{{ label }}</span></li>
                    {% endfor %}
                </ul>
                <ul class="xprez-module__options-group js-select_controller" data-formfield_selector="#id_content-{{ content.pk }}-padding_bottom">
                    <li>
                        <label class="xprez-option-label">Padding bottom:</label>
                    </li>
                    {% for value, label in content.admin_form.padding_bottom.field.choices %}
                        <li><span class="xprez-option-btn js-option" data-formfield_value="{{ value }}">{{ label }}</span></li>
                    {% endfor %}
                </ul>

            </div>
            <div>
                <ul class="xprez-module__options-group">
                    <li><span class="xprez-option-btn js-checkbox_controller" data-formfield_selector="#id_content-{{ content.pk }}-alternate_color" >Alternate color</span></li>
                </ul>
                <ul class="xprez-module__options-group ">
                    <li>
                        <label class="xprez-option-label">Background color:</label>
                        <input type="text" class="xprez-option-input xprez-option-input--m js-text_controller" data-formfield_selector="#id_content-{{ content.pk }}-background_color">
                    </li>
                </ul>
                <ul class="xprez-module__options-group ">
                    <li>
                        <label class="xprez-option-label">Css class:</label>
                        <input type="text" class="xprez-option-input js-text_controller" data-formfield_selector="#id_content-{{ content.pk }}-css_class">
                    </li>
                </ul>
            </div>
        </div>

        <div class="xprez-module__options {% block options_class %}{% endblock %}">
            {% block options %}{% endblock %}
        </div>

        <div class="xprez-module__content">
            {% block errors %}
                {% if content.admin_form.non_field_errors %}
                    <ul class="xprez-error-list">
                        {% for error in content.admin_form.non_field_errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endblock %}
            {% block content %}
                <div class="xprez-form-table">
                    {% if content.preview_image %}
                        <img src="{% static content.preview_image %}" alt="" class="xprez-module__preview-image">
                    {% endif %}
                    {% for field in content.admin_form.main_fields %}
                        {% include 'xprez/admin/form/row.html' with field=field%}
                    {% endfor %}
                </div>
            {% endblock %}
        </div>
    </div>
</div>
