{% load i18n %}
<div class="card tw:max-h-full tw:overflow-auto tw:overflow-x-auto">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <button class="nav-link active" id="visual-tab" data-bs-toggle="tab" data-bs-target="#visual-tab-pane"
                type="button" role="tab" aria-controls="visual-tab-pane"
                aria-selected="true">{% translate 'Visual' %}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-tab-pane" type="button"
                role="tab" aria-controls="logs-tab-pane" aria-selected="false">{% translate 'Logs' %}</button>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="visual-tab-pane" role="tabpanel" aria-labelledby="home-tab"
           tabindex="0">
        {% if not results %}
          {% translate 'Run a test to see...' %}
        {% else %}
          {% for result in results %}

            {% if result.type == 'header' %}
              <div class="my-3">
                <h6 class="text-center mb-3">
                  <span class="badge text-bg-secondary">
                  {% if result.header_type == "edit_transaction" %}
                    {% translate 'Edit transaction' %}
                  {% elif result.header_type == "update_or_create_transaction" %}
                    {% translate 'Update or create transaction' %}
                  {% endif %}
                  </span>
                </h6>
              </div>
            {% endif %}


            {% if result.type == 'triggering_transaction' %}
              <div class="mt-4">
                <h6 class="text-center mb-3"><span class="badge text-bg-secondary">{% translate 'Start' %}</span></h6>
                <c-transaction.item :transaction="result.transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'edit_transaction' %}
              <div>
                <div>
                  {% translate 'Set' %} <span
                    class="badge text-bg-secondary">{{ result.field }}</span> {% translate 'to' %}
                  <span class="badge text-bg-secondary">{{ result.new_value }}</span>
                </div>
                <c-transaction.item :transaction="result.transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'update_or_create_transaction' %}
              <div>
                <div class="alert alert-info" role="alert">
                  {% translate 'Search' %}: {{ result.query }}
                </div>
                {% if result.start_transaction %}
                  <c-transaction.item :transaction="result.start_transaction" :dummy="True"
                                      :disable-selection="True"></c-transaction.item>
                {% else %}
                  <div class="alert alert-danger" role="alert">
                    {% translate 'No transaction found, a new one will be created' %}
                  </div>
                {% endif %}
                <div class="text-center h3 my-2"><i class="fa-solid fa-arrow-down"></i></div>
                <c-transaction.item :transaction="result.end_transaction" :dummy="True"
                                    :disable-selection="True"></c-transaction.item>
              </div>
            {% endif %}

            {% if result.type == 'error' %}
              <div>
                <div class="alert alert-{% if result.level == 'error' %}danger{% elif result.level == 'warning' %}warning{% else %}info{% endif %}" role="alert">
                  {{ result.error }}
                </div>
              </div>
            {% endif %}

          {% endfor %}
        {% endif %}
      </div>
      <div class="tab-pane fade" id="logs-tab-pane" role="tabpanel" aria-labelledby="logs-tab" tabindex="0">
        {% if not logs %}
          {% translate 'Run a test to see...' %}
        {% else %}
          <pre>
              {{ logs|linebreaks }}
            </pre>
        {% endif %}
      </div>
    </div>
  </div>
</div>