{% extends "base.html" %}
{% block body_class %}page-bg bg-orders{% endblock %}
{% block content %}
<style>
  body.bg-orders {
    background-color: #B3B3DA;
    background-image:
      linear-gradient(rgba(179, 179, 218, 0.75), rgba(179, 179, 218, 0.75)),
      url('{{ url_for("static", filename="bg/bg_zakaz.png", v=1) }}');
    background-size: auto 40vh;
  }
  .orders-page .card {
    background-color: #B3B3DA;
    border: 1px solid #B3B3DA;
    box-shadow: none;
  }
  .orders-page .card-body {
    background-color: transparent;
  }
  .orders-page .form-control,
  .orders-page .form-select {
    background-color: #ffffff;
    border: 1px solid #B3B3DA;
  }
  .orders-page .form-control:focus,
  .orders-page .form-select:focus {
    box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.15);
    border-color: #B3B3DA;
  }
</style>
<div class="orders-page">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h3 class="mb-0">Заказанные картриджи</h3>
    <div class="d-flex gap-2">
      {% if session.get('role') in ('admin','storekeeper') %}
      <form method="post" action="/orders/clear" onsubmit="return confirm('Очистить все заказы?');">
        <button class="btn btn-outline-danger" type="submit">Очистить заказы</button>
      </form>
      {% endif %}
      <a class="btn btn-success" href="/report/orders.xlsx">Экспорт в Excel</a>
    </div>
  </div>

  <table class="table table-striped table-sm">
    <tr>
      <th>Модель картриджа</th>
      <th>Модель устройства</th>
      <th>Количество</th>
      <th>Дата добавления заказа</th>
    </tr>
    {% for last_date, model, device_model, qty in rows %}
    <tr>
      <td>{{ model }}</td>
      <td>{{ device_model }}</td>
      <td>{{ qty }}</td>
      <td>{{ last_date }}</td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endblock %}