<div
    class="dm-template dm-text text8-{{ component_id }}"
    {% if wp_mode %}
        dm-template="text.text8"
        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 dm-text-ng"
            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 dm-text-ng width-{{ text.width }} position-{{ text.position }} top-padding-{{ paddings.top }} bottom-padding-{{ paddings.bottom }} text8">
            {% 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">
            <div class="dm-content">
            {% if edit_mode %}
                <div
                        text-editing-e
                        class="heading"
                        text-editing-include="[paragraphs, heading, bold, italic, underline, list, quote, justify, link, color, fonts, textTransform]"
                        ng-model="data.text.content">
                </div>
            {% else %}
                {{ text.content}}
            {% endif %}
            </div>
        </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-text-width-editor size="data.text.width" position="data.text.position"></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>
