{% if contacts|length > 0 %}
    <div class="side-panel">
        <ul role="list" class="divide-y divide-gray-100">
            <li class="flex flex-col justify-between gap-x-6">
                <div class="divide-y divide-slate-400/20 bg-white text-[0.8125rem] px-5">
                    <div class="p-3 text-lg font-semibold text-gray-600 text-center"><i
                            class="fas fa-id-card fa-sm mr-1 text-gray-600/90"></i>Contacts</div>
                    <div>
                        <ul role="list" class="divide-y divide-gray-100">

                            {%- for contact in contacts %}
                            <li class="py-2 justify-between text-sm text-gray-400 hover:text-gray-600 text-center">
                                <a class="hover:text-sky-700" href="{{ contact.address }}">
                                    <i class="ml-1 mr-0.5 {{ contact.icon }}"></i> {{ contact.name }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
{% endif %}