{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs middle-xs">
      <div class="col-xs-12 col-sm-6 col-md-9">
        <div class="content-box vertical-padding-large">
          <span class="text-x-large text-dark">{{ heading_title }}</span>
          <div class="adm-breadcrumb">
            {% for breadcrumb in breadcrumbs %}
              <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
              <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <label class="field field-medium">
          <i class="fas fa-search field-icon"></i>
          <input type="text" name="filter_module" placeholder="{{ text_placeholder_search }}" class="field-entry js-filter-module">
        </label>
      </div>
      <div class="col-xs-12 js-contant-message">
        {% if error %}<div class="error full-width top-margin-medium">{{ error }}</div>{% endif %}
        {% if success %}<div class="text-small text-success background-success padding-medium rounded-x-small full-width">{{ success }}</div>{% endif %}
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>


<div class="container-fluid" data-tabs-id="tab-info">
  {% if extensions %}
    {% for key, extension in extensions %}
      <div class="js-search-content hidden" data-tab="{{ extension[0]['title'] }}">
        <span class="text-x-large text-dark visible-block bottom-padding-medium">{{ extension[0]['title'] }}</span>
        <div class="row small-space-xs stretch-xs bottom-margin-x-large">
          {% for type in extension %}
            <div class="col-xs-12 col-sm-6 col-md-4 js-search js-container-module" data-search="{{ type.data_name }}">
              <div class="content-box flex nowrap-xs between-xs middle-xs background-white vertical-padding-medium left-padding-medium shadow-small">

                {% if type.status %}
                  <a href="{{ (type.link.href is defined and type.link.href) ? type.link.href : '#' }}"
                    class="flex-item-auto flex nowrap-xs middle-xs text-decoration-none">
                {% else %}
                  <div data-href="{{ (type.link.href is defined and type.link.href) ? type.link.href : '#' }}"
                    class="flex-item-auto flex nowrap-xs middle-xs text-decoration-none" style="opacity:.32;">
                {% endif %}
                  {% if type.img is defined and type.img %}
                    <img src="{{ type.img is defined and type.img ? type.img : '' }}" style="width:auto;height:auto;max-width:60px;max-height:80px;">
                  {% endif %}
                  <div class="left-margin-medium">
                    <span class="text-medium text-dark">{{ type.name }}</span>
                    {% if type.data_name in discontinued_payments %}
                      <div>
                        <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error" data-tooltip-payment-modules="{{ discontinued_module_message }}">Descontinuado</span>
                      </div>
                    {% endif %}
                    {% if type.news %}
                      <div>
                        {% if type.news %}
                          <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-info text-info" title="">Novo</span>
                        {% endif %}
                      </div>
                    {% endif %}
                  </div>
                {% if type.status %}
                  </a>
                {% else %}
                  </div>
                {% endif %}

                <span data-href="{{ type.action }}" class="text-decoration-none text-gray padding-medium cursor-pointer js-addRemove"
                  data-tooltip="{{ type.status ? 'Desinstalar' : 'Instalar' }}">
                  <i class="{{ type.status ? 'fas fa-trash' : 'fas fa-plus' }}"></i>
                </span>


              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  {% else %}
    <span>{{ text_no_results }}</span>
  {% endif %}

</div>
{{ footer }}
