{%- set htmlElement = params.htmlElement if params.htmlElement else 'article' -%}
{%- set containerClasses = [params.classes] if params.classes else [] -%}
{%- if params.fullAreaClick and params.href and not params.actions -%}
  {%- set containerClasses = containerClasses.concat('tna-card--full-click') -%}
{%- endif -%}
{%- if params.horizontal -%}
  {%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
{%- endif -%}
{%- if params.horizontalOnSmall -%}
  {%- set containerClasses = containerClasses.concat('tna-card--horizontal-on-small') -%}
{%- endif -%}
{%- if params.horizontalFlipped -%}
  {%- set containerClasses = containerClasses.concat('tna-card--flipped') -%}
{%- endif -%}
{%- if params.horizontalSmallImage -%}
  {%- set containerClasses = containerClasses.concat('tna-card--horizontal-small-image') -%}
{%- endif -%}
{%- if params.style -%}
  {%- set containerClasses = containerClasses.concat('tna-card--padded') -%}
{%- endif -%}
{%- if params.style == "plain" -%}
  {%- set containerClasses = containerClasses.concat('tna-card--plain') -%}
{%- elseif params.style == "contrast" -%}
  {%- set containerClasses = containerClasses.concat('tna-background-contrast') -%}
{%- elseif params.style == "tint" -%}
  {%- set containerClasses = containerClasses.concat('tna-background-tint') -%}
{%- elseif params.style == "accent" -%}
  {%- set containerClasses = containerClasses.concat('tna-background-accent') -%}
{%- elseif params.style == "accent-light" -%}
  {%- set containerClasses = containerClasses.concat('tna-background-accent-light') -%}
{%- endif -%}
{%- set classes = containerClasses | join(' ') -%}
<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
  {%- if params.supertitle %}
  <hgroup class="tna-hgroup-{{ params.headingSize or 'm' }} tna-card__heading">
    <p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
    <h{{ params.headingLevel }} class="tna-hgroup__title">
      {%- if params.href %}
      <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
      {%- else %}
      {{ params.title }}
      {%- endif %}
    </h{{ params.headingLevel }}>
  </hgroup>
  {%- else %}
  <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }} tna-card__heading">
    {%- if params.href %}
    <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
    {%- else %}
    {{ params.title }}
    {%- endif %}
  </h{{ params.headingLevel }}>
  {%- endif %}
  {%- if params.imageSrc %}
    {%- if params.href and (not params.fullAreaClick or params.actions) %}
    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" aria-hidden="true" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
    {%- else %}
    <div class="tna-card__image-container">
    {%- endif %}
      <picture class="tna-card__image">
        {%- if params.imageSources %}
        {%- for source in params.imageSources %}
        <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
        {%- endfor %}
        <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
        {%- endif %}
        <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}"{%- if params.lazyImage %} loading="lazy"{% endif %}>
      </picture>
      {%- if params.label %}
      <div class="tna-chip{% if params.labelColour %} tna-chip--{{ params.labelColour }}{% endif %} tna-card__image-label">
        {{ params.label }}
      </div>
      {%- endif %}
    {%- if params.href and (not params.fullAreaClick or params.actions) %}
    </a>
    {%- else %}
    </div>
    {%- endif %}
  {%- endif %}
  {%- if params.meta or params.text or params.body or params.actions %}
    <div class="tna-card__body">
    {%- if params.meta %}
      <dl class="tna-card__meta tna-dl-chips{{ '' if params.accentMeta else ' tna-dl-chips--plain' }}{{ ' tna-dl-chips--stacked' if params.metaStacked else '' }}">
        {%- for item in params.meta %}
        <dt>{{ item.title }}</dt>
        <dd>
          <span class="tna-dl-chips__item">
            {%- if item.icon %}
            <i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i>
            {%- endif %}
            {{ item.text }}
          </span>
        </dd>
        {%- endfor %}
      </dl>
    {%- endif %}
    {%- if params.text %}
      <p>{{ params.text }}</p>
    {%- else %}
      {{ params.body | safe }}
    {%- endif %}
    {%- if params.actions %}
      <div class="tna-card__actions">
      {%- for item in params.actions %}
        <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} aria-label="{{ item.title }}" title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
          {{ item.text }}
        </a>
      {%- endfor %}
      </div>
    {%- endif %}
    </div>
  {%- endif %}
</{{ htmlElement }}>