<div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-notification">
  <div class="padding-large flex between-xs middle-xs js-suspended-side-close">
    <span class="text-x-large text-dark text-bold">{{ text_notifications }}</span>
    <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
  </div>
  {% if active_notifications %}
    {% if system_notifications %}
    <div class="horizontal-padding-large bottom-padding-large">
      <div class="flex between-xs middle-xs">
        <span class="text-medium text-dark text-bold visible-block">{{ text_notification_admin }}</span>
      </div>
      {% for system_notification in system_notifications %}
        <div id="futuraNotification" class="js-evaluation-dados js-read-message" data-id="{{ system_notification.notification_id }}" data-type="{{ system_notification.type }}" >
          <div class=" row text text-break-word">
            <div class='rating col-xs-1 text text-center'>
              {% if system_notification.priority == 1 %}
                <i title="{{ text_property_alto }}" class="field-error-icon fas fa-exclamation-circle error "></i>
              {% elseif system_notification.priority == 2 %}
                <i title="{{ text_property_medio }}" class=" text-warning field-error-icon fas fa-exclamation-circle"></i>
              {% else %}
                <i title="{{ text_property_baixo }}" class="field-error-icon fas fa-exclamation-circle"></i>
              {% endif %}

            </div>
            <div class='col-xs-10 text'>
              <span class="text-dark text-small text-bold visible-block  js-evaluation-product"> {{ system_notification.title }}</span>
            </div>

          <div class="col-xs-12 padding-x-small cm-tab text-small text-justify">
            <span class="text-gray text-small text-italic js-evaluation-text js-evaluation-message " data-text="{{ system_notification.message }}"></span>
            <span class="left-margin-small text-small text-gray">{{ system_notification.date_added|date("d/m/Y") }} </span>
          </div>
          <br>
          <a href="#" class=" col-xs-12 padding-x-small cm-tab text-small text-decoration-none text-success right-margin-large js-evaluation-action js-read-message js-approve">{{ text_message_read }}</a>
          </div>
        </div>
      {% endfor %}
    </div>
    {% endif %}

    {% if store_ratings or reviews %}
    <div class="horizontal-padding-large bottom-padding-large">
        <div class="flex between-xs middle-xs">
          <span class="text-medium text-dark text-bold visible-block">{{ text_evaluation }}</span>
          <span class="text-x-small text-gray visible-block cursor-pointer js-clean-notification">{{ text_clean }}</span>
        </div>
        <a href="{{ review }}" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_product_evaluation }}</span>
        </a>
        {% if reviews is defined and reviews_status == constant('Type_StatusEn::Tp_Enable') %}
          {% for review in reviews %}
            <div class="top-margin-large js-evaluation-dados evaluation-dados text-break-word" data-id="{{ review.review_id }}" data-type="{{ review.type }}">
              <div class="flex between-xs middle-xs">
                <div class="flex middle-xs">
                    <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|date("d/m/Y") }} </span>
                </div>
                <i class="fas fa-times text-x-small text-gray cursor-pointer js-evaluation js-clean-notification js-close"></i>
              </div>
              <div class="vertical-margin-x-small text-small">
                <span class="text-dark text-small text-bold visible-block js-evaluation-text js-evaluation-product" data-text="{{ review.name }}"></span>
                <span class="text-gray text-small text-italic js-evaluation-text js-evaluation-message" data-text="{{ review.text }} — {{ review.author }}"></span>
              </div>
              <a href="#" class="text-small text-decoration-none text-success right-margin-large js-evaluation-action js-approve">{{ text_approve }}</a>
              <a href="#" class="text-small text-decoration-none text-error js-evaluation-action js-disapprove">{{ text_disapprove }}</a>
            </div>
          {% endfor %}
        {% endif %}
        {% if store_rating_module_status %}
        <a href="{{ store_rating }}" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_store_evaluation }}</span>
        </a>
        {% endif %}
        {% if store_ratings is defined and store_rating_module_status == constant('Type_Status::Tp_Habilitado') %}
          {% for store_rating in store_ratings %}
            <div class="top-margin-large js-evaluation-dados js-store-rating evaluation-dados" data-id="{{ store_rating.store_rating_id }}" data-type="{{ store_rating.type }}">
              <div class="flex between-xs middle-xs">
                <div class="flex middle-xs">
                    <div class='rating'>
                        <i class="far fa-star text-small active_star{{ store_rating.rating }}" aria-hidden="true"></i>
                        <i class="far fa-star text-small active_star{{ store_rating.rating }}" aria-hidden="true"></i>
                        <i class="far fa-star text-small active_star{{ store_rating.rating }}" aria-hidden="true"></i>
                        <i class="far fa-star text-small active_star{{ store_rating.rating }}" aria-hidden="true"></i>
                        <i class="far fa-star text-small active_star{{ store_rating.rating }}" aria-hidden="true"></i>
                      </div>
                      <span class="left-margin-small text-small text-gray">{{ store_rating.date_added|date("d/m/Y") }} </span>
                </div>
                <i class="fas fa-times text-x-small text-gray cursor-pointer js-evaluation js-clean-notification js-close"></i>
              </div>
              <div class="vertical-margin-x-small text-small">
                <span class="text-gray text-small text-italic js-evaluation-text js-evaluation-message" data-text="{{ store_rating.text }} — {{ store_rating.author }}"></span>
              </div>
              <a href="#" class="text-small text-decoration-none text-success right-margin-large js-evaluation-action js-approve">{{ text_approve }}</a>
              <a href="#" class="text-small text-decoration-none text-error js-evaluation-action js-disapprove">{{ text_disapprove }}</a>
            </div>
          {% endfor %}
        {% endif %}
    </div>
    {% endif %}

    <div class="horizontal-padding-large  text-break-word">
      {% for key, mlnotification in mlnotifications  %}
        {% for notification in mlnotification %}
          <a href="{{ notification.link }}" class="text-decoration-none visible-block bottom-margin-large">
            <span class="text-medium text-dark text-bold visible-block">{{ notification.title }}</span>
            <div class="vertical-margin-x-small text-small">
              <span class="text-gray text-small">{{ notification.text }}</span>
            </div>
          </a>
        {% endfor %}
      {% endfor %}
    </div>
    <div class="left-padding-large vertical-margin-large visible-block">
      <hr class="bottom-border-gray">
    </div>
  {% else %}
    <div class="horizontal-padding-large">
      <div class="vertical-margin-x-small text-small">
        <span class="text-gray text-small">Tudo limpor por aqui :)</span>
      </div>
    </div>
  {% endif %}
</div>
