<div data-module="sdn-timeline" class="sdn-timeline{% if params.readonly %} snd-timeline--readonly{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
  {% if params.title %}<h2 class="sdn-timeline-title {% if params.titleMobileOnly %}sdn-timeline-title--mobile-only{% endif %}">{{ params.title }}</h2>{% endif %}
  <ol start=0 class="sdn-timeline__list">
    {% for step in params.steps %}
      <li class="sdn-timeline__step sdn-timeline__step--{{ step.state }}{% if step.selected %} sdn-timeline__step--selected{% endif %}">
        <div class="sdn-timeline__bullet sdn-timeline__bullet--positioned sdn-timeline__bullet--{{ step.state }} js-sdn-timeline__bullet"></div>
        <a class="sdn-timeline__link" href="{{ step.href }}"{% for attribute, value in step.attributes %} {{attribute}}="{{value}}"{% endfor %}>
            {{ step.text }}
        </a>
          <div class="sdn-timeline-dropdown">
            <div class="sdn-timeline-dropdown__list">
              <a class="sdn-timeline-dropdown__option" href="#done">
                <div class="sdn-timeline-dropdown__bullet sdn-timeline__bullet sdn-timeline__bullet--done"></div>
                Vybavená
              </a>
              <a class="sdn-timeline-dropdown__option" href="#waiting">
                <div class="sdn-timeline-dropdown__bullet sdn-timeline__bullet sdn-timeline__bullet--waiting"></div>
                Prebieha vybavovanie
                <div class="sdn-timeline-dropdown__additional-info">Čakám na úrad (lehota 25 dní)</div>
              </a>
              <a class="sdn-timeline-dropdown__option sdn-timeline-dropdown__option--selected" href="#in-progress">
                <div class="sdn-timeline-dropdown__bullet sdn-timeline__bullet sdn-timeline__bullet--in-progress"></div>
                Nazačatá
              </a>
              <a class="sdn-timeline-dropdown__option" href="#not-done">
                <div class="sdn-timeline-dropdown__bullet sdn-timeline__bullet sdn-timeline__bullet--not-done"></div>
                Rozpracovaná
              </a>
            </div>
          </div>
      </li>
    {% endfor %}
  </ol>

  {% if not params.readonly and params.reset_button_url %}
    <div style="border-top: 1px solid rgba(0,0,0,0.08); padding-top: 30px; margin-top: 30px;">
      <a href="{{ params.reset_button_url }}" class="govuk-button govuk-button__secondary" style="border-width: 1px; padding: 8px; opacity: 0.8; margin-bottom: 10px; font-weight: normal;">Začať celý návod odznovu</a>

      <p style="font-size: 15px; margin-bottom: 0; opacity: 0.5">
        Pozor: Stlačením tlačidla "Začať celý návod odznovu" sa všetky úlohy nastavia ako nevybavené a všetky ich povinnosti sa odškrtnú.
      </p>
    </div>
  {% endif %}
</div>
