{% extends 'base.jinja' %}

{% block CONTENT %}<div class="row px-3">
    <div class="col-12 my-2">
      <h1>Отчёт 1</h1>
    </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>
        <td>{{ PET.szPetSerNum }}</td>
        <td>{% if PET.szPetName %}{{ PET.szPetName }}{% else %}&mdash;{% endif %}</td>
        <td>{{ PET.iPetType }}</td>
        <td>{{ PET.iPetSex }}</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 %}