{#
  Template for CARD w/ Image component. Requires following properties:
    - modifiers: classes used to modify the basic styling of pattern.
    - cardHeader: a string to be used as the header of the pattern.
    - cardContent: a string to be used as the main content of the pattern.
    - cardAction: a string url to be used as the main action of the pattern - a link to some other page or action.
#}

<div data-testid="mds-card-standard" class="mds-card {{ picture ? 'with-image mds-l-grid--cols-2' : '' }} {{modifiers}} {{variant}}">

    <!-- Image: Card optionally has an image. Conditionally display it. If it is not there, gracefully display Card without it. -->
    {% if picture %}
        <img data-testid="mds-card-w-image--img" src="{{picture}}" alt="{{pictureAlt}}" class="mds-card--image ">
    {% endif %}

    <!-- Card Body. Includes Header, Text, and Action. -->
    <div class="mds-card__wrapper {{ textAlignment }}">
        <!-- TODO: Might need a specific header component ? -->

        <strong class="mds-card__header">{{cardHeader}}</strong>

        <div class="mds-card__body">
            <p>{{cardContent | default("Card body text goes here.")}}</p>
        </div>

        <!-- Card Action. Uses Button component w/ buttonLink variant. - Renders a 'button'-like link.  Note the .mds-dark modifier, which causes the button to use 'dark-mode' - more suitable for a dark background. -->
        <!-- TODO: related to dark mode, need to document 'utilities' like 'mds-flex' etc. since I'm using them here and there. -->
            <!-- Uses the 'Secondary' button component w/ buttonLink, buttonFormAction etc.-->
        {%  block action %}
            {% include '@mds/button/button.twig' with {'buttonLink': true, 'button_label': cardButtonLabel, buttonFormAction:cardAction, 'button_modifiers': buttonStyle } %}
        {%  endblock %}
    </div>
</div>