{{ header }}
<div id="root">
  <div class="page-loader" v-show="isLoading"></div>
  <header class="background-white bottom-margin-large">
    <div class="container-fluid">
      <div class="row no-space-xs">
        <div class="col-xs-12">
          <div class="content-box vertical-padding-large flex between-xs middle-xs">
            <div>
              <div class="flex">
                <h1 class="bigger-text-x-small text-dark text-bold flex flex-row middle-xs">{{ heading_title }}</h1>
                <a
                  href="http://manual.futurasistemas.com.br/manual-do-sistema/processo-de-vendas-na-loja-virtual-faq91/"
                  class="text-medium text-primary padding-x-small"
                  target="_blank"
                  data-tooltip="Ajuda"
                >
                  <i class="fas fa-question-circle"></i>
                </a>
              </div>
              <div class="adm-breadcrumb top-margin-x-small">
                {% for breadcrumb in breadcrumbs %}
                  <i class="fas fa-angle-right text-small text-gray horizontal-padding-small"></i>
                  <a class="text-small text-gray text-decoration-none" href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="container-fluid">
    {% if error_ceo %}
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="background-white shadow-small rounded-x-small padding-large bottom-margin-medium">
            <span class="text-large text-dark visible-block">{{ text_error_search }}</span>
            <span class="text-small text-gray visible-block top-padding-small">{{ text_search_info }}</span>
            <div class="top-padding-medium">
              <a class="cursor-pointer text-decoration-none text-error text-small" @click.prevent="showError">
                <i class="fas fa-exclamation-triangle"></i>
                {{ text_show_error }}
              </a>
              <div v-if="showCeoError" class="padding-medium background-error rounded-x-small top-margin-medium">
                <span class="text-error text-small">{{ error_ceo.message }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
    {% if processosVenda is iterable %}
      {% for processosVenda in processosVenda  %}
        <a href="{{ processosVenda.href }}" class="visible-block text-decoration-none background-white shadow-small hover:shadow-large padding-medium bottom-margin-small">
          <div class="row no-space-xs middle-xs">
            <div class="col-xs-12 col-sm-1">
              <div class="content-box">
                <span class="text-small text-dark text-bold visible-block">#{{ processosVenda.id_processo_ecommerce }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-sm">
              <div class="content-box">
                <span class="text-medium text-dark visible-block">{{ processosVenda.razao_social }}</span>
              </div>
            </div>
            {% if processosVenda.select %}
              <div class="col-xs-width-auto">
                <div class="content-box">
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-info text-info">Selecionado</span>
                </div>
              </div>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    {% endif %}
  </div>
</div>
<script>
  const DATA = {{ data|json_encode() }};
</script>
{{ footer }}