<div
    {% if edit_mode %}
        class="dm-template dm-image"
        dm-image
        data-image-layout="data.media.image.layout"
        data-image-src="data.media.image.src.base"
        ng-class="getClassString(data, 'dm-image-')"
    {% else %}
        class="dm-template dm-image {% if media.image.layout %} dm-image-{{ media.image.layout }} {% endif %}{% if media.image.align %} dm-image-{{ media.image.align }} {% endif %} {% if text.content[0].html and not ('<br' in text.content[0].html) %} dm-image-description {% endif %}"
    {% endif %}
    {% if wp_mode %}
        dm-template="image.image4"
        component-id="{{ component_id }}"
    {% if edit_mode is empty and anchor %} id="{{ anchor }}"{% endif %}
    {% endif %}>
    {% if edit_mode %}
    <section
        class="image"
        top-padding-old
        bottom-padding-old
        dm-padding-draggable-top
        dm-padding-draggable-bottom
        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>
        <div class="image-holder">
            <div
                dm-media-preloader
                class="image-wrapper droppable-media-holder">
                <div
                    dm-image-width="{
                        'small': '8',
                        'base': '3600'
                    }"
                    dm-media-show="data.media.show"
                    dm-drop-image="data.media.image.src.base">
                </div>
                <img dm-image-check="data.media.image.imageIsSmall" ng-src="{{ pluginUrl }}[[ data.media.image.src.base ]]" alt="Name" />
                
                <div class="dm-widget-main align-center" data-html2canvas-ignore>
    <div class="dm-widget">
        <div class="dm-widget-item" dm-widget-drop-down>
            <div dm-upload-media>
              <div dm-wp-media-library
                   dm-media-show="data.media.show"
                   dm-selected-image="data.media.image.src.base">
              </div>
            </div>
        </div>
        <div class="dm-widget-item" dm-widget-drop-down>
            <div dm-image-layout="data.media.image.layout"></div>
        </div>
        <div class="dm-widget-item" dm-image-align="data.media.image.align" ng-show="data.media.image.layout == 'small'"></div>
        <div class="dm-widget-item" dm-widget-drop-down>
            <div dm-image-link="data.media.image.url"></div>
        </div>
        <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>


            </div>
            <div class="text-editing">
                <div text-editing
                     text-editing-include="[bold, italic, justify, anchor, fonts]"
                     ng-model="data.text"
                     ng-hide="data.media.image.imageIsSmall || captionVisible(data.text.content[0].html, showCaption)">
                </div>
            </div>
        </div>
    </section>
    {% else %}
    <section class="image top-padding-{{ paddings.top }} bottom-padding-{{ paddings.bottom }} {{ media.image.layout }} {{ media.image.align }} {% if text.content[0].html and not ('<br' in text.content[0].html) %} description {% endif %}">
        {% 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 %}
        <div class="image-holder">
            <div class="image-wrapper {% if media.image.imageIsSmall %}not-fit{% endif %}">
                {% if media.image.url %}
                    <a href="{{ media.image.url }}">
                        <img src="{{ pluginUrl }}{{ media.image.src.base }}" alt="Name" />
                    </a>
                {% else %}
                    <img src="{{ pluginUrl }}{{ media.image.src.base }}" alt="Name" />
                {% endif %}
            </div>
            {% if (media.image.imageIsSmall is empty)
                    and not (text.content[0].html starts with '<br')
                    and not (text.content[0].html is empty) %}
                {% for el in text.content %}
                    <{{ el.tagName }}
                            style="{% for s, v in el.style %} {{ s }}: {{ v }}; {% endfor %}"
                            class="{% for c in el.classes %} {{ c }} {% endfor %}">
                        {{ el.html }}
                    </{{ el.tagName }}>
                {% endfor %}
            {% endif %}
        </div>
    </section>
    {% endif %}
</div>
