labhelper/boxes/templates/boxes/thing_detail.html

{% 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 class="lightbox-trigger" data-url="{{ thing.picture.url }}" 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); cursor: pointer; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
            {% 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 %}
                    {% if file.filename|lower|slice:"-4:" == '.jpg' or file.filename|lower|slice:"-5:" == '.jpeg' or file.filename|lower|slice:"-4:" == '.png' or file.filename|lower|slice:"-5:" == '.webp' or file.filename|lower|slice:"-4:" == '.gif' or file.filename|lower|slice:"-4:" == '.svg' or file.filename|lower|slice:"-4:" == '.bmp' or file.filename|lower|slice:"-5:" == '.tiff' or file.filename|lower|slice:"-4:" == '.ico' %}
                    {% thumbnail file.file "200x200" crop="center" as thumb %}
                    <div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border:1px solid #e9ecef;">
                        <img class="lightbox-trigger" data-url="{{ file.file.url }}" src="{{ thumb.url }}" alt="{{ file.title }}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                        <div style="flex-grow: 1;">
                            <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>
                        <i class="fas fa-expand lightbox-trigger" data-url="{{ file.file.url }}" style="color: #999; font-size: 14px; cursor: pointer;"></i>
                    </div>
                    {% endthumbnail %}
                    {% else %}
                    <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>
                    {% endif %}
                    {% 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>

<div class="lightbox" id="lightbox">
    <span class="lightbox-close">&times;</span>
    <img id="lightbox-image" src="" alt="">
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.lightbox-trigger').on('click', function(e) {
        e.preventDefault();
        const imageUrl = $(this).data('url');
        $('#lightbox-image').attr('src', imageUrl);
        $('#lightbox').addClass('active');
        $('body').css('overflow', 'hidden');
    });

    $('#lightbox').on('click', function(e) {
        if (e.target === this || e.target.classList.contains('lightbox-close')) {
            $('#lightbox').removeClass('active');
            $('body').css('overflow', 'auto');
        }
    });

    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            $('#lightbox').removeClass('active');
            $('body').css('overflow', 'auto');
        }
    });
});
</script>
{% 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;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    z-index: 10000;
    transition: opacity 0.2s;
}

.lightbox-close:hover {
    opacity: 0.7;
}
</style>
{% endblock %}