templates/olivier/elements/timeline.html.twig line 1

Open in your IDE?
  1. {% import "front/appointment/macro/macro.html.twig" as _widget %}
  2. {% set data = {
  3.     'actualstep': currentStep,
  4.     'maxstep': maxStep  ,
  5.     'steps': {
  6.         0: 'location',
  7.         1: 'car',
  8.         2: 'service',
  9.         3: 'calendar',
  10.         4: 'validation'
  11.     }
  12. } %}
  16. <div class="timeline_container">
  17.     <div class="head"></div>
  18.     <h2 class="title">{{ 'timeline.title'|trans }}</h2>
  19.     <div class="content">
  20.         <ul class="timeline_list">
  21.             {% for step in data.steps %}
  22.                 {% if loop.index != 1 %}
  23.                     <li class="sepa">
  24.                         <div class="line"></div>
  25.                     </li>
  26.                 {% endif %}
  27.                 <li class="timeline_item">
  28.                     {% set trad = 'timeline.' ~ step %}
  29.                     {% if data.maxstep + 1 > loop.index %}
  30.                         <span class="timeline_link {% if data.actualstep == loop.index %}actual{% endif %}"
  31.                             id="{{ loop.index }}"
  32.                             style="background-image: url('/img/icons/icon_timeline_{{ data.steps[loop.index - 1] }}.svg')"
  33.                               nonce="{{ csp_nonce('style') }}"
  34.                         ></span>
  36.                         <span class="timeline_link mobile{% if data.actualstep == loop.index %}actual{% endif %}"
  37.                             id="{{ loop.index }}"
  38.                             style="background-image: url('/img/icons/icon_timeline_{{ data.steps[loop.index - 1] }}_white.svg')"
  39.                               nonce="{{ csp_nonce('style') }}"
  40.                         ></span>
  42.                         {{ _widget.timeline_description(step, appointment) }}
  44.                     {% else %}
  45.                         <span class="timeline_link disabled" id="{{ loop.index }}"
  46.                             style="background-image: url('/img/icons/icon_timeline_{{ data.steps[loop.index - 1] }}.svg')"></span>
  48.                         <span class="timeline_link disabled mobile" id="{{ loop.index }}"
  49.                             style="background-image: url('/img/icons/icon_timeline_{{ data.steps[loop.index - 1] }}_white.svg')"></span>
  50.                     {% endif %}
  51.                 </li>
  52.             {% endfor %}
  53.         </ul>
  54.     </div>
  55. </div>