templates/areas/sector-solutions-cards-brick/view.html.twig line 1

Open in your IDE?
  2. {# Defined as EditbleDialog field #}
  3. {% set sectors = sectors ?? pimcore_relations('sectors').getElements() %}
  5. {% embed 'app/area-brick-layout.html.twig' %}
  6.     {% block content %}
  7.         <section>
  8.             <div class="container py-10 md:py-14">
  9.                 {% if editmode or not pimcore_input('title').isEmpty() %}
  10.                     <h2 class="mb-10 text-2xl text-center md:text-4xl md:mb-20 max-w-[200px] md:max-w-none mx-auto">
  11.                         {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  12.                     </h2>
  13.                 {% endif %}
  15.                 {% if editmode %}
  16.                     <div>
  17.                         {% if pimcore_relations('sectors') is empty %}
  18.                             <div class="alert alert-danger">
  19.                                 (Nog) geen sectoren gekoppeld.
  20.                             </div>
  21.                         {% endif %}
  22.                     </div>
  23.                 {% endif %}
  25.                 <div class="grid grid-cols-2 gap-3 font-bold md:gap-8 md:justify-center md:flex-wrap md:flex ">
  26.                     {% for sector in sectors %}
  27.                         <a
  28.                             href="{{ (sector.page.url ?? null) | trimUrl }}"
  29.                             class="flex flex-col items-center justify-center grid-cols-1 gap-2 transition-transform bg-white rounded-md md:w-1/3 lg:w-1/6 hover:drop-shadow-xl hover:text-blue aspect-square max-w-[186px] px-4"
  30.                         >
  31.                             {% if editmode %}
  32.                                 <div class="alert alert-danger">Geen gekoppelde pagina in huidige taal. Kaart is niet klikbaar.</div>
  33.                             {% endif %}
  34.                             {% if sector.icon %}
  35.                                 {{ sector.icon.thumbnail('sector-card-icon').html({
  36.                                     class: 'w-full',
  37.                                     pictureAttributes: {
  38.                                         class: ''
  39.                                     }
  40.                                 })|raw }}
  41.                             {% else %}
  42.                                 <div class="flex-grow"></div>
  43.                             {% endif %}
  44.                             <span class="leading-tight text-center">{{ sector.branchename ?: sector.key }}</span>
  45.                        </a>
  46.                     {% endfor %}
  48.                     {% if document.getProperty('sectorArchivePage') %}
  49.                         <a
  50.                             href="{{ document.getProperty('sectorArchivePage').url | trimUrl }}"
  51.                             class="flex flex-col items-center justify-center grid-cols-1 gap-5 text-white transition-transform rounded-md md:w-1/3 lg:w-1/6 bg-blue hover:drop-shadow-2xl aspect-square max-w-[186px] px-4"
  52.                         >
  53.                             <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  54.                                 <path fill="#FFF" fill-rule="evenodd" d="M3.5 9a3.5 3.5 0 0 1 .192 6.995L3.5 16a3.5 3.5 0 0 1-.192-6.995L3.5 9Zm9 0a3.5 3.5 0 0 1 .192 6.995L12.5 16a3.5 3.5 0 0 1-.192-6.995L12.5 9Zm-9 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.5 0a3.5 3.5 0 0 1 .192 6.995L3.5 7A3.5 3.5 0 0 1 3.308.005L3.5 0Zm9 0a3.5 3.5 0 0 1 .192 6.995L12.5 7a3.5 3.5 0 0 1-.192-6.995L12.5 0Zm-9 1.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
  55.                             </svg>
  56.                             <span class="leading-tight text-center">{{ "Bekijk alle sectoren"|trans }}</span>
  57.                         </a>
  58.                     {% elseif editmode %}
  59.                         <div class="alert alert-danger">
  60.                             Geen 'Sector Overzicht Pagina' (sectorArchivePage) property toegevoegd aan huidige taal.
  61.                         </div>
  62.                     {% endif %}
  63.                     </div>
  65.                 </div>
  67.             </div>
  68.         </section>
  69.     {% endblock %}
  70. {% endembed %}