{% load pi_fyad_tags %}

<div class="col-md-6 col-xl-4 mb-3">
    <div class="card h-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    {% eve_type_icon pin.type_id 32 %}
                    <span class="ms-2 fw-bold small">{{ pin.type_name }}</span>
                </div>
                <span class="small {% if pin.storage_fill_pct >= 95 %}text-danger fw-bold{% elif pin.storage_fill_pct >= 80 %}text-warning{% else %}text-muted{% endif %}">
                    {{ pin.storage_fill_pct|percentage }}
                </span>
            </div>

            <!-- Fill Bar -->
            <div class="progress mb-3" style="height: 8px;">
                <div class="progress-bar {{ pin|storage_fill_class }}"
                     style="width: {{ pin|storage_fill_bar_width }}%"
                     role="progressbar"
                     aria-valuenow="{{ pin.storage_fill_pct }}"
                     aria-valuemin="0"
                     aria-valuemax="100">
                </div>
            </div>

            <div class="small text-muted mb-2">
                {{ pin.storage_used_m3|format_m3 }} / {{ pin.storage_capacity_m3|format_m3 }}
            </div>

            <!-- Contents -->
            {% if contents %}
            <table class="table table-sm table-borderless mb-0 small">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th class="text-end">Qty</th>
                        <th class="text-end">Vol</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in contents %}
                    <tr>
                        <td>
                            {% eve_type_icon item.type_id 16 %}
                            <span class="ms-1">{{ item.type_name }}</span>
                        </td>
                        <td class="text-end">{{ item.quantity|format_quantity }}</td>
                        <td class="text-end">{{ item.total_volume|format_m3 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <span class="text-muted small">Empty</span>
            {% endif %}
        </div>
    </div>
</div>