{% if history_process %}
    {% for process in history_process %}
      <div class="sale-process {{ process.statusType }} rel bottom-margin-small">
        <div class="row row-flex-align">
          <div class="col-xs-width-auto">
            <div class="{{ process.statusClassColor }} {{ process.active ? 'sale-process-active' : '' }} icon-container rel">
              <i class="{{ process.icon }} center-middle-absolute"></i>
            </div>
          </div>
          <div class="col-xs">
            <span class="text-small text-bold text-dark-opacity">{{ process.processo_name }}</span>
            {% if process.data_hora_status %}
              <span class="text-small text-bold text-dark-opacity"> - {{ process.data_hora_status }}</span>
            {% endif %}
            <div>
              <span class="text-small text-gray">{{ process.processo_status_name }}</span>
            </div class="top-margin-x-small">
            {% if process.processo_observacao %}
              <div class="listing-more-status margin-arrow-process">
                <label class="more-comments">
                  <i class="fa-solid fa-chevron-right text-small-link"></i> 
                  <span class="text-small-link">Comentários:</span>
                    <div class="listing-comments rounded-small background-light-gray box-shadow-dark">
                      <div class="timeline-item bottom-margin-x-small">
                        <p class="text-small text-gray">{{ process.processo_observacao }}</p>
                      </div>
                    </div> 
                </label>               
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
{% endif %}