<div class="{% unless section.settings.full_width %}container{% endunless %}" {% render 'overwrite-theme-style', settings: section.settings %}>

    <div class="video-banner">
        <div class="video-banner-video" {% if section.settings.youtube_video_id != blank %}style="height: 100%;"{%- endif -%}>
            {%- assign mobile_device_class = '' -%}
            {%- assign desktop_device_class = '' -%}

            {%- assign has_mobile_video = false -%}
            {%- if section.settings.youtube_video_id != blank or section.settings.video_webm != blank or section.settings.video_mp4 != blank or section.settings.video_mov != blank -%}
                {%- assign has_mobile_video = true -%}
            {%- endif -%}

            {%- assign has_desktop_video = false -%}
            {%- if section.settings.desktop_youtube_video_id != blank or section.settings.desktop_video_webm != blank or section.settings.desktop_video_mp4 != blank or section.settings.desktop_video_mov != blank -%}
                {%- assign has_desktop_video = true -%}
            {%- endif -%}

            {%- if has_mobile_video and has_desktop_video -%}
                {%- assign mobile_device_class = 'mobile' -%}
                {%- assign desktop_device_class = 'desktop' -%}
            {%- endif -%}

            {%- if section.settings.youtube_video_id != blank -%}
                {%- assign videoId = section.settings.youtube_video_id | split: '?' -%}
                {%- assign videoId = videoId[1] | split: '&' -%}

                {% for bracket in videoId %}
                    {%- assign infos = bracket | split: '=' -%}

                    {%- if infos[0] == 'v' -%}
                        {%- assign videoId = infos[1] -%}
                        {% break %}
                    {%- endif -%}
                {% endfor %}

                <iframe class="{{ mobile_device_class }}" src="https://www.youtube.com/embed/{{ videoId }}?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
            {%- elsif section.settings.video_webm != blank or section.settings.video_mp4 != blank or section.settings.video_mov != blank -%}
                <video class="{{ mobile_device_class }} {% if section.settings.manually_play_pause %} video-manually-play-pause {% endif %}" autoplay playsinline {% if section.settings.mute_video %} muted {% endif %} loop >
                    {% if section.settings.video_webm != blank %}
                        <source src="{{ section.settings.video_webm }}" type="video/webm">
                    {% endif %}
                    {% if section.settings.video_mp4 != blank %}
                        <source src="{{ section.settings.video_mp4 }}" type="video/mp4">
                    {% endif %}
                    {% if section.settings.video_mov != blank %}
                        <source src="{{ section.settings.video_mov }}" type="video/mp4">
                    {% endif %}
                </video>
            {%- endif -%}

            {%- if section.settings.desktop_youtube_video_id != blank -%}
                {%- assign videoId = section.settings.desktop_youtube_video_id | split: '?' -%}
                {%- assign videoId = videoId[1] | split: '&' -%}

                {% for bracket in videoId %}
                    {%- assign infos = bracket | split: '=' -%}

                    {%- if infos[0] == 'v' -%}
                        {%- assign videoId = infos[1] -%}
                        {% break %}
                    {%- endif -%}
                {% endfor %}

                <iframe class="{{ desktop_device_class }}" src="https://www.youtube.com/embed/{{ videoId }}?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
            {%- elsif section.settings.desktop_video_webm != blank or section.settings.desktop_video_mp4 != blank or section.settings.desktop_video_mov != blank -%}
                <video class="{{ desktop_device_class }} {% if section.settings.manually_play_pause %} video-manually-play-pause {% endif %}" autoplay playsinline {% if section.settings.mute_video %} muted {% endif %} loop>
                    {% if section.settings.desktop_video_webm != blank %}
                        <source src="{{ section.settings.desktop_video_webm }}" type="video/webm">
                    {% endif %}
                    {% if section.settings.desktop_video_mp4 != blank %}
                        <source src="{{ section.settings.desktop_video_mp4 }}" type="video/mp4">
                    {% endif %}
                    {% if section.settings.desktop_video_mov != blank %}
                        <source src="{{ section.settings.desktop_video_mov }}" type="video/mp4">
                    {% endif %}
                </video>
            {%- endif -%}
        </div>

        {%- capture style -%}
            align-items: {{ section.settings.alignment }};

            {%- if section.settings.alignment == "center" -%}
                text-align: center;
            {%- elsif section.settings.alignment == "end" -%}
                text-align: right;
            {%- endif -%}
        {%- endcapture -%}

        <div class="video-banner-content image-banner-content {{ section.settings.position }}" style="{{ style | strip_newlines }}">
        {%- for block in section.blocks -%}
            {% case block.type %}
            
                {% when "heading" %}
                    {%- capture style -%}
                        {%- if block.settings.overwrite_theme_background_color != blank -%}
                            {%- assign alpha = block.settings.overwrite_theme_background_color | color_extract: 'alpha' -%}
                    
                            {%- if alpha == 1 -%}
                                padding: 5px;
                            {%- endif -%}
                        {%- endif -%}

                        {%- if block.settings.background_color_rounded -%}
                            border-radius: var(--border-radius);
                        {%- endif -%}
                    {%- endcapture -%}

                    <h2 class="{% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings, append_style: style %}>
                        <span class="desktop">{{ block.settings.heading }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.heading }}</span>
                    </h2>

                {% when "text" %}
                    <div class="{% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings %}>
                        <span class="desktop">{{ block.settings.text }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.text }}</span>
                    </div>

                {% when "button" %}
                    <a href="{{ block.settings.button_link }}" class="btn {% if section.settings.active_animations %}animated-element{% endif %}" {% render 'overwrite-theme-style', settings: block.settings %}>
                        <span class="desktop">{{ block.settings.button_label | escape }}</span>
                        <span class="mobile" style="{%- if block.settings.overwrite_theme_font_size_mobile != blank and block.settings.overwrite_theme_font_size_mobile > 0 -%}font-size: {{ block.settings.overwrite_theme_font_size_mobile }}px;{%- endif -%}">{{ block.settings.button_label | escape }}</span>
                    </a>

            {% endcase %}
        {%- endfor -%}
        </div>
    </div>

