{% assign services = site.data.services | where:'show', true %}

<div
    id="services-list"
    class="services-list accordion accordion-flush"
>
    {% for item in services %}
    <div class="service-item">
        <h2
            id="heading-{{ forloop.index }}"
            class="accordion-header"
        >
            {% assign icons_dir = "assets/images/icons/services/" %}
            {% assign icon_path = icons_dir | prepend: '/' | append: item.icon %}

            {% for static_file in site.static_files %}
                {% if static_file.path == icon_path %}
                    {% assign icon_exists = true %}

                    {% break %}
                {% endif %}
            {% endfor %}

            <button
                id="collapse-item-toggler-{{ forloop.index }}"
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-{{ forloop.index }}"
                aria-expanded="false"
                aria-controls="collapse-{{ forloop.index }}"
            >
                <span class="service-icon">
                    {% if icon_exists == true %}
                    <img src="{{ icons_dir }}{{ item.icon }}">
                    {% endif %}
                </span>

                {{ item.name }}
            </button>
        </h2>
        <div
            id="collapse-{{ forloop.index }}"
            class="collapse"
            aria-labelledby="heading-{{ forloop.index }}"
        >
            <div class="accordion-body">
                {{ item.info }}

                {% if item.url %}
                <p class="d-flex justify-content-between align-items-center pt-3">
                    {% comment %} Link to a documentation page {% endcomment %}
                    <a
                        href="{{ item.url }}"
                        class="btn btn-outline-dark"
                        role="button"
                    >
                        {{ item.name }} API pages
                    </a>

                    <button
                        type="button"
                        class="btn btn-link btn-hide-details d-flex align-items-center"
                        role="button"
                        onclick="document.getElementById('collapse-item-toggler-{{ forloop.index }}').click()"
                    >
                        Hide details
                    </button>
                </p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>