{% comment %}

    Bootstrap Card, https://getbootstrap.com/docs/5.1/components/card/

    E.G. --> {% include feature/card.html text="Some text" header="Example item" objectid="demo_004" %}

    Options:
    - "text" = main card text, can use markdown formatting (tip: use a Liquid capture to add more complex content)
    - "header" = card header text (in bar above card content)
    - "title" = card title text inside card content area
    - "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
    - "objectid" = the given object or link to external image will create a card cap image
    - "alt" = if adding an external image using objectid option, provide alt text for image
    - "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100"
    - "centered" = give "true" to add mx-auto class on the card to center it (don't use with float!)
    - "float" = will use responsive float utility to add float on desktop (will not float on mobile), choose from "start" (left) or "end" (right)

{%- endcomment -%}
{%- if include.objectid contains '/' -%}
{%- capture src -%}{{ include.objectid | relative_url }}{% endcapture %}
{%- capture alt -%}{{ include.alt | default: include.title }}{% endcapture %}
{%- elsif include.objectid -%}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture src -%}{{ item.image_small | default: item.object_location | relative_url }}{% endcapture %}
{%- capture alt -%}{{ item.image_alt_text | default: item.description | default: item.title }}{% endcapture %}
{%- endif -%}
<div class="narrow-content">
    <div class="card mb-3{% if include.float %} feature-float-{{ include.float }}{% endif %}{% if include.width %} feature-w-{{ include.width }}{% endif %}{% if include.centered %} mx-auto{% endif %}">
        {% if src %}<img class="card-img-top" src="{{ src }}" alt="{{ alt | escape }}">{%- endif -%}
        {% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
        <div class="card-body">
            {% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
            <div class="card-text">{{ include.text | markdownify }}</div>
        </div>
    </div>
</div>