{% extends 'base.jinja' %}

{% block CONTENT %}<div class="row px-3">
    <div class="col-6 my-2">
      <h1>Отчёт 2</h1>
    </div>
    <div class="col-6">
      <div class="input-group my-3">
        <span class="input-group-text" id="pet-type">
          <i class="fa-solid fa-filter"></i><i class="fa-solid fa-paw"></i>
        </span>
        <select class="form-select" aria-label="Тип питомца" id="type">
          <option selected value="tA">Все</option>{% for TYPE in PET_TYPES %}
          <option value="t{{ TYPE.0 }}">{{ TYPE.1 }}</option>{% endfor %}
        </select>
        <select class="form-select" aria-label="Пол" id="sex">
          <option selected value="sA">Все</option>{% for SEX in PET_SEXES %}
          <option value="s{{ SEX.0 }}">{{ SEX.1 }}</option>{% endfor %}
        </select>
      </div>
    </div>
  </div>
  <div class="row px-3">
    <div class="col-12"><table class="table table-sm table-secondary table-striped table-hover">
      <thead >
      <tr style="position: sticky;">
        <th scope="col" title="Серийный номер" class="bg-dark text-light"><i class="fa-solid fa-paw"></i> #</th>
        <th scope="col" class="bg-dark text-light"><i class="fa-solid fa-paw"></i> Имя</th>
        <th scope="col" class="bg-dark text-light"><i class="fa-solid fa-paw"></i> Тип</th>
        <th scope="col" class="bg-dark text-light"><i class="fa-solid fa-paw"></i> Пол</th>
        <th scope="col" title="Регистрация" class="bg-dark text-light"><i class="fa-solid fa-id-card"></i></th>
        <th scope="col" title="Состояние здоровья" class="bg-dark text-light"><i class="fa-solid fa-heart"></i></th>
        <th scope="col" title="Заказчик" class="bg-dark text-light"><i class="fa-solid fa-person"></i></th>
        <th scope="col" title="Комментарии" class="bg-dark text-light"><i class="fa-solid fa-comment"></i></th>
        <th scope="col" title="Цена заказа" class="bg-dark text-light text-end"><i class="fa-solid fa-ruble-sign"></i></th>
      </tr>
      </thead>
      <tbody style="font-family: monospace;">
      {% for PET in PETS %}<tr class="t{{ PET.iPetType }} s{{ PET.iPetSex }}">
        <td>{{ PET.szPetSerNum }}</td>
        <td>{% if PET.szPetName %}{{ PET.szPetName }}{% else %}&mdash;{% endif %}</td>
        <td>{% if PET.iPetType == 0 %}<i class="fa-solid fa-ghost"></i>{% elif PET.iPetType == 1 %}
          <i class="fa-solid fa-dog"></i>{% elif PET.iPetType == 2 %}
          <i class="fa-solid fa-cat"></i>{% elif PET.iPetType == 3 %}
          <i class="fa-solid fa-dove"></i>{% elif PET.iPetType == 4 %}
          <i class="fa-solid fa-fish"></i>{% elif PET.iPetType == 5 %}
          <i class="fa-solid fa-frog"></i>{% elif PET.iPetType == 6 %}
          <i class="fa-solid fa-locust"></i>{% endif %}</td>
        <td>{% if PET.iPetSex == 0 %}<i class="fa-solid fa-genderless"></i>{% elif PET.iPetSex == 1 %}
          <i class="fa-solid fa-mars"></i>{% elif PET.iPetSex == 2 %}
          <i class="fa-solid fa-venus"></i>{% endif %}</td>
        <td>{% if PET.bPetIsReg %}<i class="fa-solid fa-circle-check"></i>{% endif %}</td>
        <td>{% if not PET.bPetIsAlive %}<i class="fa-solid fa-skull-crossbones"></i>{% endif %}</td>
        <td>{% if PET.szPetOwner %}{{ PET.szPetOwner }}{% else %}&mdash;{% endif %}</td>
        <td>{% if PET.szPetComment %}<i class="fa-solid fa-comment" title="{{ PET.szPetComment }}"></i>{% endif %}</td>
        <td class="text-end">{{ PET.szPetPrice }}</td>
      </tr>{% endfor %}
      </tbody>
    </table></div>
  </div>

  <div class="row px-3">
    <div class="col-12">
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="row px-3">
    <div class="col-12">
      <p class="text-sm-end px-4 bg-info-subtle text-info"><small><small><i class="fa-solid fa-microchip"></i>
        {{ Q_CPU|stringformat:".6f" }}</small></small></p>
    </div>
  </div>{% endblock CONTENT %}

{% block JS_1 %}<script type="text/javascript">
    $(document).ready(function() {
      $('#type,#sex').change(function(){
        let t = $('#type').find("option:selected").attr('value');
        let s = $('#sex').find("option:selected").attr('value');
        $('tbody > tr').show();
        if(t !== 'tA') $('tbody > tr:not(.'+t+')').hide();
        if(s !== 'sA') $('tbody > tr:not(.'+s+')').hide();
      });
    });
  </script>{% endblock %}