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

{% block options %}
    <ul class="xprez-module__options-group js-select_controller" data-formfield_selector="#id_content-{{ content.pk }}-image_alignment">
        <li><span class="xprez-option-btn js-option js-align-option" data-formfield_value="{{ content.ALIGNMENT_LEFT }}">Image on Left</span></li>
        <li><span class="xprez-option-btn js-option js-align-option" data-formfield_value="{{ content.ALIGNMENT_RIGHT }}">Image on Right</span></li>
    </ul>
{% endblock %}

{% block extra_class %}image-{{ content.image_alignment }} xprez-module-text-image{% endblock %}

{% block content %}
    <div class="xprez-flexbox-cont ">
        <div class="xprez-image-text-image">
            {% block image_preview %}
                {% if content.image %}
                    <div class="xprez-form-row">
                        <div class="xprez-cell-label">
                            {% thumbnail content.image "1000x1000" format="WEBP" upscale=False as thumb %}
                                <img src="{{ thumb.url }}"/>
                            {% endthumbnail %}
                        </div>
                    </div>
                {% endif %}
            {% endblock %}
            {% block image_input %}
                {% include 'xprez/admin/form/row.html' with field=content.admin_form.image %}
            {% endblock %}
        </div>
        <div class="xprez-image-text-text xprez-text-image">
            {{ content.admin_form.text }}
        </div>

    </div>
{% endblock %}

{% block hidden_form %}
    {{ block.super }}
    {{ content.admin_form.image_alignment }}
{% endblock %}

{% block js %}
    <script>
        $(function () {
            var $content = $('.js-content-{{ content.pk }}');
            var $alignBtns = $content.find('.js-align-option');
            $alignBtns.click(function () {
                $content.removeClass('image-left');
                $content.removeClass('image-right');
                $content.addClass('image-' + $(this).data('formfield_value'));
            });
        });
    </script>
{% endblock %}