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

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

{% block page_header %}
<div class="page-header">
    <h1><i class="fas fa-home"></i> Welcome to LabHelper</h1>
    <p class="breadcrumb">Organize and track your lab inventory</p>
</div>
{% endblock %}

{% block content %}
<div class="section">
    <h2><i class="fas fa-box"></i> Boxes</h2>
    {% if boxes %}
    <div class="box-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
        {% for box in boxes %}
        <div class="box-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 20px; border-radius: 12px; border: 1px solid #e0e0e0; transition: all 0.3s ease; cursor: pointer;">
            <a href="{% url 'box_detail' box.id %}" style="text-decoration: none; color: #333; display: block;">
                <div class="box-id" style="font-size: 20px; font-weight: 700; color: #667eea; margin-bottom: 8px;">
                    <i class="fas fa-cube"></i> Box {{ box.id }}
                </div>
                <div class="box-type" style="font-size: 15px; color: #555; margin-bottom: 5px;">
                    {{ box.box_type.name }}
                </div>
                <div class="box-type" style="font-size: 13px; color: #777; margin-bottom: 5px;">
                    <i class="fas fa-ruler-combined"></i> {{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm
                </div>
                <div class="box-type" style="font-size: 13px; color: #777;">
                    <i class="fas fa-layer-group"></i> {{ box.things.count }} item{{ box.things.count|pluralize }}
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p style="text-align: center; color: #888; font-size: 16px; padding: 40px;">
        <i class="fas fa-box-open" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
        No boxes found.
    </p>
    {% endif %}
</div>

<div class="section">
    <h2><i class="fas fa-folder-tree"></i> Thing Types</h2>
    {% if thing_types %}
    <ul class="tree" style="list-style: none; padding-left: 0;">
        {% recursetree thing_types %}
        <li style="padding: 8px 0;">
            <div class="tree-item" style="display: flex; align-items: center; gap: 8px;">
                {% if children %}
                <span class="toggle-handle" style="display: inline-block; width: 24px; color: #667eea; font-weight: bold; cursor: pointer; transition: transform 0.2s;">[-]</span>
                {% else %}
                <span class="toggle-handle" style="display: inline-block; width: 24px; color: #ccc;">&nbsp;</span>
                {% endif %}
                <a href="{% url 'thing_type_detail' node.pk %}" style="color: #667eea; text-decoration: none; font-size: 16px; font-weight: 500; transition: color 0.2s;">{{ node.name }}</a>
                {% if node.things.exists %}
                <span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;">{{ node.things.count }}</span>
                {% endif %}
            </div>
            {% if children %}
            <ul style="list-style: none; padding-left: 32px;">
                {{ children }}
            </ul>
            {% endif %}
        </li>
        {% endrecursetree %}
    </ul>
    {% else %}
    <p style="text-align: center; color: #888; font-size: 16px; padding: 40px;">
        <i class="fas fa-folder-open" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
        No thing types found.
    </p>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.toggle-handle').click(function(e) {
        e.stopPropagation();
        var $ul = $(this).closest('li').children('ul');
        if ($ul.length) {
            $ul.slideToggle(200);
            $(this).text($ul.is(':visible') ? '[-]' : '[+]');
        }
    });
    
    $('.box-card').hover(
        function() {
            $(this).css('transform', 'translateY(-5px)');
            $(this).css('box-shadow', '0 12px 24px rgba(102, 126, 234, 0.2)');
        },
        function() {
            $(this).css('transform', 'translateY(0)');
            $(this).css('box-shadow', 'none');
        }
    );
});
</script>
{% endblock %}