{#
Title: Two Column Media + Text
Description: Two columns: content + image/video, with optional swap
Category: formatting
Icon: columns
Mode: preview
Align: full
SupportsAlign: full false
#}

{% extends '/views/parts/logic/block-settings.twig' %}

{% block blocksettings %}
    {% block twocolumnmediacta %}
        {% set gap = fields.column_gap ?: 100 %}
        {% set hasMedia = (fields.media_video and fields.media_video.url) or fields.media_image %}

        <section
                class="two-col-media-cta {{ outer_classes }} {% if fields.swap_sides %}two-col-media-cta--swapped{% endif %}"
                style="--two-col-gap: {{ gap }}px;"
        >
            <div class="{{ inner_classes }}">
                <div class="two-col-media-cta__grid">
                    <div class="two-col-media-cta__content">
                        {% if fields.title %}
                            <h3 class="two-col-media-cta__title">{{ fields.title }}</h3>
                        {% endif %}

                        {% if fields.body %}
                            <div class="two-col-media-cta__body">
                                {{ fields.body }}
                            </div>
                        {% endif %}

                        {% if fields.button and fields.button.url %}
                            <div class="two-col-media-cta__actions">
                                {% set button = fields.button %}
                                {{ include('views/parts/button.twig') }}
                            </div>
                        {% endif %}
                    </div>

                    {% if hasMedia %}
                        <div class="two-col-media-cta__media">
                            {% if fields.media_video and fields.media_video.url %}
                                <video class="two-col-media-cta__video" controls preload="metadata" playsinline>
                                    <source src="{{ fields.media_video.url }}" type="{{ fields.media_video.mime_type ?: 'video/mp4' }}">
                                </video>
                            {% elseif fields.media_image %}
                                {% set imgUrl = function('wp_get_attachment_url', fields.media_image) %}
                                {% set mime = function('get_post_mime_type', fields.media_image) %}
                                <div class="two-col-media-cta__image">
                                    {% if mime == 'image/svg+xml' %}
                                        <img src="{{ imgUrl }}" alt="" />
                                    {% else %}
                                        {{ function('wp_get_attachment_image', fields.media_image, 'large')|raw }}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </section>
    {% endblock %}
{% endblock %}