{% set stepCard = params.translations %}
{% set steps = params.steps if params.steps else [] %}


<div class="step-card govuk-!-padding-top-6 govuk-!-padding-bottom-6 govuk-!-margin-bottom-6">
  <h2 class="govuk-heading-m">{{ stepCard.header }}</h2>
  <ol class="govuk-list" role="list">
    {% for step in steps %}
      {% if params.unlimitedSteps or loop.index <= 4 %}
      <li class="step-item" role="listitem">
        <div class="step-item-container govuk-!-padding-top-6{% if not loop.last %} govuk-!-padding-bottom-6{% endif %}">
          <div class="step-item-image" aria-hidden="true">
            <img src="{{ step.image if step.image else 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2270%22 height=%2270%22 viewBox=%220 0 70 70%22%3E%3Crect width=%2270%22 height=%2270%22 fill=%22%23e8f1f8%22/%3E%3C/svg%3E' }}" alt="">
          </div>
          <div class="step-item-content">
            <div class="step-header-container">
              <span class="step-number govuk-body govuk-!-font-weight-bold">{{loop.index}}.</span>
              <p class="govuk-body govuk-!-font-weight-bold step-header">{{step.data.title}}</p>
              {% if step.data.description and not step.data.bulletList %}
              {{ warnCharacterLimit(step.data.description, 40) }}
              <p class="govuk-body step-description">{{ step.data.description }}</p>
              {% endif %}
              {% if step.data.bulletList and step.data.bulletList.length %}
                <ul class="govuk-list govuk-list--bullet step-description">
                  {% for item in step.data.bulletList %}
                    <li>{{ item }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
          </div>
        </div>
      </li>
      {% endif %}
    {% endfor %}
  </ol>
</div>