<section class="p-4 my-8 bg-white shadow-xl sm:p-8 xl:p-16">
{% if app.user and profile.organisations %}
<div class="grid grid-cols-12 gap-6 px-4 py-6 md:px-8 md:py-12 odd:bg-neutral-50">
<div class="col-span-12 md:col-span-4">
<h3 class="font-medium font-headline">
{{ 'organisations'|trans }}
{% if user.id is defined and profile.id == user.id %}
<small class="underline lowercase"><a href="{{ path('profile_admin_organisations_index') }}">({{ 'edit'|trans }})</a></small>
{% endif %}
</h3>
</div>
<ul class="grid grid-cols-1 col-span-12 gap-5 md:gap-3 md:col-span-8 md:grid-cols-2 lg:grid-cols-3">
{% for organisation in profile.organisations %}
<li class="">
{% if organisation.classname == "Club" %}
<a class="flex items-start gap-6 md:gap-3 {{ organisation.website ? "underline" }}" {{ organisation.website ? "href=" ~ organisation.website ~"" }} target="_blank" rel="noopener noreferrer">
{% if organisation.avatar %}
{{ organisation.avatar.thumbnail('profile-favicon').html({ imgAttributes: { class: "w-8 h-8 -mt-1 md:mt-1 md:w-4 md:h-4"}})|raw }}
{% endif %}
<span class="uppercase">{{ organisation.name }} </span>
</a>
{% endif %}
{% if organisation.classname == "Association" %}
<a class="flex items-start gap-6 md:gap-3 {{ organisation.website ? "underline" }}" {{ organisation.website ? "href=" ~ organisation.website.href ~"" }} target="_blank" rel="noopener noreferrer">
{% if organisation.logo %}
{{ organisation.logo.thumbnail('profile-favicon').html({ imgAttributes: { class: "w-8 h-8 -mt-1 md:mt-1 md:w-4 md:h-4"}})|raw }}
{% endif %}
<span class="uppercase">{{ organisation.name }} </span>
</a>
{% endif %}
{% if organisation.classname == "Profile" %}
<a class="flex items-start gap-6 underline md:gap-3" href="{{ pimcore_url({object: organisation}) }}">
{% include "component/avatar.html.twig" with {
avatar: organisation.avatar,
initials: organisation.name|initials,
size: "tiny"
} only %}
<span class="uppercase">{{ organisation.name }} </span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% elseif not app.user %}
<div class="container">
<h2 class="text-xl font-medium text-black uppercase mb-7 md:text-xl font-headline">
{{ 'organisations'|trans }}
</h2>
{% include 'network/profile/components/login_required_hint.html.twig' %}
</div>
{% else %}
<div class="">
<h2 class="text-xl font-medium text-black uppercase mb-7 md:text-xl font-headline">
{{ 'organisations'|trans }}
{% if user.id is defined and profile.id == user.id %}
<small class="underline lowercase">
<a data-turbo='false' target="_top" href="{{ path('profile_admin_organisations_index') }}">({{ 'edit'|trans }})</a>
</small>
{% endif %}
</h2>
<div class="text-black">
{{ 'no.profile.organisations.available'|trans }}
</div>
{% endif %}
</section>