{{ 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 header-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">
  <div class="row no-space-xs">
    <div class="col-xs-12">
      <div class="content-box">
        <div class="pull-left bottom-padding-small flex between-xs middle-xs">
          <div class="field field-medium">
              <span class="field-label">{{ text_sort }}
              <select class="field-entry" id="sort" name="sort">
                {% for key, text in sort_filter %}
                  <option id="{{ key }}" value='{{ key }}' {{ key == selected_sort ? 'selected' : ''  }}>{{ text }}</option>
                {% endfor %}
              </select>
              </span>
          </div>
        </div>
        <div class="pull-right top-margin-medium flex between-xs middle-xs">
          {% if filter_count >= 1 %}
            <a class="text-small text-primary text-decoration-none horizontal-padding-large vertical-padding-small js-clean-filter">
              <span>Limpar Filtros ({{ filter_count }})</span>
            </a>
          {% endif %}
          <button type="button" class="btn-default btn-medium-square btn-primary js-suspended-side-control" id="suspended-side-filter">
            <i class="fas fa-filter"></i>
            <span>Filtrar</span>
          </button>
        </div>
        <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-filter">
          <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
            <span class="text-x-large text-dark">Filtros</span>
            <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
          </div>

          <div class="adm-suspended-side-content horizontal-padding-large">

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_product_description }}</span>
              <div class="field-entry-group">
                <select class="field-entry field-entry-medium" type="text" name="filter_product_content" id="filter_product_content">
                  {% for content in content_name %}
                    <option value="{{ content.id }}" {{ content.status }} >{{ content.name }}</option>
                  {% endfor %}
                </select>
                <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_product" id="filter_product"
                       value="{{ filter_product }}" autocomplete="off" role="textbox"
                       aria-autocomplete="list" aria-haspopup="true">
              </div>
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_description }}</span>
              <input class="field-entry" type="text" name="filter_description" id="filter_description" value="{{ filter_description }}" >
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_author }}</span>
              <input class="field-entry" type="text" name="filter_author" id="filter_author" value="{{ filter_author }}" >
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_status }}</span>
              <select class="field-entry field-entry-medium" name="filter_status" id="filter_status">
                <option value="*"></option>
                <option value="1" {% if filter_status %}selected{% endif %}>{{ text_enabled }}</option>
                <option value="0" {% if filter_status is not null and not filter_status %}selected{% endif %}>{{ text_disabled }}</option>
              </select>
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_date_start }}</span>
              <input class="field-entry field-entry-medium date" type="text" id="date-start" name="filter_date_start" value="{{ filter_date_start }}">
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_date_end }}</span>
              <input class="field-entry field-entry-medium date" type="text" id="date-end" name="filter_date_end" value="{{ filter_date_end }}">
            </label>

          </div>

          <div class="padding-large">
            <button id="js-btn-filter" class="btn-default btn-medium btn-full btn-primary">
              <span>{{ button_filter }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="content-box">
        <div class="row small-space-xs stretch-xs">
          {% if reviews %}
          {% for review in reviews %}
            <div class="col-xs-12 col-sm-6 col-md-4 text-break-word" 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="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>
        {% endif %}
      </div>
      </div>
    </div>
  </div>
</div>
{{ footer }}
