{% macro mediaBox(settings) %}

    {% set resourcePath = settings.resourcePath ?? null %}
    {% set resourceAltText = settings.resourceAltText ?? null %}
    {% set heading = settings.heading ?? null %}
    {% set body = settings.body ?? null %}
    {% set alignItems = settings.alignItems ?? null %}

    <div class="sprout-mediabox-outer">
        <div class="sprout-mediabox-inner"
            {% if alignItems %}style="align-items: {{ alignItems }};"{% endif %}>
            {% if resourcePath %}
                <div class="sprout-mediathumb">
                    {{ svg(resourcePath) }}
                </div>
            {% endif %}
            <div class="sprout-mediabody">
                <h2>{{ heading }}</h2>
                <hr>

                {{ body|raw }}

            </div>
        </div>
    </div>

{% endmacro %}

{% macro upgradeToProButton(settings) %}
    <div class="btngroup submit first">
        <a href="{{ settings.url }}" class="btn sprout-upgrade-to-pro" title="{{ settings.title ?? "Upgrade to Pro"|t('sprout-base') }}">
            {{ "Upgrade to Pro"|t('sprout-redirects') }} <span>{{ svg('@sproutbase/web/assets/cp/dist/images/sprout-icon-mask.svg') }}</span>
        </a>
    </div>
{% endmacro %}

{% macro upgradeToProCallout(settings) %}
    <div class="sprout-upgrade-to-pro-callout">
        <span class="icon">{{ svg('@sproutbase/web/assets/cp/dist/images/sprout-icon-mask.svg') }}</span> <p>{{ settings.message|markdown }}</p>
    </div>
{% endmacro %}

{% macro featureHeader(settings) %}
    {% set heading = settings.heading ?? null %}
    {% set message = settings.message ?? null %}
    {% set primaryButtonText = settings.primaryButtonText ?? null %}
    {% set primaryButtonLink = settings.primaryButtonLink ?? null %}
    {% set secondaryButtonText = settings.secondaryButtonText ?? null %}
    {% set secondaryButtonLink = settings.secondaryButtonLink ?? null %}

    <header>
        <h1>{{ settings.heading }}</h1>

        {% if message %}
            <p>{{ message|replace(
                    '[pro]', '<span class="sprout-pro">PRO</span>'
                )|markdown }}</p>
        {% endif %}

        <div class="buttons">
            {% if primaryButtonText and primaryButtonLink %}
                <a class="btn submit" href="{{ primaryButtonLink }}">
                    <span class="get-started-icon">{{ svg('@sproutbase/web/assets/cp/dist/images/sprout-icon-mask.svg') }}</span> {{ primaryButtonText }}
                </a>
            {% endif %}
            {% if secondaryButtonText and secondaryButtonLink %}
                <a class="btn" data-icon="world" href="{{ secondaryButtonLink }}">{{ secondaryButtonText }}</a>
            {% endif %}
        </div>
    </header>

{% endmacro %}

{% macro featureImage(settings) %}
    {% set imageUrl = settings.imageUrl ?? null %}
    {% set altText = settings.altText ?? null %}

    <div class="feature-image">
        <img src="{{ imageUrl }}" alt="{{ altText }}"/>
    </div>
{% endmacro %}

{% macro featureVideo(vimeoVideoId) %}
    <div class="feature-video">
        <iframe id="video" class="video" data-vimeo-id="{{ vimeoVideoId }}" src="https://player.vimeo.com/video/{{ vimeoVideoId }}" width="870" height="489" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
{% endmacro %}