{{ style({ include: oViewConf.getVersionedModuleUrl("c4s_visual_cms_widgets", "out/src/css/c4s_card.css") }) }}

{% if image %}
    {% set imageSrc = oViewConf.getMediaUrl() ~ "/" ~ image %}
{% endif %}

<div class="row c4s-shortcode-{{ shortcode }} {{ class }}">
    <div class="col-12">
        {% if linkType and linkType == "card" and link %}
            <a class="text-decoration-none" href="{{ link }}" target="{{ linkTarget }}"{% if linkTarget == "_blank" %} rel="noopener"{% endif %}>
        {% endif %}
                <div class="card{% if not border %} border-0{% endif %}"
                     {% if backgroundColor %}style="background-color: {{ backgroundColor }};"{% endif %}
                >
                    {% if header %}
                        <div class="card-header">
                            {{ header }}
                        </div>
                    {% endif %}

                    {% if imageSrc and imagePosition == "top" %}
                        <img src="{{ imageSrc }}" class="card-img-top">
                    {% endif %}

                    {% if content and content|trim|length > 11 %}
                        <div class="card-body{% if not border and not backgroundColor %} p-0{% endif %}{% if imageSrc %}{% if imagePosition == "top" %} pt-3{% else %} pb-3{% endif %}{% endif %}">
                            <div class="card-text">
                                {{ content|raw }}
                            </div>

                            {% if linkType and linkType == "button" and link and buttonText %}
                                <a class="btn btn-{{ buttonStyle }} mt-3{% if buttonFullwidth %} d-block w-100{% endif %}"
                                   href="{{ link }}"
                                   target="{{ linkTarget }}"
                                   {% if linkTarget == "_blank" %} rel="noopener"{% endif %}
                                >{{ buttonText }}</a>
                            {% endif %}
                        </div>
                    {% endif %}

                    {% if imageSrc and imagePosition == "bottom" %}
                        <img src="{{ imageSrc }}" class="card-img-bottom">
                    {% endif %}

                    {% if footer %}
                        <div class="card-footer">
                            {{ footer }}
                        </div>
                    {% endif %}
                </div>
        {% if linkType and linkType == "card" and link %}
            </a>
        {% endif %}
    </div>
</div>