{% load i18n %}
<div class="my-4 border-b-4 border-section-primary-light dark:border-section-primary-dark pb-2 animate-pulse">
  <span class="border-b-4 border-section-secondary-light dark:border-section-secondary-dark pb-2 font-semibold text-section-text-light dark:text-section-text-dark">
    <span class="px-2">{% trans 'Comments' %}</span>
  </span>
</div>

<div class="animate-pulse pt-4">
    <div class="rounded-lg border-2 border-gray-200 p-2">
        <div class="mb-2 flex justify-between">
            <div class="inline-block content-center">
                <svg class="inline-block w-12 h-12 rounded-full fill-gray-300 ltr:mr-2 rtl:ml-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
                </svg>
                <span class="inline-block h-4 w-36 rounded-full bg-gray-300"></span>
            </div>
        </div>
        <div class="flex flex-col space-y-2">
            <div class="w-full rounded-full bg-gray-200 p-2"></div>
            <div class="w-full rounded-full bg-gray-200 p-2"></div>
            <div class="w-full rounded-full bg-gray-200 p-2"></div>
        </div>
        <div class="h mt-2 flex justify-end">
            <span class="grid h-6 w-16 place-self-center rounded-full bg-gray-300 px-1"></span>
        </div>
    </div>
</div>