{% extends "base.html" %}
{% load thumbnail %}
{% load dict_extras %}

{% block title %}Box {{ box.id }} - LabHelper{% endblock %}

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

{% block content %}
<div class="section">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;">
        <div>
            <div style="font-size: 16px; color: #555; margin-bottom: 5px;">
                <strong><i class="fas fa-cube"></i> Type:</strong> {{ box.box_type.name }}
            </div>
            <div style="font-size: 14px; color: #777;">
                <i class="fas fa-ruler-combined"></i> {{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm
            </div>
        </div>
        <a href="{% url 'add_things' box.id %}" class="btn">
            <i class="fas fa-plus"></i> Add Things
        </a>
    </div>
</div>

{% if things %}
<div class="section">
    <div 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;">Picture</th>
                    <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Name</th>
                    <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Tags</th>
                    <th style="padding: 15px 20px; text-align: left; font-weight: 600;">Description</th>
                </tr>
            </thead>
            <tbody>
                {% for thing in things %}
                <tr style="border-bottom: 1px solid #e0e0e0; transition: background 0.2s;">
                    <td style="padding: 15px 20px;">
                        {% if thing.picture %}
                        {% thumbnail thing.picture "50x50" crop="center" as thumb %}
                        <img src="{{ thumb.url }}" alt="{{ thing.name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px;">
                        {% endthumbnail %}
                        {% else %}
                        <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%); display: flex; align-items: center; justify-content: center; color: #999; border-radius: 8px; font-size: 11px;">No image</div>
                        {% endif %}
                    </td>
                    <td style="padding: 15px 20px;">
                        <a href="{% url 'thing_detail' thing.id %}" style="color: #667eea; text-decoration: none; font-weight: 500;">{{ thing.name }}</a>
                    </td>
                    <td style="padding: 15px 20px;">
                        {% if thing.tags.all %}
                        {% for tag in thing.tags.all %}
                        <span style="display: inline-block; padding: 3px 8px; margin: 2px; border-radius: 12px; font-size: 11px; background: {{ tag.facet.color }}20; color: {{ tag.facet.color }}; border: 1px solid {{ tag.facet.color }}40;">{{ tag.name }}</span>
                        {% endfor %}
                        {% else %}
                        <span style="color: #999; font-style: italic; font-size: 13px;">-</span>
                        {% endif %}
                    </td>
                    <td style="padding: 15px 20px; color: #777;">{{ thing.description|truncate_markdown:100|default:"-" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</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;">This box is empty</h3>
    <p style="color: #999; margin-top: 10px;">Add some items to get started!</p>
    <a href="{% url 'add_things' box.id %}" class="btn" style="margin-top: 20px;">
        <i class="fas fa-plus"></i> Add Things
    </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
$('tbody tr').hover(
    function() {
        $(this).css('background', '#f8f9fa');
    },
    function() {
        $(this).css('background', 'white');
    }
);
</script>
{% endblock %}