templates/_includes/formSearch/form_search_section.html.twig line 1

Open in your IDE?
  1. <div class="jtw-form-block-bordered tw-pb-1 tw-mb-4 mt-0 pt-0 tw-overflow-visible">
  2. <div class="jtw-form-search-block-wrapper">
  3. <div class="tw-flex tw-flex-col tw-w-full tw-gap-1 md:tw-gap-4">
  4. {% form_theme form.filterZipcodeRadius '/_overrides/formtheme/dropdown_with_ul_li_tag.html.twig' %}
  5. {% set radius_form_row = form_row(form.filterZipcodeRadius, {'attr': {'class': "dropdown-list jtw-form-dropdown-items tw-p-0 jtw-form-block-bordered tw-border-solid tw-border-gray-light xs:tw-mt-8 md:tw-mt-9 tw-absolute tw-hidden tw-bg-white"}}, { choices: form.filterZipcodeRadius.vars.choices}) %}
  7. {# Gemeinsamer Container für beide Layouts #}
  8. <div class="tw-flex tw-flex-col tw-w-full">
  9. {# Suchfelder Container #}
  10. <div class="tw-flex tw-flex-col md:tw-flex-col">
  11. {# Jobtitel - 100% Breite auf Desktop #}
  12. <div class="tw-w-full" style="position: relative; z-index: 20;">
  13. <div class="jtw-form-search-label-container mt-0">
  14. {{ form_widget(form.filterSearchterm, {'attr': {'class': 'jlls-form-input', 'autocomplete': 'off', 'placeholder': 'Jobtitel'}}) }}
  15. {{ form_errors(form.filterSearchterm)}}
  16. <div id="searchterm-autosuggest-results" class="jtw-form-dropdown-items tw-p-0 tw-absolute tw-hidden tw-bg-white" style="z-index: 1000; max-height: none !important; overflow-y: visible !important;"></div>
  17. </div>
  18. </div>
  20. {# PLZ und Umkreis Container - zusammen 100% Breite auf Desktop #}
  21. <div class="tw-flex tw-flex-row tw-gap-2 tw-w-full">
  22. {# PLZ - 80% der Breite #}
  23. <div class="tw-w-4/5">
  24. <div class="jtw-form-search-label-container mt-3">
  25. {% if joboffererCanEditZipcodeForWantedJobsSearch %}
  26. <div class="tw-absolute tw-flex tw-items-center tw-gap-1 tw-float-right tw-right-0 tw-pl-2 md:tw-pl-4 tw-pt-1">
  27. <i id="select-zipcode-or-city-dropdown-icon" class="fa fa-chevron-down tw-text-base w-cursor-pointer tw-text-gray-primary"></i>
  28. <i class="fa fa-info-circle tw-mr-2 tw-cursor-pointer tw-text-lg tw-mt-0.5 tw-text-gray-primary" data-toggle="modal" data-target="#zipcode-info-box"></i>
  29. </div>
  30. {% endif %}
  31. {{ form_widget(form.filterZipcode, joboffererCanEditZipcodeForWantedJobsSearch ? {'attr': {'class': 'jlls-form-input', 'readonly': 'readonly', 'placeholder': 'PLZ' }}
  32. : {'attr': {'class': 'jlls-form-input', 'placeholder': 'PLZ'}}) }}
  33. {{ form_errors(form.filterZipcode) }}
  34. <ul id="select-zipcode-or-city" class="jtw-form-dropdown-items tw-p-0 tw-absolute tw-hidden tw-bg-white" style="z-index: 45; {% if joboffererCanEditZipcodeForWantedJobsSearch %}overflow-y: scroll;{% else %}overflow: hidden;{% endif %}" {% if joboffererCanEditZipcodeForWantedJobsSearch and joboffererProfileId %} data-jobofferer-profile-id="{{ joboffererProfileId }}" {% endif %}></ul>
  35. </div>
  36. </div>
  38. {# Umkreis - 20% der Breite #}
  39. <div class="tw-w-1/5">
  40. <div class="jtw-form-search-label-container mt-3 tw-overflow-visible">
  41. <div class="jwt-form-filterZipcodeRadius-dropdown tw-relative tw-z-10">
  42. <div class="jlls-form-input tw-flex tw-items-center tw-justify-between tw-cursor-pointer selected-option-wrapper" data-value={{form.filterZipcodeRadius.vars.value}}>
  43. <span class="selected-option tw-font-semibold">
  44. {{field_value(form.filterZipcodeRadius)}}km
  45. </span>
  46. <i class="fa fa-chevron-down tw-text-base tw-leading-4"></i>
  47. </div>
  48. {{ radius_form_row|raw }}
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  56. {{ include('_includes/formSearch/form_experience_levels.html.twig', {
  57. additionalClasses: 'tw-mt-0 md:tw-mt-4'
  58. }) }}
  59. </div>
  60. </div>
  61. </div>
  63. {% block javascript %}
  64. {{ include('_includes/formSearch/javascript.html.twig') }}
  65. {% endblock %}