{% if  resellers|length > 0 %}
  <div class="row small-space-xs medium-space-md stretch-xs top-margin-medium">
  {% for reseller in resellers %}
    <div class="col-xs-12 col-md-4">
      <div class="content-box border-gray padding-large">
        <div class="text-ellipsis">
          <span class="text-medium text-bold text-dark text-ellipsis">{{ reseller.name }}</span>
        </div>
        <div class="flex nowrap-xs middle-xs text-small text-gray top-margin-medium">
          <i class="fas fa-envelope"></i>
          <span class="left-margin-small">{{ reseller.email }}</span>
        </div>
        <div class="flex nowrap-xs middle-xs text-small text-gray top-margin-medium">
          <i class="fas fa-map-marker-alt"></i>
          <span class="left-margin-small">{{ reseller.endereco }}</span>
        </div>
        {% if reseller.celular  %}
          <div class="flex nowrap-xs middle-xs text-small text-gray top-margin-medium">
            <i class="fas fa-phone"></i>
            <span class="left-margin-small">{{ reseller.celular }}</span>
          </div>
        {% endif %}
      </div>
    </div>
  {% endfor %}
  </div>
  <div class="top-border-gray top-padding-medium top-margin-medium">{{ pagination }}</div>
{% else %}
  <div class="padding-large paper top-margin-medium flex flex-row center-xs">
    <span class="full-width text-center text-x-large text-dark margin-x-large">{{ text_empty_reseller_title }}</span>
  </div>
{% endif %}