{{ header }}
<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">
          <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>
          {% if error_warning %}<div class="warning">{{ error_warning }}</div>{% endif %}
          {% if success %}<div class="success">{{ success }}</div>{% endif %}
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  {% if reviews %}
    <div class="row small-space-xs stretch-xs">
      {% for review in reviews %}
        <div class="col-xs-12 col-sm-6 col-md-4" id="{{ review.review_id }}">
          <div class="content-box visible-block text-decoration-none background-white shadow-small padding-large">
            <div class="flex between-xs middle-xs bottom-margin-medium">
              {% if review.status == 'Habilitado' %}
                <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">{{ review.status }}</span>
              {% else %}
                <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error">{{ review.status }}</span>
              {% endif %}
              <div class="new-dropdown visible-inline-block js-new-dropdown">
                <div class="new-dropdown-control">
                  <span class="new-dropdown-control-dot"></span>
                  <span class="new-dropdown-control-dot"></span>
                  <span class="new-dropdown-control-dot"></span>
                </div>
                <div class="new-dropdown-content background-white border-gray shadow-medium right js-new-dropdown-content">
                  {% if review.status == 'Habilitado' %}
                    <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-review-list-status" href="{{ review.action.desabilitar }}">Desabilitar</a>
                  {% else %}
                    <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-review-list-status" href="{{ review.action.habilitar }}">Habilitar</a>
                  {% endif %}
                  <a class="new-dropdown-content-item text-small text-error text-decoration-none" href="{{ review.action.delete }}">Excluir</a>
                </div>
              </div>
            </div>
            <div class="flex middle-xs bottom-margin-x-small">
              <div class='rating'>
                <i class="far fa-star text-small active_star{{ review.rating }}" aria-hidden="true"></i>
                <i class="far fa-star text-small active_star{{ review.rating }}" aria-hidden="true"></i>
                <i class="far fa-star text-small active_star{{ review.rating }}" aria-hidden="true"></i>
                <i class="far fa-star text-small active_star{{ review.rating }}" aria-hidden="true"></i>
                <i class="far fa-star text-small active_star{{ review.rating }}" aria-hidden="true"></i>
              </div>
              <span class="left-margin-small  text-small text-gray">{{ review.date_added }}</span>
            </div>
            <span class="text-dark text-small text-bold visible-block">#{{ review.product_id }} - {{ review.name }}</span>
            <span class="text-gray text-small text-italic">{{ review.text }} — {{ review.author }}</span>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>
{{ footer }}
