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

{% block title %}{{ thing_type.name }} - LabHelper{% endblock %}

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

{% block content %}
<div class="section" style="padding: 20px;">
    {% if thing_type.parent %}
    <div style="margin-bottom: 15px; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 10px; border-left: 4px solid #667eea;">
        <span style="color: #666; font-size: 14px;">
            <i class="fas fa-level-up-alt"></i> Parent: 
            <a href="{% url 'thing_type_detail' thing_type.parent.id %}" style="color: #667eea; text-decoration: none; font-weight: 500;">{{ thing_type.parent.name }}</a>
        </span>
    </div>
    {% endif %}
    
    {% if thing_type.children.exists %}
    <div style="margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 10px; border-left: 4px solid #764ba2;">
        <span style="color: #666; font-size: 14px;">
            <i class="fas fa-sitemap"></i> Subtypes:
            {% for child in thing_type.children.all %}
            <a href="{% url 'thing_type_detail' child.id %}" style="color: #667eea; text-decoration: none; font-weight: 500; margin-left: 8px;">{{ child.name }}</a>
            {% endfor %}
        </span>
    </div>
    {% endif %}
</div>

{% if things_by_type %}
{% for subtype, things in things_by_type.items %}
<div class="section">
    <h2><i class="fas fa-cubes"></i> {{ subtype.name }}</h2>
    {% if things %}
    <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;">Box</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;">
                        <a href="{% url 'box_detail' thing.box.id %}" style="color: #667eea; text-decoration: none;">Box {{ thing.box.id }}</a>
                        <br><span style="color: #999; font-size: 13px;">{{ thing.box.box_type.name }}</span>
                    </td>
                    <td style="padding: 15px 20px; color: #777;">{{ thing.description|default:"-" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div style="text-align: center; padding: 40px; color: #999;">
        <i class="fas fa-inbox" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
        No things in this category
    </div>
    {% endif %}
</div>
{% endfor %}
{% else %}
<div class="section" style="text-align: center; padding: 60px 30px;">
    <i class="fas fa-folder-open" style="font-size: 64px; color: #ddd; margin-bottom: 20px; display: block;"></i>
    <h3 style="color: #888; font-size: 20px;">No things found</h3>
    <p style="color: #999; margin-top: 10px;">This category or its subcategories are empty.</p>
</div>
{% endif %}
{% endblock %}

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