{% extends 'mysite/base.html' %} 

{% block title %} 
    <title>Storage List</title>
{% endblock title %} 

{% block content %}
<div class="mt-3">

  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center">
      <i class="fas fa-box"></i> Vaccine Storage List
    </h3>
    <a href="{% url 'center:create-storage' center_id %}"><i class="fas fa-plus"></i> Create Storage</a>
  </div>

  <table class="table table-responsive table-hover text-center">
    <thead>
      <tr>
        <th scope="col">Center Name</th>
        <th scope="col">Vaccine Name</th>
        <th scope="col">Total Quantity</th>
        <th scope="col">Booked Quantity</th>
        <th scope="col">Select</th>
      </tr>
    </thead>
    
    <tbody>
      {% for storage in page_obj %}
      <tr>
        <td>{{ storage.center.name }}</td>
        <td>{{ storage.vaccine.name }}</td>
        <td>{{ storage.total_quantity }}</td>
        <td>{{ storage.booked_quantity }}</td>
        <td><a href="{% url 'center:storage-detail' storage.id %}" class="btn-sm btn-outline-primary">View Details</a></td>
      </tr>
      {% endfor %}
    </tbody>
    
  </table>
  {% include "components/pagination.html" %}
</div>
{% endblock content %}