{%- capture html_card %}
{%- comment %}
    Usage:
        {% include base/card.html %}

    Optional Parameters:
        * image                 (string) : ""
        * image_class           (string) : ""
        * image_alt             (string) : ""
        * image_height          (string) : "92"
        * icon                  (string) : ""
        * icon_class            (string) : ""
        * name                  (string) : ""
        * name_class            (string) : ""
        * screenshot            (string) : ""
        * screenshot_class      (string) : ""
        * screenshot_alt        (string) : ""
        * description           (string) : ""
        * description_class     (string) : ""
        * actions               (list)   : [{"name":"","url":""}]
        * actions_class         (string) : ""

    Output:
        HTML for presentation card.
{%- endcomment %}

{%- assign card_image              = include.image             | default: nil %}
{%- assign card_image_class        = include.image_class       | default: "mb-4" -%}
{%- assign card_image_height       = include.image_height      | default: 92 %}
{%- assign card_image_alt          = include.image_alt         | default: card_image %}
{%- assign card_icon               = include.icon              | default: nil %}
{%- assign card_icon_class         = include.icon_class        | default: "display-4 mb-4" %}
{%- assign card_name               = include.name              | default: nil %}
{%- assign card_name_class         = include.name_class        | default: "display-2 fw-bold mb-1" %}
{%- assign card_screenshot         = include.screenshot        | default: nil %}
{%- assign card_screenshot_class   = include.screenshot_class  | default: "img-fluid rounded" %}
{%- assign card_screenshot_alt     = include.screenshot_alt    | default: card_screenshot %}
{%- assign card_description        = include.description       | default: nil %}
{%- assign card_description_class  = include.description_class | default: "lead mb-3" %}
{%- assign card_actions            = include.actions           | default: nil %}
{%- assign card_actions_class      = include.actions_class     | default: "d-grid gap-2 d-lg-block" %}

{%- capture html_card_screenshot -%}
<img class="{{ card_screenshot_class }}" src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ card_screenshot }}" alt="{{ card_screenshot_alt }}">
{%- endcapture %}

{%- capture html_card_image -%}
<img class="{{ card_image_class }}" src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ card_image }}" height="{{ card_image_height }}" alt="{{ card_image_alt }}">
{%- endcapture %}

{%- capture html_card_icon -%}
<div class="{{ card_icon_class }}"><i class="{{ card_icon }}"></i></div>
{%- endcapture %}

{%- capture html_card_name -%}
<div class="{{ card_name_class }}">{{ card_name }}</div>
{%- endcapture %}

{%- capture html_card_description -%}
<div class="{{ card_description_class }}">{{ card_description }}</div>
{%- endcapture %}

{%- capture html_card_actions -%}
<div class="{{ card_actions_class }}">
  {%- for action in card_actions %}
  {% include base/link.html
      class="btn btn-primary text-nowrap mb-1"
      role="button"
      name=action.name
      url=action.url
      icon=action.icon
      icon_position=action.icon_position
  %}
  {% endfor %}
</div>
{%- endcapture %}

<div class="d-flex flex-wrap align-items-center">
  {%- if card_screenshot -%}
  <div class="col-sm-12 col-xl-5 p-3">
    {{ html_card_screenshot }}
  </div>
  <div class="col-sm-12 col-xl-7 p-3">
  {%- else -%}
  <div class="col-sm-12 p-3">
  {%- endif -%}
    {%- if card_image %}{{ html_card_image }}{% endif %}
    {%- if card_icon %}{{ html_card_icon }}{% endif %}
    {%- if card_name %}{{ html_card_name }}{% endif %}
    {%- if card_description %}{{ html_card_description }}{% endif %}
    {%- if card_actions.size > 0 %}{{ html_card_actions }}{% endif %}
  </div>
</div>
{%- endcapture -%}
{{- html_card -}}