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

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

{% block page_header %}
<div class="page-header" style="display: flex; justify-content: space-between; align-items: start;">
    <div>
        <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>
    <a href="{% url 'edit_thing' thing.id %}" class="btn" style="margin-top: 10px;">
        <i class="fas fa-edit"></i> Edit
    </a>
</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; width: 100%; max-width: 400px;">
            {% if thing.picture %}
            {% thumbnail thing.picture "400x400" crop="center" as thumb %}
            <img src="{{ thumb.url }}" alt="{{ thing.name }}" style="width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
            {% endthumbnail %}
            {% else %}
            <div style="width: 100%; aspect-ratio: 1; max-width: 400px; max-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;">
            {% if thing.tags.all %}
            <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-tags"></i> Tags
                </div>
                <div style="display: flex; flex-direction: column; gap: 12px;">
                    {% regroup thing.tags.all by facet as facet_list %}
                    {% for facet in facet_list %}
                    <div>
                        <div style="font-size: 12px; color: {{ facet.grouper.color }}; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;">
                            {{ facet.grouper.name }}
                        </div>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                            {% for tag in facet.list %}
                            <span style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: {{ facet.grouper.color }}20; color: {{ facet.grouper.color }}; border: 2px solid {{ facet.grouper.color }}; border-radius: 20px; font-size: 14px; font-weight: 600;">
                                {{ tag.name }}
                            </span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <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 class="markdown-content" style="font-size: 16px; color: #555; line-height: 1.6;">
                    {{ thing.description|render_markdown }}
                </div>
            </div>
            {% endif %}

            {% if thing.files.all %}
            <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-file-alt"></i> Files
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    {% for file in thing.files.all %}
                    <div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                        <i class="fas fa-paperclip" style="color: #667eea; font-size: 16px;"></i>
                        <a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
                        <span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if thing.links.all %}
            <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-link"></i> Links
                </div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    {% for link in thing.links.all %}
                    <div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                        <i class="fas fa-external-link-alt" style="color: #667eea; font-size: 16px;"></i>
                        <a href="{{ link.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ link.title }}</a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.markdown-content p {
    margin: 0 0 1em 0;
}
.markdown-content p:last-child {
    margin-bottom: 0;
}
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
    margin: 1.5em 0 0.5em 0;
    color: #333;
    font-weight: 600;
}
.markdown-content h1:first-child, .markdown-content h2:first-child,
.markdown-content h3:first-child {
    margin-top: 0;
}
.markdown-content ul, .markdown-content ol {
    margin: 0.5em 0;
    padding-left: 2em;
}
.markdown-content li {
    margin: 0.25em 0;
}
.markdown-content code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}
.markdown-content pre {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}
.markdown-content pre code {
    background: none;
    padding: 0;
}
.markdown-content blockquote {
    border-left: 4px solid #667eea;
    margin: 1em 0;
    padding: 0.5em 1em;
    background: #f8f9fa;
    color: #666;
}
.markdown-content a {
    color: #667eea;
    text-decoration: none;
}
.markdown-content a:hover {
    text-decoration: underline;
}
.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
.markdown-content th, .markdown-content td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: left;
}
.markdown-content th {
    background: #f8f9fa;
    font-weight: 600;
}
.markdown-content hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 1.5em 0;
}
</style>
{% endblock %}