{% extends "base.html" %}

{% 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-tags"></i> Tags</h2>
    {% if facet_tag_counts %}
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
        {% for facet, tags_with_counts in facet_tag_counts.items %}
        <div class="facet-card" style="background: white; border-radius: 12px; border: 1px solid #e0e0e0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
            <div class="facet-header" style="padding: 15px 20px; background: linear-gradient(135deg, {{ facet.color }} 0%, {{ facet.color }}dd 100%); color: white; display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <i class="fas fa-chevron-right facet-toggle" style="transition: transform 0.3s;"></i>
                    <span style="font-size: 18px; font-weight: 700;">{{ facet.name }}</span>
                </div>
                <span style="background: rgba(255,255,255,0.3); padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;">{{ facet.cardinality }}</span>
            </div>
            <div class="facet-tags" style="padding: 15px 20px; display: none;">
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    {% for tag, count in tags_with_counts %}
		    <a href="/search/?q={{ facet.name }}:{{ tag.name }}" style="display: inline-block; padding: 6px 12px; background: {{ facet.color }}20; color: {{ facet.color }}; border: 1px solid {{ facet.color }}; border-radius: 15px; text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.2s;">
                        {{ tag.name }}
                        <span style="background: {{ facet.color }}; color: white; padding: 1px 8px; border-radius: 10px; margin-left: 6px; font-size: 12px;">{{ count }}</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p style="text-align: center; color: #888; font-size: 16px; padding: 40px;">
        <i class="fas fa-tag" style="font-size: 48px; margin-bottom: 15px; display: block;"></i>
        No tags found.
    </p>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.facet-header').click(function() {
        const $content = $(this).next('.facet-tags');
        const $icon = $(this).find('.facet-toggle');

        $content.slideToggle(200);
        if ($content.is(':visible')) {
            $icon.css('transform', 'rotate(90deg)');
        } else {
            $icon.css('transform', 'rotate(0deg)');
        }
    });

    $('.facet-card a').hover(
        function() {
            $(this).css('transform', 'scale(1.05)');
        },
        function() {
            $(this).css('transform', 'scale(1)');
        }
    );

    $('.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 %}