{%- macro nds_back_to_top(content) -%}
    {%- do kwargs.setdefault("_extra_class", "nsw-back-to-top js-back-to-top") -%}
    {{ ui.button(**kwargs) }}
{%- endmacro %}

{%- macro nds_callout(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-callout"}) }}>
        <div class="nsw-callout__content">
            {{ content }}
        </div>
    </div>
{%- endmacro %}

{%- macro nds_card(content, title, img, href, variant, tag, date, horizontal, icon="east") -%}
    {%- set class = "nsw-card" ~ (" nsw-card--" ~ variant if variant else "") -%}
    {%- if horizontal -%}
        {%- set class = class ~ " nsw-card--horizontal" -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {%- if img -%}
            <div class="nsw-card__image">
                <img src="{{ img }}" alt="{{ title }}">
            </div>
        {%- endif %}
        <div class="nsw-card__content">
            {%- if tag -%}
                <div class="nsw-card__tag">{{ tag }}</div>
            {%- endif %}
            {%- if date -%}
                <div class="nsw-card__date">{{ date }}</div>
            {%- endif %}

            <div class="nsw-card__title">
                <a href="{{ href }}">{{ title }}</a>
            </div>
            <div class="nsw-card__copy">
                {{ content }}
            </div>
            {{ ui.icon(icon) }}
        </div>
    </div>
{%- endmacro %}

{%- macro nds_card_carousel(content, title, drag, loop, navigation, pagination) -%}
    {%- set defaults = {
        "class": "nsw-carousel js-carousel",
        "data-description": title,
        "data-drag": "on" if drag else "off",
        "data-loop": "on" if loop else "off",
        "data-navigation": "on" if navigation or pagination else "off",
        "data-navigation-pagination": "on" if pagination else "off",
    } -%}
    <div {{ ui.util.attrs(kwargs, defaults) }}>
        <p class="sr-only">{{ _("Carousel items") }}</p>
        <div class="nsw-carousel__wrapper js-carousel__wrapper">
            <ol class="nsw-carousel__list">{{ content }}</ol>
        </div>
        <div class="nsw-carousel__header">
            <div class="nsw-carousel__title">
                {%- if title -%}
                    <h2>{{ title }}</h2>
                {%- endif %}
            </div>
            <nav aria-label="Carousel controls">
                <ul>
                    <li>
                        <button aria-label="{{ _('Show previous items') }}" class="nsw-carousel__control nsw-carousel__control--prev js-carousel__control">
                            <svg class="nsw-icon" viewBox="0 0 20 20">
                                <title>{{ _("Show previous items") }}</title>
                                <polyline points="13 2 5 10 13 18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="square" stroke-width="2" />
                            </svg>
                        </button>
                    </li>
                    <li>
                        <button aria-label="{{ _('Show next items') }}" class="nsw-carousel__control nsw-carousel__control--next js-carousel__control">
                            <svg class="nsw-icon" viewBox="0 0 20 20">
                                <title>{{ _("Show next items") }}</title>
                                <polyline points="7 2 15 10 7 18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="square" stroke-width="2" />
                            </svg>
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
{%- endmacro %}

{%- macro nds_card_carousel_item(content) -%}
    <li class="nsw-carousel__item">
        {{ ui.card(content, **kwargs) }}
    </li>
{%- endmacro -%}

{%- macro nds_content_block(content, title, image_content, list_items, link_content) -%}
    <mark {{ ui.util.attrs(kwargs) }}>NOT IMPLEMENTED</mark>
{%- endmacro %}

{%- macro nds_date_input_group(content, name, label, id, required, errors, value, datepicker) -%}
    {%- set value = value or [] -%}
    {%- set id = id or (name and "field-" ~ name) or ui.util.id() -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-form__group"}) }}>
        <fieldset class="nsw-form__date {{ 'nsw-date-input js-date-input' if datepicker }}" {{ ui.util.attrs({"data": datepicker} if datepicker is mapping) }}>
            {%- if label or content -%}
                <legend>
                    {%- if label -%}
                        <span class="nsw-form__label {{ 'nsw-form__required' if required }}">{{ label }}</span>
                    {%- endif %}
                    {%- if content -%}
                        <span class="nsw-form__helper">{{ content }}</span>
                    {%- endif %}
                </legend>
            {%- endif %}
            <div class="nsw-form__date-wrapper {{ 'nsw-date-input__wrapper js-date-input-multiple' if datepicker }}">
                <div class="nsw-form__date-input">
                    <label for="{{ id }}-day" class="nsw-form__label nsw-form__label--small">Day</label>
                    <input type="text" maxlength="2" id="{{ id }}-day" name="{{ name }}-day" autocomplete="bday-day" class="nsw-form__input {{ 'js-date-picker-date' if datepicker }}" aria-invalid="{{ 'true' if errors else 'false' }}" value="{{ value[2] }}">
                </div>
                <div class="nsw-form__date-input">
                    <label for="{{ id }}-month" class="nsw-form__label nsw-form__label--small">Month</label>
                    <input type="text" maxlength="2" id="{{ id }}-month" name="{{ name }}-month" autocomplete="bday-month" class="nsw-form__input {{ 'js-date-picker-month' if datepicker }}" aria-invalid="{{ 'true' if errors else 'false' }}"  value="{{ value[1] }}">
                </div>
                <div class="nsw-form__date-input nsw-form__date-input--large">
                    <label for="{{ id }}-year" class="nsw-form__label nsw-form__label--small">Year</label>
                    <input type="text" maxlength="4" id="{{ id }}-year" name="{{ name }}-year" autocomplete="bday-year" class="nsw-form__input {{ 'js-date-picker-year' if datepicker }}" aria-invalid="{{ 'true' if errors else 'false' }}" value="{{ value[0] }}">
                </div>
                {%- if datepicker -%}
                    <div class="nsw-date-input__button">
                        <button class="nsw-button nsw-button--dark nsw-button--flex js-date-input__trigger" type="button">
                            <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">calendar_today</span>
                        </button>
                    </div>
                {%- endif %}
            </div>
        </fieldset>
        {%- if errors -%}
            <span class="nsw-form__helper nsw-form__helper--error">
                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>
                <span>{{ errors|join(", ") }}</span>
            </span>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro nds_date_input(content, name, label, id, value, required, errors, datepicker) -%}
    {%- set id = id or (name and "field-" ~ name) or ui.util.id() -%}
    <div class="nsw-date-input js-date-input" {{ ui.util.attrs({"data": datepicker} if datepicker is mapping) }}>
        {%- if label or content -%}
            <legend>
                {%- if label -%}
                    <label for="{{ id }}" class="nsw-form__label {{ 'nsw-form__required' if required }}">{{ label }}</label>
                {%- endif %}
                {%- if content -%}
                    <span class="nsw-form__helper">{{ content }}</span>
                {%- endif %}
            </legend>
        {%- endif %}
        <div class="nsw-date-input__wrapper nsw-form__input-group nsw-form__input-group--icon">
            <input {{ ui.util.attrs(kwargs, {"class": "nsw-form__input js-date-input__text", "autocomplete": "off"}) }} type="text" id="{{ id }}" value="{{ value }}" name="{{ name }}" aria-invalid="{{ 'true' if errors else 'false' }}">
            <button class="nsw-button nsw-button--dark nsw-button--flex js-date-input__trigger" type="button">
                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">calendar_today</span>
            </button>
        </div>
        {%- if errors -%}
            <span class="nsw-form__helper nsw-form__helper--error">
                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>
                <span>{{ errors|join(", ") }}</span>
            </span>
        {%- endif %}
    </div>
{%- endmacro %}


{%- macro nds_global_alert(content, title, cookie_name, variant, dismissible=true) -%}
    {%- set class = "nsw-global-alert js-global-alert" -%}
    {%- if variant -%}
        {%- set class = class ~ " nsw-global-alert--" ~ variant -%}

    {%- endif %}

    <div {{ ui.util.attrs(kwargs, {"class": class, "role": "alert", "data-cookie-name": cookie_name}) }}>
        <div class="nsw-global-alert__wrapper">
            <div class="nsw-global-alert__content">
                {%- if title -%}
                    <div class="nsw-global-alert__title">{{ title }}</div>
                {%- endif %}
                {{ content }}
            </div>
            {%- if dismissible -%}
                <button class="nsw-icon-button js-close-alert" type="button" aria-expanded="true">
                    <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
                    <span class="sr-only">Close message</span>
                </button>
            {%- endif %}
        </div>
    </div>
{%- endmacro %}


{%- macro nds_hero_banner(content, color, img, lines, subtitle, extra_content) -%}
    {%- set class = "nsw-hero-banner nsw-hero-banner--wide" -%}
    {%- if color -%}
        {%- set class = class ~ " nsw-hero-banner--" ~ color -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        <div class="nsw-hero-banner__container">
            <div class="nsw-hero-banner__wrapper">
                <div class="nsw-hero-banner__content">
                    {{ content }}
                </div>
                {%- if subtitle or extra_content -%}
                    <div class="nsw-hero-banner__links">
                        <div class="nsw-hero-banner__list">
                            {%- if subtitle -%}
                                <div class="nsw-hero-banner__sub-title">{{ subtitle }}</div>
                            {%- endif %}
                            {{ extra_content }}
                        </div>
                    </div>
                {%- endif %}
                <div class="nsw-hero-banner__box">
                    {%- if img -%}
                        <img class="nsw-hero-banner__image" src="{{ img }}" alt=""/>
                    {%- elif lines -%}
                        <div class="nsw-hero-banner__lines"></div>
                    {%- endif %}
                </div>
            </div>
        </div>
    </div>
{%- endmacro %}


{%- macro nds_hero_search(content, title, intro, img, html_img, href=h.url_for("dataset.search"), search_name="q") -%}
    {%- set class = "nsw-section" -%}
    {%- if img -%}
        {%- set class = class ~ " nsw-section--image" ~ ("-html" if html_img else "")-%}
    {%- endif %}
    {%- set defaults = {"class": class} -%}
    {%- if img and not html_img -%}
        {%- do defaults.update({"style": "background-image: url({});".format(img)}) -%}
    {%- endif %}

    <div {{ ui.util.attrs(kwargs, defaults) }}>
        <div class="hero-search">
            <div class="nsw-container">
                <div class="hero-search__wrapper">
                    <div class="hero-search__content">
                        {%- if title -%}<h1>{{ title }}</h1>{%- endif %}
                        {%- if intro -%}<p class="nsw-intro">{{ intro }}</p>{%- endif %}
                        <form role="search" class="hero-search__form" action="{{ href }}">
                            <label class="sr-only nsw-form__label" for="{{ id }}">Search site for:</label>
                            <div class="nsw-form__input-group nsw-form__input-group--icon">
                                <input class="nsw-form__input" type="text" id="{{ id }}" name="{{ search_name }}" value="">
                                <button class="nsw-button nsw-button--dark nsw-button--flex" type="submit">
                                    {{ ui.icon("search") }}
                                    <span class="sr-only">Search</span>
                                </button>
                            </div>
                        </form>
                        {%- if content -%}
                            <div class="hero-search__suggested">{{ content }}</div>
                        {%- endif %}
                    </div>
                </div>
            </div>
        </div>
        {%- if img and html_img -%}
            <img src="{{ img }}" alt="Background image"/>
        {%- endif %}
    </div>
{%- endmacro %}


{%- macro nds_in_page_nav(content, title) -%}
    <nav {{ ui.util.attrs(kwargs, {"class": "nsw-in-page-nav"}) }}>
        {%- if title -%}
            <div class="nsw-in-page-nav__title">{{ title }}</div>
        {%- endif %}
        <ul>{{ content }}</ul>
    </nav>
{%- endmacro %}

{%- macro nds_in_page_nav_item(content, href) -%}
    <li>{{ ui.link(content, href=href, **kwargs) }}</li>
{%- endmacro %}


{%- macro nds_link_list(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-link-list"}) }}>
        <ul>{{ content }}</ul>
    </div>
{%- endmacro %}

{%- macro nds_link_list_item(content, href) -%}
    <li>
        {%- call ui.util.call(ui.link, href=href, **kwargs) -%}
            <span>{{ content }}</span>
            {{ ui.icon("east") }}
        {%- endcall %}
    </li>
{%- endmacro %}


{%- macro nds_sidebar_nav_item_with_subnav(content, title, href, active) -%}
    <li {{ ui.util.attrs(kwargs, {"class": "active" if active else ""}) }}>
        <a href="{{ href }}">{{ title }}</a>
        <ul>{{ content }}</ul>
    </li>
{%- endmacro %}


{%- macro nds_progress_indicator(content, step=0, total=0) -%}
    <div {{ ui.util.attrs(kwargs) }} class="nsw-progress-indicator">
        {%- if content -%}
            <div class="nsw-progress-indicator__count">{{ content }}</div>
        {%- endif %}
        {%- if total -%}
            <div class="nsw-progress-indicator__bar">
                {%- for i in range(total) -%}
                    <div {%- if i < step %} class="active"{%- endif %}></div>
                {%- endfor %}
            </div>
        {%- endif %}
    </div>
{%- endmacro %}


{%- macro nds_steps(content, variant, counter, size) -%}
    {#supplementary,light,dark#}
    {%- set class = "nsw-steps" -%}
    {%- if variant -%}
        {%- set class = class ~ " nsw-steps--" ~ variant -%}
    {%- endif %}
    {%- if counter -%}
        {%- set class = class ~ " nsw-steps--counters" ~ variant -%}
    {%- endif %}
    {%- if size -%}
        {%- set _size_map = {"sm": "small", "md": "medium"} -%}
        {%- set class = class ~ " nsw-steps--" ~ _size_map.get(size, size) -%}
    {%- endif %}

    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {{- content -}}
    </div>

{%- endmacro %}

{%- macro nds_step_item(content, title, fill, level=2) -%}
    {%- set class = "nsw-steps__item" ~ (" nsw-steps__item--fill" if fill else "") -%}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        <div class="nsw-steps__content">
            {{ ui.heading(title, level=level) if title }}
            {{ content }}
        </div>
    </div>
{%- endmacro %}

{%- macro nds_footer_section(content, title, href) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-footer__group"}) }}>
        {%- if title -%}
            <div class="nsw-footer__heading">
                {{ ui.util.tag(title, "a" if href else "", attrs={"href": href}) }}
            </div>
        {%- endif %}
        <ul>
            {{ content }}
        </ul>
    </div>
{%- endmacro %}