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

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

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

{% block content %}
<div class="section">
    <div class="thing-card" style="display: flex; gap: 40px; flex-wrap: wrap;">
        <div class="thing-image" style="flex-shrink: 0;">
            {% if thing.picture %}
            {% thumbnail thing.picture "400x400" crop="center" as thumb %}
            <img src="{{ thumb.url }}" alt="{{ thing.name }}" style="width: 400px; height: 400px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
            {% endthumbnail %}
            {% else %}
            <div style="width: 400px; height: 400px; background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%); display: flex; align-items: center; justify-content: center; color: #999; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
                <div style="text-align: center;">
                    <i class="fas fa-image" style="font-size: 64px; margin-bottom: 15px; display: block;"></i>
                    No image
                </div>
            </div>
            {% endif %}
        </div>
        
        <div class="thing-details" style="flex-grow: 1; min-width: 300px;">
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-tag"></i> Type
                </div>
                <div style="font-size: 18px; color: #333; font-weight: 500;">
                    {{ thing.thing_type.name }}
                </div>
            </div>
            
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-map-marker-alt"></i> Location
                </div>
                <div style="font-size: 18px; color: #333;">
                    <a href="{% url 'box_detail' thing.box.id %}" style="color: #667eea; text-decoration: none; font-weight: 500;">Box {{ thing.box.id }}</a>
                    <span style="color: #999;"> ({{ thing.box.box_type.name }})</span>
                </div>
            </div>
            
            {% if thing.description %}
            <div class="detail-row" style="margin-bottom: 25px;">
                <div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
                    <i class="fas fa-align-left"></i> Description
                </div>
                <div style="font-size: 16px; color: #555; line-height: 1.6; white-space: pre-wrap;">
                    {{ thing.description }}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<form method="post" class="section">
    {% csrf_token %}
    <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
        <div style="flex-grow: 1;">
            <label for="new_box" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">
                <i class="fas fa-exchange-alt"></i> Move to:
            </label>
            <select name="new_box" id="new_box" style="width: 100%; max-width: 400px; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; background: white; cursor: pointer; transition: all 0.3s;">
                <option value="">Select a box...</option>
                {% for box in boxes %}
                <option value="{{ box.id }}" {% if box.id == thing.box.id %}selected{% endif %}>
                    Box {{ box.id }} ({{ box.box_type.name }})
                </option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn" style="height: 48px; min-width: 120px; margin-top: 24px;">
            <i class="fas fa-arrows-alt"></i> Move
        </button>
    </div>
</form>

{% endblock %}

{% block extra_js %}
<script>
$('#new_box').on('focus', function() {
    $(this).css('border-color', '#667eea');
    $(this).css('box-shadow', '0 0 0 3px rgba(102, 126, 234, 0.1)');
}).on('blur', function() {
    $(this).css('border-color', '#e0e0e0');
    $(this).css('box-shadow', 'none');
});
</script>
{% endblock %}