templates/shared/ui/modal/modalFaqs.html.twig line 1

Open in your IDE?
  1. <div id="modal_faq" tabindex="-1" class="modal-window max-w-[680px] fixed hidden top-0 left-0 right-0 z-50 show:opacity-100 w-full py-4 px-[32px] h-[100vh] justify-center items-center overflow-x-hidden mx-auto max-h-full">
  2.     <div class="relative w-full max-h-full overflow-y-auto">
  3.         <!-- Modal content -->
  4.         <div class="relative bg-white rounded-lg shadow p-[20px]">
  5.             <!-- Modal header -->
  6.             <div class="text-[20px] font-semibold text-[#1B2028] text-center mb-[16px]"
  7.                  style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  8.             >{% trans from 'modalFaqs' %}Поширенні питання та відповіді{% endtrans %}</div>
  9.             <!-- Modal body -->
  10.             {% if faqItems is not empty %}
  11.                 {% for items in faqItems %}
  14.                     <div data-accordion="keep">
  16.                         <h2 id="accordion-collapse-heading-{{ loop.index }}" class="peer">
  17.                             <button type="button" class="js--accordionBtn group text-[14px] text-[#1B2028] bg-[#F7F7FA] text-left leading-[16px] px-[8px] py-[5px] rounded-[8px] mt-[6px] flex items-center justify-start w-full font-semibold gap-[16px]" data-accordion-target="#accordion-collapse-body-1" aria-expanded="false" aria-controls="accordion-collapse-body-1">
  18.                                 <span class="pointer-events-none">{{ items.title }}</span>
  19.                                 <svg data-accordion-icon class="pointer-events-none w-[40px] h-[40px] p-[13px] rounded-full ml-auto group-aria-expanded:rotate-0 rotate-180 shrink-0 transition ease-in-out duration-150" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
  20.                                     <path stroke="{{ companyStyles.linkTextColor }}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
  21.                                 </svg>
  22.                             </button>
  23.                         </h2>
  24.                         <div id="accordion-collapse-body-{{ loop.index }}" class="mt-[8px] peer-[.open]:block hidden" aria-labelledby="accordion-collapse-heading-{{ loop.index }}">
  25.                             <div class="prose">
  26. {#                                {{ items.faqAnswers.answer }}#}
  27.                                 {% for answer in items.faqAnswers %}
  28.                                     <p class="text-[#5B5B5B] font-medium text-[14px]">{{ answer.answer | raw }}</p>
  29.                                 {% endfor %}
  30.                             </div>
  31.                         </div>
  32.                     </div>
  34.                 {% endfor %}
  35.             {% endif %}
  38.             <!-- Modal footer -->
  39.             <button style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::FILLED_BUTTON_STYLES')) }}" class="modal-close drop-shadow-[0_7px_5px_rgba(0,0,0,0.25)] hover:drop-shadow-none disabled:drop-shadow-none transition ease-in-out duration-150 hover:!opacity-90 disabled:bg-[#E2E2E9] disabled:text-[#909299] w-full h-[48px] hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-semibold text-[16px] px-5 py-2.5 focus:outline-none mt-[16px] mb-[20px]">
  40.                 {% trans from 'modalFaqs' %}Закрити{% endtrans %}
  41.             </button>
  42.         </div>
  43.     </div>
  44. </div>