<div class="basepack-data-number-card--wrapper castorcito-basepack--item">
  <div class="castorcito-basepack--inner">
    <div class="basepack-data-number-card {{ component_data.fields.image.value is not empty ? 'basepack-data-number-card-wimg' }}">
      {% if component_data.fields.image.value is not empty  %}
      <div class="basepack-data-number-card--item--image">
        {% embed "castorcito:castorcito_image" with {
          cfield_data: component_data.fields.image,
          cfield_display_settings: display_settings.cfields.image
        } %}
        {% endembed %}
      </div>
      {% endif %}
      <div class="basepack-data-number-card--item--info">
        <div class="basepack-data-number-card--item--title-container">
          <h3 class="basepack-data-number-card--item--title">{{ component_data.fields.title.value }}</h3>
        </div>
        {% if component_data.fields.subtitle.value is not empty %}
        <h4 class="basepack-data-number-card--item--subtitle">{{ component_data.fields.subtitle.value }}</h4>
        {% endif %}
        {% if component_data.fields.description.value is not empty  %}
        <div class="basepack-data-number-card--item--description">
          {% embed "castorcito:castorcito_formatted_text" with {
            cfield_data: component_data.fields.description
          } %}
          {% endembed %}
        </div>
        {% endif %}
        <div class="basepack-data-number-card--items">
        {% for item in component_data.fields.data_number_card_item.items %}
          <div class="basepack-data-number-card--item">
            {% if item.fields.prefix.value is not empty %}
            <span class="basepack-data-number-card--item--prefix">{{ item.fields.prefix.value }}</span>
            {% endif %}
            {% if item.fields.value.value is not empty %}
            <span class="numscroller"
                  data-min="1" 
                  data-max="{{ item.fields.value.value }}" 
                  data-delay="{{ display_settings.display_options.delay }}" 
                  data-increment="{{ display_settings.display_options.increment }}" 
                  >{{ item.fields.value.value }}</span>
            {% endif %}
            {% if item.fields.suffix.value is not empty %}
            <span class="basepack-data-number-card--item--suffix">{{ item.fields.suffix.value }}</span>
            {% endif %}
            {% if item.fields.text.value is not empty %}
            <p class="basepack-data-number-card--item--text">{{ item.fields.text.value }}</p>
            {% endif %}
          </div>
        {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{{ attach_library('castorcito_basepack/numscroller') }}
