{% macro comments(config) %}
{% if config.extra.comments and config.extra.comments.enabled %}
    <div id="comments" class="mt-12">
        {% if config.extra.comments.system == "giscus" %}
            <script src="https://giscus.app/client.js"
                data-repo="{{ config.extra.comments.repo }}"
                data-repo-id="{{ config.extra.comments.repo_id }}"
                data-category="{{ config.extra.comments.category }}"
                data-category-id="{{ config.extra.comments.category_id }}"
                data-mapping="{{ config.extra.comments.mapping | default(value='pathname') }}"
                data-strict="{{ config.extra.comments.strict | default(value='0') }}"
                data-reactions-enabled="{{ config.extra.comments.reactions_enabled | default(value='1') }}"
                data-emit-metadata="{{ config.extra.comments.emit_metadata | default(value='0') }}"
                data-input-position="{{ config.extra.comments.input_position | default(value='bottom') }}"
                data-theme="{{ config.extra.comments.theme | default(value='preferred_color_scheme') }}"
                data-lang="{{ config.extra.comments.lang | default(value='en') }}"
                crossorigin="anonymous"
                async>
            </script>
        {% elif config.extra.comments.system == "utterances" %}
            <script src="https://utteranc.es/client.js"
                repo="{{ config.extra.comments.repo }}"
                issue-term="{{ config.extra.comments.issue_term | default(value='pathname') }}"
                theme="{{ config.extra.comments.theme | default(value='github-light') }}"
                crossorigin="anonymous"
                async>
            </script>
        {% endif %}
    </div>
{% endif %}
{% endmacro comments %}