{% extends '@ddoevisualcms/shortcodes/shared/background.html.twig' %}

{% block content %}
    {{ script({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/hero.min.js') }) }}
    {{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/hero.min.css') }) }}

    <div class="dd-shortcode-{{ shortcode }} dd-hero-box{% if fixed_height %} dd-hero-fixed{% endif %}{% if class %} {{ class }}{% endif %} d-flex justify-content-center align-items-center">
        <div class="{% if introWidth == 1 %}container-xxl{% else %}container-fluid{% endif %}">
            <div class="row">
                <div class="col-12 col-sm-{{ colSize }}">
                    <div class="card bg-transparent border-0">
                        <div class="card-img-overlay-content"{% if color %} style="color: {{ color }};"{% endif %}>
                            {% if headline %}
                                <div class="card-title h2 mb-3">{{ headline }}</div>
                            {% endif %}
                            <p class="d-inline card-text">{{ content|raw }}</p>
                            {% if cta and cta_url %}
                                <a href="{{ cta_url }}" class="btn btn-outline-dark rounded-5 me-auto"{% if color %} style="color: {{ color }}; border-color: {{ color }}"{% endif %}>
                                    {{ cta|raw }}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}