{%- macro add_comments(comment_system, automatic_loading) -%}

<div id="comments" class="comments centered-text"
{% if comment_system == "giscus" %}
    {# Store required giscus data attributes in the div #}
    data-repo="{{ config.extra.giscus.repo }}"
    data-repo-id="{{ config.extra.giscus.repo_id }}"
    data-category="{{ config.extra.giscus.category }}"
    data-category-id="{{ config.extra.giscus.category_id }}"
    {% if config.extra.giscus.mapping == "slug" %}
        data-mapping="specific"
        data-term="{{ page.slug }}"
    {% else %}
        data-mapping="{{ config.extra.giscus.mapping }}"
    {% endif %}
    data-strict="{{ config.extra.giscus.strict_title_matching }}"
    data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}"
    {% if config.extra.giscus.comment_box_above_comments %}
        data-input-position="top"
    {% else %}
        data-input-position="bottom"
    {% endif %}
    data-light-theme="{{ config.extra.giscus.light_theme }}"
    data-dark-theme="{{ config.extra.giscus.dark_theme }}"
    {% if config.extra.giscus.lang  %}
        data-lang="{{ config.extra.giscus.lang }}"
    {% else %}
        data-lang="{{ lang }}"
    {% endif %}
    data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">

{% elif comment_system == "utterances" %}
    {# Store required utterances data attributes in the div #}
    data-repo="{{ config.extra.utterances.repo }}"
    {% if config.extra.utterances.issue_term == "slug" %}
        data-issue-term="{{ page.slug }}"
    {% else %}
        data-issue-term="{{ config.extra.utterances.issue_term }}"
    {% endif %}
    data-label="{{ config.extra.utterances.label }}"
    data-light-theme="{{ config.extra.utterances.light_theme }}"
    data-dark-theme="{{ config.extra.utterances.dark_theme }}"
    data-lazy-loading="{{ config.extra.utterances.lazy_loading | default(value=true) }}">
{% endif %}
</div>

{% if automatic_loading %}
    <script src="{{ get_url(path='js/' ~ comment_system ~ '_min.js', trailing_slash=false) | safe }}" async></script>
{% else %}
    <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/' ~ comment_system ~ '_min.js', trailing_slash=false) | safe }}">...</button>
    <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
{% endif %}

{%- endmacro add_comments -%}