{% extends 'base.html' %}
{% load static%}

{% block title %}
  Pending Transactions
{% endblock %}
 
 {% block extra_css %}
<link rel="stylesheet" href="{% static 'CSS/pending_transactions.css' %}">
 {% endblock %}

 {% block header %}
  Pending Transactions
{% endblock %}

{% block extra %}
  <hr />
{% endblock %}💡

{% block content %}
  <div class="pending_transactions_container">
    <table border="1" cellpadding="6" style=" border-collapse: collapse; width:80%; background:white; color:black;">
      <thead style=" background:#80a2ff !important;">
        <tr>
          <th>User</th>
          <th>Car id</th>
          <th>Type</th>
          <th>Soda</th>
          <th>Water</th>
          <th>Requested At</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for order in transactions %}
          <tr>
            <td>{{ order.user.username|capfirst }}</td>
            {% if order.transaction_type|title == 'Add' %}
              <td>None</td>
            {% else %}
              <td>{{ order.car_id }}</td>
            {% endif %}
            <td>{{ order.transaction_type|title }}</td>
            <td>{{ order.soda_amount }}</td>
            <td>{{ order.water_amount }}</td>
            <td>{{ order.created_on|title }}</td>
            <td>
              <a href="{% url 'confirm_transaction' order.id %}"><button>Action</button></a>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="6">No pending transactions</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}