
<div class="top-padding-large">
  {% if history_process %}
    {% for process in history_process %}
      <div class="sale-process {{ process.statusType }} vertical-padding-small rel">
        <div class="row">
          <div class="col-xs-width-auto">
            <div
              class="{{ process.statusClassColor }} visible-inline-block {{ process.active ? 'sale-process-active' : '' }} icon-container rel">
              <i class="{{ process.icon }} center-middle-absolute"></i>
            </div>
          </div>
          <div class="col-xs">
            <div class="visible-inline-block ">
              <span class="text-medium text-dark">{{ process.processo_name }}</span>
              {% if process.data_hora_status %}
                <span class="text-medium text-gray"> - {{ process.data_hora_status }}</span>
              {% endif %}
              <span class="visible-block text-small text-gray">{{ process.processo_status_name }}</span>
              {% if process.processo_observacao %}
                <span class="text-small text-primary js-toggle-control more-info-cursor">Mais informações
                  <i class="fas fa-angle-down text-x-small"></i>
                </span>
                <div class="hidden">
                  <div class="col-xs-12">
                    <span class="text-small text-gray">{{ process.processo_observacao }}</span>
                  </div>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  {% endif %}
</div>

<script>
  var control = document.querySelectorAll('.js-toggle-control');
  for (let i = 0; i < control.length; i++) {
    control[i].onclick = toggleContent.bind(control[i]);
  }
  function toggleContent() {
    var content = this.nextElementSibling;
    content.classList.toggle('hidden');
  }
</script>