<div class="avancedpack-timeline-wrapper castorcito-avancedpack--item">
  <div class="castorcito-avanced-inner">
    <div class="avancedpack-timeline--header">
      {% if component_data.fields.title.value %}
        <h3 class="avancedpack-timeline--title">{{ component_data.fields.title.value }}</h3>
      {% endif %}
      <div class="avancedpack-timeline--description">
        {% embed "castorcito:castorcito_formatted_text" with {
          cfield_data: component_data.fields.description
        } %}
        {% endembed %}
      </div>
    </div>
    <div class="avancedpack-timeline--body {{ component_data.fields.position.value is not empty ? component_data.fields.position.value : '' }} {{ component_data.fields.horizontal.value is not empty ? component_data.fields.horizontal.value : '' }}">
      <div class="avancedpack-timeline--items-line"></div>

      <div class="avancedpack-timeline--items {{ component_data.fields.position.value is not empty ? component_data.fields.position.value : '' }}
      {{ component_data.fields.horizontal.value is not empty ? component_data.fields.horizontal.value : '' }}
      {{ component_data.fields.vertical.value is not empty ? component_data.fields.vertical.value : '' }}">
        {% for item in component_data.fields.timeline_item.items %}
        <div class="avancedpack-timeline--item">
          <div class="avancedpack-timeline--dot"></div>

            <div class="avancedpack-timeline--item--title-container">
              {% if item.fields.title.value %}
                <h4 class="avancedpack-timeline--item-title">{{ item.fields.title.value }}</h4>       
              {% endif %}
              {% if item.fields.subtitle.value %}
                <h5 class="avancedpack-timeline--item-subtitle">{{ item.fields.subtitle.value }}</h5>
              {% endif %}
            </div>
          <div class="avancedpack-timeline--item-content">
            <div class="avancedpack-timeline--item-box">
              <div class="avancedpack-timeline--image">
                {% embed "castorcito:castorcito_image" with {
                  cfield_data: item.fields.image,
                  cfield_display_settings: display_settings.cfields.timeline_item[item.type].cfields.image
                } %}
                {% endembed %}
              </div>
              <div class="avancedpack-timeline--item--description">
                {% embed "castorcito:castorcito_formatted_text" with {
                  cfield_data: item.fields.description
                } %}
                {% endembed %}
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>
