{% extends "base.html" %}

{% block title %}Boxes - LabHelper{% endblock %}

{% block page_header %}
<div class="page-header">
    <h1><i class="fas fa-boxes"></i> Boxes</h1>
    <p class="breadcrumb">
        <a href="/"><i class="fas fa-home"></i> Home</a> / Boxes
    </p>
</div>
{% endblock %}

{% block content %}
{% if boxes %}
<div class="section" style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Box ID</th>
                <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Type</th>
                <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Dimensions (mm)</th>
                <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Contents</th>
                <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Item Count</th>
            </tr>
        </thead>
        <tbody>
            {% for box in boxes %}
            <tr style="border-bottom: 1px solid #e0e0e0; transition: background 0.2s;" class="box-row">
                <td style="padding: 15px 20px; font-weight: 700; color: #667eea;">
                    <a href="{% url 'box_detail' box.id %}" style="text-decoration: none; color: inherit;">Box {{ box.id }}</a>
                </td>
                <td style="padding: 15px 20px;">{{ box.box_type.name }}</td>
                <td style="padding: 15px 20px;">{{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }}</td>
                <td style="padding: 15px 20px; color: #555;">
                    {% if box.things.all %}
                        <div style="display: flex; flex-wrap: wrap; gap: 5px;">
                            {% for thing in box.things.all %}
                                <a href="{% url 'thing_detail' thing.id %}" style="display: inline-block; padding: 4px 10px; background: #f0f0f0; border-radius: 12px; text-decoration: none; color: #333; font-size: 13px; font-weight: 500;">{{ thing.name }}</a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <span style="color: #999; font-style: italic;">Empty</span>
                    {% endif %}
                </td>
                <td style="padding: 15px 20px; font-weight: 600;">{{ box.things.count }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="section" style="text-align: center; padding: 60px 30px;">
    <i class="fas fa-box-open" style="font-size: 64px; color: #ddd; margin-bottom: 20px; display: block;"></i>
    <h3 style="color: #888; font-size: 20px;">No boxes found</h3>
    <p style="color: #999; margin-top: 10px;">Create your first box to get started.</p>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.box-row').hover(
        function() {
            $(this).css('background', '#f8f9fa');
        },
        function() {
            $(this).css('background', 'white');
        }
    );
});
</script>
{% endblock %}