{% extends '@admin/index.twig' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-bar-chart"></i> {{ adminHeaderRatings }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <button type="button" class="btn btn-outline-danger" data-pmf-csrf="{{ csrfToken }}" id="pmf-admin-clear-ratings">
        <i aria-hidden="true" class="bi bi-trash"></i> {{ buttonDeleteAllVotings }}
      </button>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <table class="table border shadow">
      <tbody>
      {% for rating in ratingData %}
        {% if rating['category_id'] != currentCategory %}
          <tr>
            <th colspan="6" class="bg-secondary-subtle">
              <h6 class="mt-2">{{ categoryNames[rating['category_id']].name }}</h6>
            </th>
          </tr>
        {% endif %}
        <tr>
          <td>{{ rating['id'] }}</td>
          <td>{{ rating['lang'] }}</td>
          <td>
            <a href="{{ rating['url'] }}" title="{{ rating['question'] }}">
              {{ rating['question'] }}
            </a>
          </td>
          <td>{{ rating['user'] }}x</td>
          <td class="w-25">
            {% if (rating['number'] * 20) > 75 %}
              {% set progressBar = 'success' %}
            {% elseif ( (rating['number'] * 20) < 25 ) %}
              {% set progressBar = 'danger' %}
            {% else %}
              {% set progressBar = 'primary' %}
            {% endif %}
            <div class="progress" role="progressbar" aria-label="Success example"
                 aria-valuenow="{{ (rating['number'] * 20) }}" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar progress-bar-striped bg-{{ progressBar }}"
                   style="width: {{ (rating['number'] * 20) }}%"></div>
            </div>
          </td>
          <td>{{ (rating['number'] * 20) }}%</td>
        </tr>
        {% set currentCategory = rating['category_id'] %}
      {% endfor %}
      </tbody>
    </table>

    {% if numberOfRatings > 0 %}
    <p>
      <small>
        <span class="bg-success text-white fw-bold">{{ green }}</span>
        {{ greenNote }}<br>
        <span class="bg-danger text-white fw-bold">{{ red }}</span>
        {{ redNote }}
      </small>
    </p>
    {% else %}
      <p>{{ msgNoRatings }}</p>
    {% endif %}

  </div>
</div>
{% endblock %}