{#
    This code is part of eleventy-layout-nacara.

    Changes to this files will be overwritten on the next build.

    If you want to make changes please create an issue or send a PR to:
    https://github.com/MangelMaxime/eleventy-layout-nacara
#}
{# Only generate a footer if one of the properties is present #}
{% set footer = footer.nacara %}
{% if footer | length %}
    <footer class="footer">
        <div class="is-size-5">
            {# Add the sitemap if present #}
            {% if footer.sitemapSections %}
                <div class="sitemap">
                    {% for sitemapSection in footer.sitemapSections %}
                        {#
                        Note: We can't use macro to structure the code because macro can't use
                        asynchronous functions and we need to call `to_icon` filter which
                        is asynchronous...

                        See: https://github.com/mozilla/nunjucks/issues/1252
                    #}
                        <div class="sitemap-section">
                            <div class="sitemap-section-title">
                                {{ sitemapSection.title }}
                            </div>
                            <ul class="sitemap-section-list">
                                {% for sectionItem in sitemapSection.items %}
                                    <li>
                                        <a href="{{ sectionItem.url }}" class="icon-text sitemap-section-list-item">
                                            {# Icon is optional #}
                                            {% if sectionItem.icon %}
                                                <span class="icon">
                                                    {{ sectionItem.icon | to_icon | safe }}
                                                </span>
                                            {% endif %}
                                            <span class="sitemap-section-list-item-text">
                                                {{ sectionItem.label }}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            {# Add optional text if present #}
            {% if footer.text %}
                <p class="has-text-centered">
                    {{ footer.text | safe }}
                </p>
            {% endif %}

            {# Add copyright information if present #}
            {% if footer.copyright %}
                <p class="has-text-centered">
                    Copyright ©
                    {{ footer.copyright.startDate }}-<span id="copyright-end-year"></span>
                    {{ footer.copyright.attribution | safe }}
                </p>

                {# Add script to update the end year of the copyright automatically #}
                <script type="text/javascript">
                    // Use IIFE to avoid polluting the global scope
                    // This also avoid conflict because of `const year` on the components/footer page
                    (function () {
                        const year = new Date().getFullYear();
                        document
                            .getElementById('copyright-end-year')
                            .innerHTML = year;
                    })();
                </script>
            {% endif %}
        </div>
    </footer>
{% endif %}