<ul class="flex flex-col gap-6">
  {% for category in categories %}
    <li class="grow">
      <div
        class="
          flex gap-2 bg-grey-150 flex-col justify-between p-5

          lg:flex-row lg:items-center lg:mb-3
        "
      >
        <div class="flex gap-3 items-center">
          <i class="text-2xl {{ category.icon }}"></i>
          <h2
            class="
              font-alt text-2xl leading-none mt-1

              lg:mt-0
            "
          >{{ category.name }}</h2>
        </div>

        {% if category.guarantor %}
          <a
            class="
              text-grey-250 duration-200 flex gap-3 items-center group

              hover:text-black hover:no-underline
            "
            href="{{ category.guarantor.url }}"
          >
            <div class="flex flex-nowrap gap-1">
              <div>
                Garant bodu:
              </div>
              <strong>
                <div
                  class="underline"
                >{{ category.guarantor.name }}</div>
              </strong>
            </div>

            <img
              class="
                rounded-full w-8 opacity-50 duration-200 hidden

                group-hover:opacity-100 lg:block
              "
              alt="Profilový obrázek {{ category.guarantor.name }}"
              src="{{ category.guarantor.image_source }}"
            >
          </a>
        {% endif %}
      </div>

      {% for point in category.points %}
        {% include 'patterns/molecules/popouts/popout_point.html' with name=point.name text=point.content %}
      {% endfor %}
    </li>
  {% endfor %}
</ul>
