<!-- components/oxi-section/cards -->
{{#if this.cards}}
    {{#if @def.vertical}}

        <div class="oxi-realm-cards-vertical col-md-10">
        {{#each this.cards as |card|}}
            <OxiBase::Button
                @button={{card._clickable}}
                class={{card.css_class}}
                class="card w-100 mx-0 my-4 p-0 text-start"
                style={{if card.color (concat "background-color: " card.color)}}
            >
                {{#if card.label}}
                    <div class="card-header w-100 text-body-secondary bg-dark-subtle text-light">
                        <h5 class="card-title">
                            {{defuse card.label}}
                        </h5>
                    </div>
                {{/if}}
                {{#if (or card.description card.image)}}
                    <div class="row gx-2 py-2">
                        {{#if card.image}}
                            <div class="col-md-2 text-center d-flex justify-content-center align-items-center">
                                <img src={{card.image}}/>
                            </div>
                        {{/if}}
                        <div class={{if card.image "col-md-10" "col-md-12"}}>
                            <div class="card-body">
                                {{#if card.description}}
                                    <p class="card-text">
                                        {{defuse card.description}}
                                    </p>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                {{/if}}
                {{#if card.footer}}
                    <div class="card-footer w-100 text-body-secondary text-center">
                        {{defuse card.footer}}
                    </div>
                {{/if}}
            </OxiBase::Button>
        {{/each}}
        </div>

    {{else}}

        <div class="oxi-realm-cards-grid row row-cols-1 row-cols-md-3 g-4">
        {{#each this.cards as |card|}}
            <div class="col">
                <OxiBase::Button
                    @button={{card._clickable}}
                    class={{card.css_class}}
                    class="card h-100 w-100 m-0 p-0 text-start align-items-center"
                    style={{if card.color (concat "background-color: " card.color)}}
                >
                    {{#if card.label}}
                        <div class="card-header w-100 text-body-secondary text-center bg-dark-subtle text-light">
                            <h5 class="card-title">
                                {{defuse card.label}}
                            </h5>
                        </div>
                    {{/if}}
                    {{#if card.image}}
                        <img src={{card.image}} class="m-3" />
                    {{/if}}
                    {{#if card.description}}
                        <div class="card-body">
                            <p class="card-text">
                                {{defuse card.description}}
                            </p>
                        </div>
                    {{/if}}
                    {{#if card.footer}}
                        <div class="card-footer w-100 text-body-secondary text-center">
                            {{defuse card.footer}}
                        </div>
                    {{/if}}
                </OxiBase::Button>
            </div>
        {{/each}}
        </div>

    {{/if}}
{{/if}}
