templates/areas/team-archive-brick/partials/_loop.html.twig line 1

Open in your IDE?
  1. {% if employees is empty %}
  2.     {% if editmode %}
  3.         <div class="alert alert-danger">
  4.             Er zijn nog geen Contactpersoon-dataobjecten beschikbaar in deze taal.
  5.             Stel per contactpersoon in of deze actief moeten zijn per taal.
  6.         </div>
  7.     {% endif %}
  8. {% else %}
  9.     <div class="grid grid-cols-12 gap-8">
  10.         {% set sortedEmployees = employees | sort((a, b) => (pimcore_numeric('employee-order-' ~ a.id).data ?: 9223372036854775807) <=> (pimcore_numeric('employee-order-' ~ b.id).data ?: 9223372036854775807)) %}
  11.         {% for employee in sortedEmployees %}
  12.             <div class="col-span-12 p-6 text-gray-900 bg-white rounded-md md:col-span-6 lg:col-span-4">
  13.                 {% if editmode %}
  14.                     <div>
  15.                         <label style="display:flex; flex-direction: row; align-items: center; margin-bottom: 16px;">
  16.                             <span>{{ "Volgorde" | trans }}&nbsp;&nbsp;</span>
  17.                             <span>{{ pimcore_numeric('employee-order-' ~ employee.id, { minValue: 1 }) }}</span>
  18.                         </label>
  19.                     </div>
  20.                 {% endif %}
  21.                 {% if employee.branchesList %}
  22.                 <span class="inline-block px-3 py-1 mb-8 text-xs font-bold bg-blue-200 rounded-full">
  23.                     {{ employee.branchesList }}
  24.                 </span>
  25.                 {% endif %}
  26.                 <div class="flex justify-between w-full mb-4">
  27.                     <div class="mb-4">
  28.                         <span class="block mb-2 text-2xl font-bold">{{ employee.name }}</span>
  29.                         <span class="block mb-2 text-lg">{{ employee.function }}</span>
  30.                         <span class="block text-lg text-gray-800">{{ employee.translatedRegion }}</span>
  31.                     </div>
  32.                     <div class="shrink-0 h-[100px] w-[100px] bg-gray rounded-full overflow-hidden">
  33.                         {% if employee.image %}
  34.                             {{ employee.image.thumbnail('employee-photo').html|raw }}
  35.                         {% endif %}
  36.                     </div>
  37.                 </div>
  38.                 <div class="flex flex-col gap-5 mb-2">
  39.                     {% if employee.email %}
  40.                         <a href="mailto:{{ employee.email }}"
  41.                            target="_blank"
  42.                            class="flex items-center text-gray-800 hover:text-blue-500">
  43.                             <span class="block w-6 h-5 mr-5">
  44.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20"><path fill="#0072BB" fill-rule="evenodd" d="M2.4 16.8V6.647l9.113 4.05c.31.138.665.138.974 0l9.113-4.05v10.155H2.4ZM21.6 2.4v1.62L12 8.288 2.4 4.02V2.4h19.2ZM24 4.778V1.2c0-.664-.536-1.2-1.2-1.2H1.2A1.2 1.2 0 0 0 0 1.2V18a1.2 1.2 0 0 0 1.2 1.2h21.6A1.2 1.2 0 0 0 24 18V4.777Z"/></svg>
  45.                             </span>
  46.                             {{ "Stuur mij een mail"|trans }}
  47.                         </a>
  48.                     {% endif %}
  49.                     {% if employee.linkedin %}
  50.                         <a href="{{ employee.linkedin }}" target="_blank" class="flex items-center text-gray-800 hover:text-blue-500">
  51.                             <span class="block w-6 h-6 mr-5">
  52.                                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path fill="#0072BB" fill-rule="evenodd" d="M22.286 0H1.709C.766 0 0 .777 0 1.73v20.54C0 23.223.766 24 1.709 24h20.577c.943 0 1.714-.777 1.714-1.73V1.73C24 .777 23.229 0 22.286 0ZM7.254 20.571H3.696V9.118H7.26V20.57h-.005ZM5.475 7.554a2.063 2.063 0 0 1 0-4.125c1.136 0 2.063.926 2.063 2.062a2.06 2.06 0 0 1-2.063 2.063ZM20.587 20.57H17.03V15c0-1.329-.026-3.037-1.848-3.037-1.853 0-2.137 1.446-2.137 2.94v5.668H9.488V9.118H12.9v1.564h.048c.477-.9 1.64-1.848 3.37-1.848 3.6 0 4.27 2.373 4.27 5.459v6.278Z"/></svg>
  53.                             </span>
  54.                             {{ "Contact mij via LinkedIn"|trans }}
  55.                         </a>
  56.                     {% endif %}
  57.                     {% if employee.phone %}
  58.                         <a href="tel:{{ employee.phone | phone }}" target="_blank" class="flex items-center text-gray-800 hover:text-blue-500">
  59.                             <span class="block w-6 h-6 mr-5">
  60.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0072BB" fill-rule="evenodd" d="m23.092 15.636-4.8-1.2a1.205 1.205 0 0 0-1.29.499l-3.072 4.608a20.5 20.5 0 0 1-9.473-9.473l4.608-3.072a1.2 1.2 0 0 0 .5-1.289l-1.2-4.8A1.2 1.2 0 0 0 7.2 0h-6A1.2 1.2 0 0 0 0 1.2C.015 13.787 10.214 23.986 22.8 24a1.2 1.2 0 0 0 1.2-1.2v-6a1.2 1.2 0 0 0-.908-1.163Z"/></svg>
  61.                             </span>
  62.                             {{ employee.phone }}
  63.                         </a>
  64.                     {% endif %}
  65.                 </div>
  66.             </div>
  67.         {% endfor %}
  68.     </div>
  69. {% endif %}