<div
    class="dm-template dm-text text5-{{ component_id }}"
    {% if wp_mode %}
        dm-template="text.text5"
        component-id="{{ component_id }}"
    {% if edit_mode is empty and anchor %} id="{{ anchor }}"{% endif %}
    {% endif %}>
    {% if edit_mode %}
        <section dm-text
            top-padding-old
            bottom-padding-old
            dm-padding-draggable-top
            dm-padding-draggable-bottom
            class="text"
            ng-class="getClassString(data)">
            <div
                ng-if="data.block_bg.type == 'image'"
                class="section-bg section-image"
                ng-style="{'background-image': 'url({{ pluginUrl }}' + data.block_bg.image + ')' }"></div>
            <div
                ng-if="data.block_bg.type == 'color'"
                class="section-bg section-color"
                ng-style="{'background-color': data.block_bg.color, 'opacity': data.block_bg.opacity}"></div>
            <div ng-if="data.block_bg.type == 'gradient'">
                <div
                    ng-if="!data.block_bg.gradient[2]"
                    class="section-bg section-gradient"
                    ng-style="{
                        'background': 'linear-gradient(' + data.block_bg.angle + 'deg,  ' + data.block_bg.gradient[0].color + ' ' + data.block_bg.gradient[0].x + '%, ' + data.block_bg.gradient[1].color + ' ' + data.block_bg.gradient[1].x + '%)'
                    }"></div>
                <div
                    ng-if="data.block_bg.gradient[2]"
                    class="section-bg section-gradient"
                    ng-style="{
                        'background': 'linear-gradient(' + data.block_bg.angle + 'deg,  ' + data.block_bg.gradient[0].color + ' ' + data.block_bg.gradient[0].x + '%, ' + data.block_bg.gradient[1].color + ' ' + data.block_bg.gradient[1].x + '%, ' + data.block_bg.gradient[2].color + ' ' + data.block_bg.gradient[2].x + '%)'
                    }"></div>
            </div>
    {% else %}
        <section class="text top-padding-{{ paddings.top }} bottom-padding-{{ paddings.bottom }}">
            {% if block_bg.type == 'image' %}
                <div
                    class="section-bg section-image"
                    style="background-image: url({{ pluginUrl }}{{ block_bg.image }});"></div>
            {% elseif block_bg.type == 'color' %}
                <div
                    class="section-bg section-color"
                    style="background-color: {{ block_bg.color }}; opacity: {{ block_bg.opacity }};"></div>
            {% elseif block_bg.type == 'gradient' %}
                {% if block_bg.gradient[2] %}
                    <div
                        class="section-bg section-gradient"
                        style="
                            background: linear-gradient({{ block_bg.angle }}deg, {{ block_bg.gradient[0].color }} {{ block_bg.gradient[0].x }}%, {{ block_bg.gradient[1].color }} {{ block_bg.gradient[1].x }}%, {{ block_bg.gradient[2].color }} {{ block_bg.gradient[2].x }}%);
                        "></div>
                {% else %}
                    <div
                        class="section-bg section-gradient"
                        style="
                            background: linear-gradient({{ block_bg.angle }}deg, {{ block_bg.gradient[0].color }} {{ block_bg.gradient[0].x }}%, {{ block_bg.gradient[1].color }} {{ block_bg.gradient[1].x }}%);
                        "></div>
                {% endif %}
            {% endif %}
    {% endif %}
        <div class="container">
            {% if edit_mode %}
                <div text-editing
                     text-editing-include="[paragraphs, bold, italic, heading, justify, anchor, color, fonts]"
                     ng-model="data.title"
                     class="paragraph">
                </div>
            {% else %}
                {% for el in title.content %}
                    <{{ el.tagName }}
                            style="{% for s, v in el.style %} {{ s }}: {{ v }}; {% endfor %}"
                            class="{% for c in el.classes %} {{ c }} {% endfor %} paragraph">
                        {{ el.html }}
                    </{{ el.tagName }}>
                {% endfor %}
            {% endif %}

            {% if edit_mode %}
                <div
                    class="paragraph"
                    button-editing
                    button-editing-include="[bold, italic, justify, anchor, color, fonts, border]"
                    button-editing-is-button="true"
                    ng-model="data.button"></div>
            {% else %}
                <div class="paragraph button-wrapper" style="{% for s, v in button['content-style'] %}{{ s }}: {{ v }}; {% endfor %}">
                    <a
                        class="{% if button['button-style'] %}button stroke{% endif %} {% for c in button.classes %} {{ c }} {% endfor %}"
                        style="{% for s, v in button['button-style'] %}{{ s }}: {{ v }}; {% endfor %}"
                        href="{{ button.url }}"
                        {% if button.target %} target="_blank" {% endif %}>
                        {{ button.content }}
                    </a>
                </div>
            {% endif %}
        </div>
    </section>
    {% if edit_mode %}
        <div class="dm-widget-main align-center" data-html2canvas-ignore>
            <div class="dm-widget dm-grid-widget-main" style="top: 25px !important">
                <div class="dm-widget-item dm-bg-options hidden-widget" dm-widget-drop-down>
                    <div dm-bg-options="['opacity', 'color', 'gradient', 'image', 'navigation']" dm-bg-options-color="data.block_bg.color" dm-bg-options-opacity="data.block_bg.opacity" dm-bg-options-image="data.block_bg.image" dm-bg-options-gradient="data.block_bg.gradient" dm-bg-options-gradient-type="data.block_bg.gradient_type" dm-bg-options-type="data.block_bg.type" dm-bg-options-angle="data.block_bg.angle"></div>
                </div>
                <div class="dm-widget-item" dm-widget-drop-down>
                    <div dm-tools='["move", "duplicate", "appearance", "customCSS", "remove", "anchor"]' anchor-value="data.anchor" top-padding="data.paddings.top" bottom-padding="data.paddings.bottom"></div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
