{% load wagtailimages_tags wagtailcore_tags my %}

<div id="block-{{ block_num }}"
         class="{% if block_num == 1 %}header-padding {% endif %}{{ block.block_type }} {% if value.svg_bg_position %}bg-pos-{{ value.svg_bg_position }}{% endif %} {% if value.theme %}theme-bg-{{ value.theme }}{% endif %} {% if value.bg_desktop or value.bg_mobile %}{% if block_num >= 2 %}lazy{% endif %}{% endif %}"
        {% if request.user_agent.is_pc %}
            {% for media in value.bg_desktop %}
                {% if media.block_type == 'svg' %}
                    {% if block_num >= 2 and not amp %}data-src="{{ media.value.url }}"{% else %}style="background-image: url({{ media.value.url }})"{% endif %}
                {% elif media.block_type == 'image' %}
                    {% image media.value fill-1920x1080 as img %}
                    {% if block_num >= 2 and not amp %}data-src="{{ img.url }}"{% else %}style="background-image: url({{ img.url }})"{% endif %}
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if not request.user_agent.is_pc %}
            {% for media in value.bg_mobile %}
                {% if media.block_type == 'svg' %}
                    {% if block_num >= 2 and not amp %}data-src="{{ media.value.url }}"{% else %}style="background-image: url({{ media.value.url }})"{% endif %}
                {% elif media.block_type == 'image' %}
                    {% image media.value fill-1920x1080 as img %}
                    {% if block_num >= 2 and not amp %}data-src="{{ img.url }}"{% else %}style="background-image: url({{ img.url }})"{% endif %}
                {% endif %}
            {% endfor %}
        {% endif %}
>
    <div class="container {{ value.container }} {% if not value.padding_top %}nopadtop{% endif %} {% if not value.padding_bottom %}nopadbottom{% endif %} theme-{{ value.theme }}">
        {% block block_content %}
        {% endblock %}
    </div>
</div>
