{% from "components/icon/_macro.njk" import onsIcon %}

{% macro onsHero(params) %}

    {# Set number of columns used for hero content after medium breakpoint #}
    {% set detailsColumns = params.detailsColumns | default ('8') %}

    <section
        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
    >
        {% if params.variants == 'navy-blue' %}
            <div class="ons-hero__circles" aria-hidden="true">
                {% for i in range(1, 13) %}
                    <div class="ons-hero__circle-{{ i }}"></div>
                {% endfor %}
            </div>
        {% elif params.variants == 'pale-blue' %}
            <div class="ons-hero__circles" aria-hidden="true">
                {% for i in range(1, 3) %}
                    <div class="ons-hero__circle-{{ i }}"></div>
                {% endfor %}
            </div>
        {% endif %}
        <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
            <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
                <div class="ons-hero__content">
                    <div class="ons-hero__title-container">
                        <header>
                            <div class="ons-hero__title-wrapper">
                                <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>

                                {% if params.topic %}
                                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                                {% endif %}
                            </div>

                            {% if params.subtitle %}
                                <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
                            {% endif %}
                        </header>

                        {% if params.text %}
                            <p class="ons-hero__text">{{ params.text | safe }}</p>
                        {% elif params.richText %}
                            <div class="ons-hero__richtext">{{ params.richText | safe }}</div>
                        {% endif %}

                    </div>

                    {% if params.variants == "grey" and params.officialStatisticsBadge == true %}
                        <div class="ons-hero__badge ons-u-mb-s">
                            {% if params.officialStatisticsBadgeUrl %}
                                <a
                                    href="{{ params.officialStatisticsBadgeUrl }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="ons-hero__badge-link"
                                >
                                    {{-
                                        onsIcon({
                                            "iconType": 'official-statistics'
                                        })
                                    -}}
                                </a>
                            {% else %}
                                {{-
                                    onsIcon({
                                        "iconType": 'official-statistics'
                                    })
                                -}}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
                {% if params.variants == "grey" %}
                    {% if params.censusLogo == true %}
                        <div class="ons-hero__census-logo">
                            {{-
                                onsIcon({
                                    "iconType": 'census-logo'
                                })
                            -}}
                        </div>
                    {% endif %}
                    {% if params.informationPanel %}
                        <div class="ons-hero__information ons-u-mt-s">
                            <div class="ons-hero__panel ons-hero__panel--{{ params.informationPanel.panelType }}">
                                <h2 class="ons-u-fs-r--b ons-u-m-no">{{- params.informationPanel.panelText -}}</h2>
                            </div>
                            <div class="ons-hero__link">
                                <a
                                    href="{{ params.informationPanel.panelLink.url }}"
                                    {% if params.informationPanel.panelLink.ariaLabel %}
                                        aria-label="{{ params.informationPanel.panelLink.ariaLabel }}"
                                    {% endif %}
                                >
                                    {{ params.informationPanel.panelLink.text }}
                                </a>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}

                {% if params.button %}
                    {% from "components/button/_macro.njk" import onsButton %}
                    {% set btnClasses = params.button.classes if params.button.classes else '' %}
                    {% if params.variants and 'dark' in params.variants %}
                        {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
                    {% endif %}
                    {{
                        onsButton({
                            "classes": 'ons-u-mt-s' + btnClasses,
                            "type": 'button',
                            "text": params.button.text,
                            "url": params.button.url
                        })
                    }}
                {% endif %}
                {% if caller %}
                    <div class="ons-hero__additional-content">{{- caller() -}}</div>
                {% endif %}

                {% if params.descriptionList %}
                    {% from "components/description-list/_macro.njk" import onsDescriptionList %}
                    {{
                        onsDescriptionList({
                            "classes": "ons-u-mb-no ons-u-mt-s ons-u-mt-l@l",
                            "variant": 'inline',
                            "termCol": params.descriptionList.termCol,
                            "descriptionCol": params.descriptionList.descriptionCol,
                            "itemsList": params.descriptionList.itemsList
                        })
                    }}
                {% endif %}
            </div>

            {% if params.html %}
                <div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
            {% endif %}
        </div>
    </section>
{% endmacro %}