{%- capture html_banner %}
{%- comment %}
    Usage:
        {% include base/banner.html %}

    Optional Parameters:
        * name          (string) : ""
        * image         (string) : ""
        * image_height  (string) : "92"
        * icon          (string) : ""
        * description   (string) : ""
        * actions       (list)   : [{"name":"","url":""}]
        * resources     (list)   : [{"name":"","url":"","icon":""}]

    Output:
        Page banner.
{%- endcomment %}

{%- assign image        = page.with_banner.image         | default: include.image %}
{%- assign image_height = page.with_banner.image_height  | default: include.image_height | default: '92' %}
{%- assign icon         = page.with_banner.icon          | default: include.icon %}
{%- assign name         = page.with_banner.name          | default: include.name %}
{%- assign description  = page.with_banner.description   | default: include.description %}
{%- assign actions      = page.with_banner.actions       | default: include.actions %}
{%- assign resources    = page.with_banner.resources     | default: include.resources %}

{%- capture html_banner_image -%}
  {%- if name == nil and description == nil and actions == nil and resources == nil %}
  {%- assign mb = "1" %}
  {%- else %}
  {%- assign mb = "5" %}
  {%- endif %}
  <div class="mt-1 mb-{{ mb }}"><img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ image }}" height="{{ image_height }}" alt="{{ name }}"></div>
{%- endcapture %}

{%- capture html_banner_icon -%}
  {%- if name == nil and description == nil and actions == nil and resources == nil %}
  {%- assign mb = "1" %}
  {%- else %}
  {%- assign mb = "5" %}
  {%- endif %}
  <div class="display-4 mb-{{ mb }}"><i class="{{ icon }}"></i></div>
{%- endcapture %}

{%- capture html_banner_name -%}
  <div class="display-4 fw-bold mb-1">{{ name }}</div>
{%- endcapture %}

{%- capture html_banner_description -%}
  {%- if actions == nil and resources == nil %}
  {%- assign mb = "1" %}
  {%- else %}
  {%- assign mb = "3" %}
  {%- endif %}
  <div class="lead mb-{{ mb }}">{{ description }}</div>
{%- endcapture %}

{%- capture html_banner_actions -%}
  <div class="d-flex align-items-start">
    {%- for action in actions %}
    <div class="me-1 mb-1">{% include base/link.html class="btn btn-primary text-nowrap" role="button" name=action.name url=action.url %}</div>
    {% endfor %}
  </div>
{%- endcapture %}

{%- capture html_banner_resources -%}
  <div class="d-flex bg-primary text-bg-primary text-center rounded-bottom">
    {%- for resource in resources %}
    <div class="col d-grid">
    {% include base/link.html class="btn btn-primary text-nowrap" role="button" name=resource.name url=resource.url icon=resource.icon %}
    </div>
    {%- endfor %}
  </div>
{%- endcapture -%}
<div class="d-flex justify-content-center bg-dark bg-image text-bg-dark px-3 rounded-top{% if resources == nil %} rounded-bottom{% endif %}">
  <div class="col-sm-12 col-lg-8 py-5">
    {%- if image %}{{ html_banner_image }}{% endif %}
    {%- if icon %}{{ html_banner_icon }}{% endif %}
    {%- if name %}{{ html_banner_name }}{% endif %}
    {%- if description %}{{ html_banner_description }}{% endif %}
    {%- if actions.size > 0 %}{{ html_banner_actions }}{% endif %}
  </div>
</div>
{%- if resources.size > 0 %}{{ html_banner_resources }}{% endif %}
{%- endcapture -%}
{{- html_banner -}}