<div class="background-white padding-large shadow-small">
      {% if logs %}
        <div class="col-xs-12">
          <div>
            {% for log in logs %}
              <div class="bottom-border-gray">
                <div class="row no-space-xs vertical-padding-large">
                  <div class="col-xs-12">
                    <div class="content-box flex between-xs top-xs middle-xs">
                      <div>
                        {% if log.enviado %}
                        <span class="padding-x-small rounded-x-small background-error gray text-error text-medium">{{ log.text_enviado }}</span>
                        {% else %}
                        <span class="padding-x-small rounded-x-small background-success text-success text-medium">{{ log.text_enviado }}</span>
                        {% endif %}
                      </div>
                      <div class="text-right">
                        <span class="text-small text-dark visible-block">{{ log.data }}</span>
                        <span class="text-small text-dark visible-block">{{ log.hora }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-12">
                    <div class="content-box top-padding-small">
                      <span class="text-medium text-dark">{{ log.origem }}</span>
                    </div>
                    <div class="content-box top-padding-small bottom-padding-small">
                      {% if log.metodo %}
                      <span class="padding-x-small rounded-x-small text-small text-gray background-gray">{{ log.metodo }}</span>
                      {% endif %}
                      {% if log.url %}
                      <span class="text-small text-dark text-break-word">{{ log.url }}</span>
                      {% endif %}
                    </div>
                    <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">
                      {% if log.enviado %}
                      <div class="col-xs-12">
                        <span class="text-small text-dark">Enviado</span>
                        <textarea class="full-width" readonly>{{ log.enviado }}</textarea>
                      </div>
                      {% endif %}
                      <div class="col-xs-12">
                        <div class="content-box flex between-xs top-xs middle-xs">
                          <div>
                            <span class="text-small text-dark">Retorno</span>
                          </div>
                          {% if log.http_code %}
                          <div class="text-right">
                            <span class="text-small text-dark">Código HTTP: {{ log.http_code }}</span>
                          </div>
                          {% endif %}
                        </div>
                        <textarea class="full-width" readonly>{{ log.retorno }}</textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% else %}
        <span class="visible-block text-medium text-center text-dark">Nenhum log encontrado</span>
      {% 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');

    var textAreas = content.querySelectorAll('textarea');
    for (let i = 0; i < textAreas.length; i++) {
      prettyPrint(textAreas[i]);
      textAreas[i].style.height = textAreas[i].scrollHeight+"px";
    }
  }

  function prettyPrint(textArea) {
    var ugly = textArea.value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    textArea.value = pretty;
  }
</script>