</div>

{% schema %}
{
    "name": "t:sections.section-video-banner.name",
    "settings": [
        {
            "type": "header",
            "content": "t:sections.section-video-banner.settings.info",
            "info": "t:sections.section-video-banner.settings.info_info"
        },
        {
            "type": "text",
            "id": "youtube_video_id",
            "label": "t:sections.section-video-banner.settings.youtube_video_id",
            "info": "t:sections.section-video-banner.settings.youtube_video_id_info"
        },
        {
            "type": "text",
            "id": "video_webm",
            "label": "t:sections.section-video-banner.settings.video_webm",
            "info": "t:sections.section-video-banner.settings.video_webm_info"
        },
        {
            "type": "text",
            "id": "video_mp4",
            "label": "t:sections.section-video-banner.settings.video_mp4"
        },
        {
            "type": "text",
            "id": "video_mov",
            "label": "t:sections.section-video-banner.settings.video_mov"
        },
        {
            "type": "header",
            "content": "t:sections.section-video-banner.settings.desktop_info"
        },
        {
            "type": "text",
            "id": "desktop_youtube_video_id",
            "label": "t:sections.section-video-banner.settings.youtube_video_id"
        },
        {
            "type": "text",
            "id": "desktop_video_webm",
            "label": "t:sections.section-video-banner.settings.video_webm",
            "info": "t:sections.section-video-banner.settings.video_webm_info"
        },
        {
            "type": "text",
            "id": "desktop_video_mp4",
            "label": "t:sections.section-video-banner.settings.video_mp4"
        },
        {
            "type": "text",
            "id": "desktop_video_mov",
            "label": "t:sections.section-video-banner.settings.video_mov"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "checkbox",
            "id": "mute_video",
            "label": "t:sections.section-video-banner.settings.mute_video",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "active_animations",
            "label": "t:sections.general.active_animations",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "full_width",
            "label": "t:sections.section-image-banner.settings.full_width",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "manually_play_pause",
            "label": "t:sections.section-video-banner.settings.manually_play_pause",
            "default": false
        },
        {
            "type": "select",
            "id": "alignment",
            "default": "center",
            "label": "t:sections.section-image-banner.settings.alignment",
            "options": [
                {
                    "value": "start",
                    "label": "t:sections.section-image-banner.settings.alignment_start"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-image-banner.settings.alignment_center"
                },
                {
                    "value": "end",
                    "label": "t:sections.section-image-banner.settings.alignment_end"
                }
            ]
        },
        {
            "type": "select",
            "id": "position",
            "default": "middle",
            "label": "t:sections.section-image-banner.settings.position",
            "options": [
                {
                    "value": "top",
                    "label": "t:sections.section-image-banner.settings.position_top"
                },
                {
                    "value": "middle",
                    "label": "t:sections.section-image-banner.settings.position_middle"
                },
                {
                    "value": "bottom",
                    "label": "t:sections.section-image-banner.settings.position_bottom"
                }
            ]
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-video-banner.settings.overwrite_theme_margin_top",
            "min": -30,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-image-banner.settings.overwrite_theme_margin_bottom",
            "min": -30,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        }
    ],
    "blocks": [
        {
            "type": "heading",
            "name": "t:sections.section-image-banner.blocks.heading.name",
            "settings": [
                {
                    "type": "richtext",
                    "id": "heading",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.heading"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.settings"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_background_color",
                    "label": "t:sections.section-video-banner.blocks.heading.settings.overwrite_theme_background_color"
                },
                {
                    "type": "checkbox",
                    "id": "background_color_rounded",
                    "label": "t:sections.section-video-banner.blocks.heading.settings.background_color_rounded",
                    "default": false
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-video-banner.blocks.heading.settings.overwrite_theme_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.section-video-banner.blocks.heading.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                }
            ]
        },
        {
            "type": "text",
            "name": "t:sections.section-image-banner.blocks.text.name",
            "settings": [
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.section-image-banner.blocks.text.settings.text"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.text.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                }
            ]
        },
        {
            "type": "button",
            "name": "t:sections.section-image-banner.blocks.button.name",
            "settings": [
                {
                    "type": "text",
                    "id": "button_label",
                    "label": "t:sections.section-image-banner.blocks.button.settings.button_label"
                },
                {
                    "type": "url",
                    "id": "button_link",
                    "label": "t:sections.section-image-banner.blocks.button.settings.button_link"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.section-video-banner.blocks.button.settings.overwrite_theme_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.section-video-banner.blocks.button.settings.overwrite_theme_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_background_color",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_background_color",
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_background_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size_mobile",
                    "label": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_mobile",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-image-banner.blocks.heading.settings.overwrite_theme_font_size_info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_text_color",
                    "info": "t:sections.section-image-banner.blocks.button.settings.overwrite_theme_text_color_info"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-video-banner.name"
        }
    ]
}
{% endschema %}