{#
Title: Hero Plain
Description: Standard Page Hero
Category: formatting
Icon: admin-comments
Keywords: hero title header h1
Mode: preview
Align: full
SupportsAlign: full false
#}
{% extends '/views/parts/logic/block-settings.twig' %}
{% block blocksettings  %}
    {% block HeroPlain %}
        {% set bgVideo = fields.background_video %}
        {% set bgImageId = fields.background_image ?: null %}
        {% set bgImageUrl = bgImageId ? function('wp_get_attachment_image_url', bgImageId, 'full') : '' %}

        <div
                class="hero hero-plain {{ outer_classes }}
                   {% if bgVideo and bgVideo.url %}hero-plain--has-video{% endif %}
                   {% if fields.overlay_header %}hero-plain--overlay-header{% endif %}"
                {% if (not (bgVideo and bgVideo.url)) and bgImageUrl %}
                    style="background-image: url('{{ bgImageUrl }}');"
                {% endif %}
        >
            {% if bgVideo and bgVideo.url %}
                <div class="hero-plain__bg" aria-hidden="true">
                    <video
                            class="hero-plain__bg-video"
                            autoplay
                            muted
                            loop
                            playsinline
                            preload="metadata"
                            {% if bgImageUrl %}poster="{{ bgImageUrl }}"{% endif %}
                    >
                        <source src="{{ bgVideo.url }}" type="{{ bgVideo.mime_type ?: 'video/mp4' }}">
                    </video>
                </div>
            {% endif %}

            <div class="content align-content-center {{ inner_classes }}">
                <h1>{{ fields.main_header }}</h1>
                <div class="tag-line">{{ fields.tag_line }}</div>
                {% for buttons in fields.buttons %}
                    {% for button in buttons %}
                        {{ include('views/parts/button.twig') }}
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    {% endblock %}
{% endblock %}