templates/default/contact.html.twig line 1

Open in your IDE?
  1. {% extends '/base.html.twig' %}
  2. {% set isJanusPage = true %}
  4. {% block stylesheets %}
  5. {{ parent() }}
  6. <link rel="stylesheet" href="{{ asset('assets/generated/living_styleguide.css') }}">
  7. <style>
  8. table, th, td {
  9. border: 1px solid black;
  10. border-collapse: collapse;
  11. }
  13. td {
  14. padding: 8px;
  15. }
  16. </style>
  17. {% endblock %}
  19. {% block main_content %}
  20. <div class="jlls-page-container">
  22. <div class="jlls-card">
  24. <div class="jlls-card-title">
  25. <h1 class="jlls-card-title-text">{{ 'contact_page.headline'|trans|raw }}</h1>
  26. </div>
  29. <div class="tw-p-0 md:tw-p-4">
  30. {% if app.user is not defined or app.user is null %}
  31. {% for category, faqsGroupedBySubcategory in faqs %}
  32. {% set outerIndex = loop.index %}
  33. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-{{ outerIndex }} tw-border-b tw-border-gray-200">
  34. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-3"
  35. onclick="window.appFunctions.toggleFaqSection({{ outerIndex }})">
  36. <i class="fa fa-chevron-circle-right fa-lg tw-mr-2 faq-section-icon faq-section-icon-{{ outerIndex }}" style="color: #CE99F2;"
  37. aria-hidden="true"></i>
  38. <span class="jlls-text tw-font-bold tw-mb-0 tw-cursor-pointer">{{ category }}</span>
  39. </div>
  40. <div class="col-12 tw-py-3 faq-section-content faq-section-content-{{ outerIndex }} d-none tw-text-left tw-pl-2 md:tw-pl-8">
  41. {% for subcategory, faqsAndAnswers in faqsGroupedBySubcategory %}
  42. {% set innerIndex = loop.index %}
  43. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-{{ outerIndex }}{{ innerIndex }}">
  44. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-3"
  45. onclick="window.appFunctions.toggleFaqSection('{{ outerIndex }}' + '{{ innerIndex }}')">
  46. <i class="fa fa-chevron-circle-right fa-lg tw-mr-2 faq-section-icon faq-section-icon-{{ outerIndex }}{{ innerIndex }}" style="color: #CE99F2;"
  47. aria-hidden="true"></i>
  48. <span class="jlls-text tw-font-bold tw-mb-0 tw-cursor-pointer">{{ subcategory }}</span>
  49. </div>
  50. <div class="col-12 tw-py-3 faq-section-content faq-section-content-{{ outerIndex }}{{ innerIndex }} d-none tw-text-left tw-pl-2 md:tw-pl-8">
  51. {% for faq in faqsAndAnswers %}
  52. {% set innermostIndex = loop.index %}
  53. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-{{ outerIndex }}{{ innerIndex }}{{ innermostIndex }}">
  54. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-1"
  55. onclick="window.appFunctions.toggleFaqSection('{{ outerIndex }}' + '{{ innerIndex }}' + '{{ innermostIndex }}')">
  56. <i class="fa fa-chevron-circle-right tw-mr-2 faq-section-icon faq-section-icon-{{ outerIndex }}{{ innerIndex }}{{ innermostIndex }}" style="color: #CE99F2;"
  57. aria-hidden="true"></i>
  58. <span class="jlls-text tw-font-semibold tw-mb-0 tw-cursor-pointer">{{ faq.question }}</span>
  59. </div>
  60. <div class="col-12 tw-pt-3 tw-pb-2 tw-mb-2 faq-answer faq-section-content faq-section-content-{{ outerIndex }}{{ innerIndex }}{{ innermostIndex }} d-none tw-text-left tw-pl-2 md:tw-pl-4 tw-border-b tw-border-gray-200"
  61. onclick="window.appFunctions.toggleFaqSection('{{ outerIndex }}' + '{{ innerIndex }}' + '{{ innermostIndex }}')">
  62. <span class="jlls-text">{{ faq.answer|replace(
  63. {
  64. '%linkRegJobseeker%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_registration_register", {'createWithRole': constant('App\\Entity\\User::ROLE_NAME_JOBSEEKER')}) ~ '>hier</a>',
  65. '%linkRegJobofferer%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_registration_register", {'createWithRole': constant('App\\Entity\\User::ROLE_NAME_JOBOFFERER')}) ~ '>hier</a>',
  66. '%linkPasswordReset%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_resetting_request") ~ '>hier</a>'
  67. }
  68. )|raw }}</span>
  69. </div>
  70. </div>
  71. {% endfor %}
  72. </div>
  73. </div>
  74. {% endfor %}
  75. </div>
  76. </div>
  77. {% endfor %}
  78. {% else %}
  79. {% for subcategory, faqsAndAnswers in faqs %}
  80. {% set innerIndex = loop.index %}
  81. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-{{ innerIndex }} tw-border-b tw-border-gray-200">
  82. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-3"
  83. onclick="window.appFunctions.toggleFaqSection('{{ innerIndex }}')">
  84. <i class="fa fa-chevron-circle-right fa-lg tw-mr-2 faq-section-icon faq-section-icon-{{ innerIndex }}" style="color: #CE99F2;"
  85. aria-hidden="true"></i>
  86. <span class="jlls-text tw-font-bold tw-mb-0 tw-cursor-pointer">{{ subcategory }}</span>
  87. </div>
  88. <div class="col-12 tw-py-3 faq-section-content faq-section-content-{{ innerIndex }} d-none tw-text-left tw-pl-2 md:tw-pl-8">
  89. {% for faq in faqsAndAnswers %}
  90. {% set innermostIndex = loop.index %}
  91. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-{{ innerIndex }}{{ innermostIndex }}">
  92. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-1"
  93. onclick="window.appFunctions.toggleFaqSection('{{ innerIndex }}' + '{{ innermostIndex }}')">
  94. <i class="fa fa-chevron-circle-right tw-mr-2 faq-section-icon faq-section-icon-{{ innerIndex }}{{ innermostIndex }}" style="color: #CE99F2;"
  95. aria-hidden="true"></i>
  96. <span class="jlls-text tw-font-semibold tw-mb-0 tw-cursor-pointer">{{ faq.question }}</span>
  97. </div>
  98. <div class="col-12 tw-pt-3 tw-pb-2 tw-mb-2 faq-section-content faq-answer faq-section-content-{{ innerIndex }}{{ innermostIndex }} d-none tw-text-left tw-pl-2 md:tw-pl-4 tw-border-b tw-border-gray-200"
  99. onclick="window.appFunctions.toggleFaqSection('{{ innerIndex }}' + '{{ innermostIndex }}')">
  100. <span class="jlls-text">{{ faq.answer|replace(
  101. {
  102. '%linkRegJobseeker%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_registration_register", {'createWithRole': constant('App\\Entity\\User::ROLE_NAME_JOBSEEKER')}) ~ '>hier</a>',
  103. '%linkRegJobofferer%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_registration_register", {'createWithRole': constant('App\\Entity\\User::ROLE_NAME_JOBOFFERER')}) ~ '>hier</a>',
  104. '%linkPasswordReset%': '<a class="jlls-link-default tw-underline" href=' ~ path("fos_user_resetting_request") ~ '>hier</a>',
  105. 'info@joboo.de': '<a class="jlls-link-default tw-underline" href="mailto:info@joboo.de">info@joboo.de</a>'
  106. }
  107. )|raw }}</span>
  108. </div>
  109. </div>
  110. {% endfor %}
  111. </div>
  112. </div>
  113. {% endfor %}
  116. {% endif %}
  117. <div class="row tw-px-3 faq-section-trigger faq-section-trigger-contact tw-border-b tw-border-gray-200" id="contact-form-area">
  118. <div class="col-12 tw-text-left tw-flex tw-flex-row tw-items-center tw-justify-start tw-text-joboo-gray-800 tw-py-3"
  119. onclick="window.appFunctions.toggleFaqSection('contact')">
  120. <i class="fa fa-chevron-circle-right fa-lg tw-mr-2 faq-section-icon faq-section-icon-contact" style="color: #CE99F2;"
  121. aria-hidden="true"></i>
  122. <span class="jlls-text tw-font-bold tw-mb-0 tw-cursor-pointer">Kontakt</span>
  123. </div>
  124. <div class="col-12 tw-pb-3 faq-section-content faq-section-content-contact {% if contactOpen is not defined or not contactOpen %}d-none–{% endif %} tw-text-left tw-bg-gray-50 tw-rounded-lg">
  125. <div class="container-fluid tw-px-0 md:tw-px-4">
  126. <div class="tw-flex tw-flex-col md:tw-flex-row">
  127. <div class="col-md tw-p-0 md:tw-py-3 md:tw-pr-4 md:tw-mb-5">
  128. <img src="{{ asset('assets/images/contact-640.jpg')|cdnifyUri }}"
  129. alt="{{ 'seo.image_alt_texts.contact'|trans([], 'seo') }}"
  130. class="tw-w-full tw-rounded-lg">
  131. <div class="tw-py-2 tw-px-4 md:tw-px-2 md:tw-pt-4 jlls-text">
  132. {{ 'contact_page.description'|trans|raw }}
  133. </div>
  134. </div>
  136. <div class="col-md tw-px-4 md:tw-px-0">
  137. {{ form_start(form, { 'attr': {'id': 'contact-form'} }) }}
  139. <div class="tw-mb-6">
  140. {{ form_row(form.subject, { 'attr': {'class': 'jlls-form-input'} }) }}
  141. </div>
  143. <div class="tw-mb-6">
  144. {{ form_row(form.email, { 'attr': {'class': 'jlls-form-input'} }) }}
  145. </div>
  147. <div class="tw-mb-4">
  148. {{ form_row(form.body, { 'attr': {'class': 'tw-px-2 jlls-form-textarea', 'style': 'height: 20em;'} }) }}
  149. </div>
  150. <div class="tw-pb-3 md:tw-pb-0 tw-text-center">
  151. <div class="{{ captchaSubmitClass() }}" {{ captchaSubmitDataAttributes() }}></div>
  152. <button type="submit" class="submit-button jlls-button-default">{{ 'contact_page.send'|trans }}</button>
  153. </div>
  155. {{ form_end(form) }}
  156. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  163. </div>
  165. </div>
  166. </div>
  167. {% endblock %}
  169. {% block javascripts %}
  170. {{ captchaJavascript('contact-form', 'submit-button') }}
  171. <script>
  172. {{ inlineJsWrapperBegin() }}
  173. window.appFunctions.toggleFaqSection = function (sectionId) {
  174. if (jQuery('.faq-section-content-' + sectionId).hasClass('d-none')) {
  175. jQuery('.faq-section-content-' + sectionId).removeClass('d-none');
  176. jQuery('.faq-section-icon-' + sectionId).removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-down');
  177. } else {
  178. jQuery('.faq-section-content-' + sectionId).addClass('d-none');
  179. jQuery('.faq-section-icon-' + sectionId).removeClass('fa-chevron-circle-down').addClass('fa-chevron-circle-right');
  180. }
  181. }
  183. {{ inlineJsWrapperEnd() }}
  184. </script>
  185. {% endblock %}