templates/pages/_includes/base/search_bar/_search_bar_custom.html.twig line 1

Open in your IDE?
  1. <div
  2. class="custom-search-bar"
  3. data-context="auto"
  4. data-cruise-search-dynamic-options-url="{{ path('api_cruise_get_cruise_serach_dynamic_options') }}"
  5. data-cruise-list-url="/croisieres"
  6. {# Onglets Top / Autres — désactivés (cf. custom-search/engine.js)
  7. data-cruise-tab-top-destinations="{{ 'list.filters.top_destinations'|trans|e('html_attr') }}"
  8. data-cruise-tab-other-destinations="{{ 'search.custom.tab_other_destinations'|trans|e('html_attr') }}"
  9. data-cruise-tab-top-companies="{{ 'search.custom.tab_top_companies'|trans|e('html_attr') }}"
  10. data-cruise-tab-other-companies="{{ 'search.custom.tab_other_companies'|trans|e('html_attr') }}"
  11. data-cruise-tab-top-ports="{{ 'search.custom.tab_top_ports'|trans|e('html_attr') }}"
  12. data-cruise-tab-other-ports="{{ 'search.custom.tab_other_ports'|trans|e('html_attr') }}"
  13. data-cruise-tab-panel-empty="{{ 'search.custom.tab_panel_empty'|trans|e('html_attr') }}"
  14. #}
  15. data-cruise-search-placeholder-destinations="{{ 'search.custom.search_destinations'|trans|e('html_attr') }}"
  16. data-cruise-search-placeholder-companies="{{ 'search.custom.search_companies'|trans|e('html_attr') }}"
  17. data-cruise-search-placeholder-ports="{{ 'search.custom.search_ports'|trans|e('html_attr') }}"
  18. >
  19. <!-- Header mobile -->
  20. <div class="custom-search-header">
  21. <div class="header-icon">
  22. {{ getLucidIcon('search') }}
  23. </div> {# .header-icon #}
  24. <div class="header-title">{{ 'search.custom.header_title'|trans }}</div> {# .header-title #}
  25. </div> {# .custom-search-header #}
  27. <form class="custom-search-form">
  28. <!-- Section Destination -->
  29. <div class="custom-search-field custom-search-destination">
  30. <div class="field-content">
  31. <div class="field-icon">
  32. {{ getLucidIcon('map-pin') }}
  33. </div>
  34. <div class="field-label">{{ 'search.bar.destination'|trans }}</div>
  35. <div class="field-dropdown-icon">
  36. {{ getLucidIcon('chevron-down') }}
  37. </div>
  38. </div>
  39. <div class="field-separator"></div>
  41. <!-- Dropdown pour ce champ -->
  42. <div class="custom-dropdown custom-dropdown-destination">
  43. <div class="dropdown-content">
  44. <!-- Les options seront chargées dynamiquement -->
  45. </div>
  46. </div>
  47. </div>
  49. <!-- Section Dates (premier en mobile) -->
  50. <div class="custom-search-field custom-search-dates">
  51. <div class="field-content">
  52. <div class="field-icon">
  53. {{ getLucidIcon('calendar') }}
  54. </div>
  55. <div class="field-label">{{ 'search.custom.dates'|trans }}</div>
  56. <div class="field-dropdown-icon">
  57. {{ getLucidIcon('chevron-down') }}
  58. </div>
  59. </div>
  60. <div class="field-separator"></div>
  62. <div class="custom-dropdown custom-dropdown-dates">
  63. <div class="dropdown-content custom-search-dates-panel">
  64. {% set currentYear = "now"|date("Y") + 0 %}
  65. {% set currentMonth = "now"|date("n") + 0 %}
  66. {% set monthLabels = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %}
  67. <div class="custom-search-dates-year-slider">
  68. <button type="button" class="custom-search-dates-year-nav custom-search-dates-year-nav--prev" aria-label="{{ 'common.previous'|trans }}" disabled>
  69. {{ getLucidIcon('chevron-left') }}
  70. </button>
  71. <div class="custom-search-dates-year-viewport">
  72. <div class="custom-search-dates-year-track">
  73. {% for year in currentYear..(currentYear + 2) %}
  74. <span class="custom-search-dates-year{% if year == currentYear %} is-current{% endif %}" data-year="{{ year }}">{{ year }}</span>
  75. {% endfor %}
  76. </div>
  77. </div>
  78. <button type="button" class="custom-search-dates-year-nav custom-search-dates-year-nav--next" aria-label="{{ 'common.next'|trans }}">
  79. {{ getLucidIcon('chevron-right') }}
  80. </button>
  81. </div>
  82. <div class="custom-search-dates-months">
  83. {% for label in monthLabels %}
  84. {% set month = loop.index %}
  85. {% set monthPad = "%02d"|format(month) %}
  86. {% set firstDay = currentYear ~ "-" ~ monthPad ~ "-01" %}
  87. {% set lastDay = firstDay|date_modify("last day of this month")|date("d") %}
  88. {% set isPast = month < currentMonth %}
  89. <button
  90. type="button"
  91. class="custom-search-dates-month{% if isPast %} is-past{% endif %}"
  92. value="01{{ monthPad }}-{{ lastDay }}{{ monthPad }}"
  93. data-month="{{ month }}"
  94. aria-pressed="false"
  95. {% if isPast %}disabled{% endif %}
  96. >{{ label }}</button>
  97. {% endfor %}
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  103. <!-- Section Port de départ -->
  104. <div class="custom-search-field custom-search-departure">
  105. <div class="field-content">
  106. <div class="field-icon">
  107. {{ getLucidIcon('anchor') }}
  108. </div>
  109. <div class="field-label">{{ 'search.bar.departure_port'|trans }}</div>
  110. <div class="field-dropdown-icon">
  111. {{ getLucidIcon('chevron-down') }}
  112. </div>
  113. </div>
  114. <div class="field-separator"></div>
  116. <!-- Dropdown pour ce champ -->
  117. <div class="custom-dropdown custom-dropdown-departure">
  118. <div class="dropdown-content">
  119. <!-- Les ports seront chargés dynamiquement -->
  120. </div>
  121. </div>
  122. </div>
  124. <!-- Section Compagnie -->
  125. <div class="custom-search-field custom-search-company">
  126. <div class="field-content">
  127. <div class="field-icon">
  128. {{ getLucidIcon('ship') }}
  129. </div>
  130. <div class="field-label">{{ 'search.bar.company'|trans }}</div>
  131. <div class="field-dropdown-icon">
  132. {{ getLucidIcon('chevron-down') }}
  133. </div>
  134. </div>
  135. <div class="field-separator"></div>
  137. <!-- Dropdown pour ce champ -->
  138. <div class="custom-dropdown custom-dropdown-company">
  139. <div class="dropdown-content">
  140. <!-- Les compagnies seront chargées dynamiquement -->
  141. </div>
  142. </div>
  143. </div>
  145. <!-- Bouton de recherche -->
  146. <div class="custom-search-submit">
  147. <button type="submit" class="search-submit-btn">
  148. <div class="submit-icon">
  149. {{ getLucidIcon('search') }}
  150. </div>
  151. </button>
  152. </div> {# .custom-search-submit #}
  153. </form> {# .custom-search-form #}
  154. </div> {# #search-bar-custom #}