genealogy-app/templates/member_detail.html

{% extends "layout.html" %}

{% block title %}成员详情 - {{ member.name }}{% endblock %}

{% block extra_css %}
<style>
    .info-label { color: #6c757d; font-weight: normal; width: 120px; display: inline-block; }
    .info-value { color: #212529; font-weight: 500; }
    .detail-section { background: white; border-radius: 8px; padding: 25px; margin-bottom: 20px; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
    .section-title { font-size: 1.1rem; font-weight: bold; border-bottom: 2px solid #f8f9fa; padding-bottom: 10px; margin-bottom: 20px; color: #0d6efd; }
    .relation-card { border-left: 4px solid #198754; background: #f8fff9; padding: 10px 15px; margin-bottom: 10px; border-radius: 4px; }
    
    /* Image Preview in Sidebar */
    .source-image-preview {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        transition: transform 0.2s;
    }
    .source-image-preview:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .source-image-preview img {
        width: 100%;
        height: auto;
        display: block;
    }
    .preview-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.6);
        color: white;
        padding: 5px;
        text-align: center;
        font-size: 0.8rem;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .source-image-preview:hover .preview-overlay {
        opacity: 1;
    }
    #detailImageTabNav .nav-link { cursor: pointer; font-size: 0.85rem; padding: 0.3rem 0.6rem; }
    .image-empty-hint { color: #6c757d; font-size: 0.85rem; padding: 20px; text-align: center; }
    .detail-preview-empty {
        min-height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border: 1px dashed #dee2e6;
        border-radius: 4px;
        color: #6c757d;
        font-size: 0.9rem;
    }

    /* Modal Image Viewer */
    .modal-image-container {
        height: 80vh;
        display: flex;
        flex-direction: column;
    }
    .image-toolbar {
        background: #e9ecef;
        padding: 5px 10px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }
    .image-viewer { 
        flex: 1; 
        border: 1px solid #ccc; 
        background: #f0f0f0; 
        overflow: hidden; 
        text-align: center; 
        position: relative; 
        cursor: grab;
        user-select: none;
    }
    .image-viewer:active {
        cursor: grabbing;
    }
    .image-wrapper {
        display: inline-block;
        transition: transform 0.2s ease-out;
        transform-origin: center center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .image-wrapper img {
        max-width: 100%;
        max-height: 100%; /* Fit within viewer initially */
        display: block;
        pointer-events: none;
        user-select: none;
        transition: filter 0.2s;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
    /* 放大镜样式 - Optional if we want it in modal too */
    .magnifier-glass {
        position: absolute;
        border: 3px solid #000;
        border-radius: 50%;
        cursor: none;
        width: 150px;
        height: 150px;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        display: none;
        z-index: 1000;
        background-repeat: no-repeat;
        background-color: white;
        pointer-events: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-person-badge"></i> {{ member.name }} 的个人详情</h2>
        <div class="btn-group">
            <a href="{{ url_for('edit_member', member_id=member.id) }}" class="btn btn-primary">
                <i class="bi bi-pencil"></i> 编辑信息
            </a>
            <a href="{{ url_for('members') }}" class="btn btn-outline-secondary">返回列表</a>
        </div>
    </div>

    <div class="row">
        <!-- 基本与核心信息 -->
        <div class="col-md-8">
            <div class="detail-section">
                <div class="section-title">基本信息</div>
                {% if adopt_info %}
                <div class="alert alert-warning d-flex align-items-center mb-3 py-2 px-3" role="alert" style="border-left: 4px solid #fd7e14; background:#fff8f0;">
                    <i class="bi bi-house-door-fill me-2 text-warning"></i>
                    <span class="fw-bold">{{ adopt_info }}</span>
                </div>
                {% endif %}
                <div class="row g-3">
                    <div class="col-md-6">
                        <span class="info-label">姓名（繁体）：</span>
                        <span class="info-value">{{ member.name }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">姓名（简体）：</span>
                        <span class="info-value">{{ member.simplified_name or '-' }}</span>
                    </div>
                    <div class="col-md-12">
                        <span class="info-label d-block mb-1">族谱原文（繁体）：</span>
                        <span class="info-value">{{ member.genealogy_original_traditional if member.genealogy_original_traditional and member.genealogy_original_traditional != 'None' else '-' }}</span>
                    </div>
                    <div class="col-md-12">
                        <span class="info-label d-block mb-1">族谱原文（简体）：</span>
                        <span class="info-value">{{ member.genealogy_original_simplified if member.genealogy_original_simplified and member.genealogy_original_simplified != 'None' else '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">性别：</span>
                        <span class="info-value">{{ '男' if member.sex == 1 else '女' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">曾用名：</span>
                        <span class="info-value">{{ member.former_name or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">幼名/乳名：</span>
                        <span class="info-value">{{ member.childhood_name or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">出生日期：</span>
                        <span class="info-value">{{ member.birthday_str or '未知' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">民族：</span>
                        <span class="info-value">{{ member.nation or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">状态：</span>
                        <span class="info-value">
                            {% if member.is_pass_away == 1 %}
                                <span class="text-danger">已故</span>
                            {% elif member.is_pass_away == 2 %}
                                <span class="text-warning">未知</span>
                            {% else %}
                                <span class="text-success">健在</span>
                            {% endif %}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">婚姻状况：</span>
                        <span class="info-value">
                            {% set marital_map = {0: '未知', 1: '未婚', 2: '已婚', 3: '离异/丧偶'} %}
                            {{ marital_map.get(member.marital_status, '未知') }}
                        </span>
                    </div>
                </div>

                <div class="section-title mt-4">谱系资料</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <span class="info-label">字辈：</span>
                        <span class="info-value">{{ member.name_word or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">堂内排行：</span>
                        <span class="info-value">{{ member.family_rank or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">世系世代：</span>
                        <span class="info-value">
                            {% if member.name_word_generation %}
                                {% set generations = member.name_word_generation.split(';') %}
                                <span class="d-inline-flex flex-wrap gap-1 align-items-center">
                                {% for gen in generations %}
                                    {% if gen.strip() %}
                                    <span class="badge rounded-pill px-3 py-1" style="background: linear-gradient(135deg, #e8f0fe, #d2e3fc); color: #1a56db; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.5px; border: 1px solid rgba(26,86,219,0.15);">
                                        <i class="bi bi-diagram-3 me-1" style="font-size: 0.7rem;"></i>{{ gen.strip() }}
                                    </span>
                                    {% endif %}
                                {% endfor %}
                                </span>
                            {% else %}
                                -
                            {% endif %}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">名号/封号：</span>
                        <span class="info-value">{{ member.name_title or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">分房/堂号：</span>
                        <span class="info-value">{{ member.branch_family_hall or '-' }}</span>
                    </div>
                    <div class="col-md-12">
                        <span class="info-label">聚居地：</span>
                        <span class="info-value">{{ member.cluster_place or '-' }}</span>
                    </div>
                </div>

                <div class="section-title mt-4">联系与地址</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <span class="info-label">手机号：</span>
                        <span class="info-value">{{ member.phone or '-' }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="info-label">微信号：</span>
                        <span class="info-value">{{ member.wechat_account or '-' }}</span>
                    </div>
                    <div class="col-md-12">
                        <span class="info-label">现居住址：</span>
                        <span class="info-value">{{ member.residential_address or '-' }}</span>
                    </div>
                </div>
            </div>

            <div class="detail-section">
                <div class="section-title">个人履历与成就</div>
                <div class="mb-4">
                    <label class="info-label d-block mb-2">标签：</label>
                    <div class="p-3 bg-light rounded">{{ member.tags or '暂无' }}</div>
                </div>
                <div class="mb-4">
                    <label class="info-label d-block mb-2">人员备注：</label>
                    <div class="p-3 bg-light rounded">{{ member.notes or '暂无' }}</div>
                </div>
                <div class="mb-4">
                    <label class="info-label d-block mb-2">疑似错误标注：</label>
                    <div class="p-3 bg-warning bg-opacity-10 border border-warning rounded text-warning">
                        {{ member.suspected_error or '暂无' }}
                    </div>
                </div>
                <div class="mb-4">
                    <label class="info-label d-block mb-2">职业背景：</label>
                    <div class="p-3 bg-light rounded">{{ member.occupation or '暂无信息' }}</div>
                </div>
                <div class="mb-4">
                    <label class="info-label d-block mb-2">教育经历：</label>
                    <div class="p-3 bg-light rounded">{{ member.educational or '暂无信息' }}</div>
                </div>
                <div>
                    <label class="info-label d-block mb-2">个人成就：</label>
                    <div class="p-3 bg-light rounded">{{ member.personal_achievements or '暂无信息' }}</div>
                </div>
            </div>
        </div>

        <!-- 关系信息与原图 -->
        <div class="col-md-4">
            
            {% if member.source_image_url or member.reference_image_url %}
            <div class="detail-section">
                <div class="section-title">家谱图片</div>
                <ul class="nav nav-tabs mb-3" id="detailImageTabNav">
                    <li class="nav-item">
                        <button type="button" class="nav-link" id="detail-tab-scan" onclick="switchDetailImageTab('scan')">
                            <i class="bi bi-file-earmark-image"></i> 查看扫描件
                        </button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" id="detail-tab-reference" onclick="switchDetailImageTab('reference')">
                            <i class="bi bi-file-earmark-plus"></i> 查看参考件
                        </button>
                    </li>
                </ul>
                <div class="source-image-preview" onclick="openImageViewer()">
                    <img id="detailPreviewImage" src="" alt="家谱图片" style="display: none;">
                    <div id="detailPreviewEmpty" class="detail-preview-empty" style="display: none;">
                        <span><i class="bi bi-image"></i> 暂无扫描件</span>
                    </div>
                    <div class="preview-overlay">
                        <i class="bi bi-arrows-fullscreen"></i> <span id="detailPreviewHint">点击查看大图</span>
                    </div>
                </div>
                <div class="mt-3 small text-muted bg-light p-2 rounded" id="detailScanMeta">
                    <div class="mb-1"><i class="bi bi-journal-text me-1"></i><strong>版本名称：</strong> {{ member.genealogy_version or '未提供' }}</div>
                    <div class="mb-1"><i class="bi bi-archive me-1"></i><strong>版本来源：</strong> {{ member.genealogy_source or '未提供' }}</div>
                    <div><i class="bi bi-person me-1"></i><strong>文件提供人：</strong> {{ member.upload_person or '未提供' }}</div>
                </div>
                <div class="mt-3 small text-muted bg-light p-2 rounded" id="detailReferenceMeta" style="display: none;">
                    <div class="mb-1"><i class="bi bi-file-earmark me-1"></i><strong>文件名：</strong> {{ member.reference_file_name or '未提供' }}</div>
                    <div><i class="bi bi-clock me-1"></i><strong>上传时间：</strong> {{ member.reference_upload_time or '未提供' }}</div>
                </div>
            </div>
            {% endif %}

            <div class="detail-section">
                <div class="section-title">家族关系</div>
                
                <h6 class="fw-bold mb-3"><i class="bi bi-arrow-up-circle me-1"></i> 尊辈/关联人</h6>
                {% set child_order_labels = {1: '长子', 2: '次子', 3: '三子', 4: '四子', 5: '五子', 6: '六子', 7: '七子', 8: '八子', 9: '九子', 10: '十子'} %}
                {% for p in parents %}
                <div class="relation-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ url_for('member_detail', member_id=p.id) }}" class="text-decoration-none fw-bold">
                            {{ p.name }}
                        </a>
                        <div class="d-flex gap-2">
                            <span class="badge bg-success small">
                                {% set rel_map = {1: '父亲', 2: '母亲', 10: '配偶', 11: '兄弟', 12: '姐妹'} %}
                                {{ rel_map.get(p.relation_type, '关联人') }}
                            </span>
                            {% if p.relation_type == 1 and p.child_order %}
                            <span class="badge bg-info small">
                                {{ child_order_labels.get(p.child_order, '第' ~ p.child_order ~ '子') }}
                            </span>
                            {% endif %}
                            {% if p.sub_relation_type %}
                            <span class="badge bg-warning small">
                                {% set sub_rel_map = {0: '亲生', 1: '养父', 2: '出继', 3: '入继', 10: '妾', 11: '外室'} %}
                                {{ sub_rel_map.get(p.sub_relation_type, '') }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% if not parents %}
                <p class="text-muted small">暂无上层关系记录</p>
                {% endif %}

                <h6 class="fw-bold mt-4 mb-3"><i class="bi bi-arrow-down-circle me-1"></i> 子嗣/晚辈</h6>
                {% for c in children %}
                <div class="relation-card" style="border-left-color: #0d6efd; background: #f0f7ff;">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ url_for('member_detail', member_id=c.id) }}" class="text-decoration-none fw-bold">
                            {{ c.name }}
                        </a>
                        <div class="d-flex gap-2">
                            <span class="badge bg-primary small">
                                {% set rel_map = {1: '子女', 2: '子女', 10: '配偶', 11: '兄弟', 12: '姐妹'} %}
                                {{ rel_map.get(c.relation_type, '后辈') }}
                            </span>
                            {% if c.child_order %}
                            <span class="badge bg-info small">
                                {{ child_order_labels.get(c.child_order, '第' ~ c.child_order ~ '子') }}
                            </span>
                            {% endif %}
                            {% if c.sub_relation_type %}
                            <span class="badge bg-warning small">
                                {% set sub_rel_map = {0: '亲生', 1: '养父', 2: '出继', 3: '入继', 10: '妾', 11: '外室'} %}
                                {{ sub_rel_map.get(c.sub_relation_type, '') }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% if not children %}
                <p class="text-muted small">暂无下层关系记录</p>
                {% endif %}
            </div>

            <div class="detail-section text-center">
                <div class="section-title">系统操作</div>
                <div class="small text-muted mb-3">
                    记录创建于：{{ member.create_time }}<br>
                    最后修改：{{ member.modified_time }}
                </div>
                <button class="btn btn-sm btn-outline-danger w-100" onclick="confirmDelete()">
                    <i class="bi bi-trash"></i> 删除此成员
                </button>
                <form id="deleteForm" action="{{ url_for('delete_member', member_id=member.id) }}" method="POST" style="display: none;"></form>
            </div>
        </div>
    </div>
</div>

<!-- Image Viewer Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content bg-light">
            <div class="modal-header py-2">
                <h5 class="modal-title fs-6"><i class="bi bi-image"></i> <span id="modalImageTitle">家谱图片查看</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 modal-image-container">
                <ul class="nav nav-tabs px-3 pt-2 bg-white border-bottom" id="modalImageTabNav">
                    <li class="nav-item">
                        <button type="button" class="nav-link" id="modal-tab-scan" onclick="switchModalImageTab('scan')">
                            <i class="bi bi-file-earmark-image"></i> 查看扫描件
                        </button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" id="modal-tab-reference" onclick="switchModalImageTab('reference')">
                            <i class="bi bi-file-earmark-plus"></i> 查看参考件
                        </button>
                    </li>
                </ul>
                <div class="image-toolbar">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" onclick="rotateImage(-90)" title="左旋90°"><i class="bi bi-arrow-counterclockwise"></i></button>
                        <button type="button" class="btn btn-outline-secondary" onclick="rotateImage(90)" title="右旋90°"><i class="bi bi-arrow-clockwise"></i></button>
                    </div>
                    <div class="d-flex align-items-center gap-2 mx-3 border-start border-end px-3">
                        <i class="bi bi-brightness-high" title="亮度"></i>
                        <input type="range" class="form-range" min="50" max="150" value="100" id="brightnessRange" oninput="updateImageFilter()" style="width: 80px;">
                        <i class="bi bi-circle-half ms-2" title="对比度"></i>
                        <input type="range" class="form-range" min="50" max="200" value="100" id="contrastRange" oninput="updateImageFilter()" style="width: 80px;">
                        <button class="btn btn-link btn-sm text-decoration-none py-0" onclick="resetFilters()">重置</button>
                    </div>
                    <div class="form-check form-switch ms-auto mb-0" title="开启后鼠标悬停图片可局部放大">
                        <input class="form-check-input" type="checkbox" id="magnifierSwitch">
                        <label class="form-check-label small" for="magnifierSwitch">🔍 放大镜</label>
                    </div>
                </div>
                <div class="image-viewer shadow-inner" id="viewer">
                    <div id="magnifier" class="magnifier-glass"></div>
                    <div id="imageWrapper" class="image-wrapper">
                        <img id="refImage" src="" alt="家谱图片" draggable="false" style="display: none;">
                        <div id="modalEmptyState" class="image-empty-hint" style="display: none;">暂无图片</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const scanImageUrl = {{ member.source_image_url | tojson if member.source_image_url else 'null' }};
    const referenceImageUrl = {{ member.reference_image_url | tojson if member.reference_image_url else 'null' }};
    const scanPage = {{ member.source_page | tojson if member.source_page else 'null' }};
    let detailActiveTab = scanImageUrl ? 'scan' : 'reference';
    let modalActiveTab = detailActiveTab;

    function switchDetailImageTab(tab) {
        detailActiveTab = tab;
        document.getElementById('detail-tab-scan').classList.toggle('active', tab === 'scan');
        document.getElementById('detail-tab-reference').classList.toggle('active', tab === 'reference');
        document.getElementById('detailScanMeta').style.display = tab === 'scan' && scanImageUrl ? 'block' : 'none';
        document.getElementById('detailReferenceMeta').style.display = tab === 'reference' && referenceImageUrl ? 'block' : 'none';
        const preview = document.getElementById('detailPreviewImage');
        const previewEmpty = document.getElementById('detailPreviewEmpty');
        const hint = document.getElementById('detailPreviewHint');
        if (tab === 'scan' && scanImageUrl) {
            preview.src = scanImageUrl;
            preview.style.display = 'block';
            previewEmpty.style.display = 'none';
            hint.textContent = scanPage ? `点击查看大图 (第${scanPage}页)` : '点击查看大图';
        } else if (tab === 'reference' && referenceImageUrl) {
            preview.src = referenceImageUrl;
            preview.style.display = 'block';
            previewEmpty.style.display = 'none';
            hint.textContent = '点击查看参考件大图';
        } else if (tab === 'scan') {
            preview.style.display = 'none';
            preview.removeAttribute('src');
            previewEmpty.style.display = 'flex';
            previewEmpty.innerHTML = '<span><i class="bi bi-image"></i> 暂无扫描件</span>';
            hint.textContent = '暂无扫描件';
        } else {
            preview.style.display = 'none';
            preview.removeAttribute('src');
            previewEmpty.style.display = 'flex';
            previewEmpty.innerHTML = '<span><i class="bi bi-file-earmark-plus"></i> 暂无参考件</span>';
            hint.textContent = '暂无参考件';
        }
    }

    function switchModalImageTab(tab) {
        modalActiveTab = tab;
        document.getElementById('modal-tab-scan').classList.toggle('active', tab === 'scan');
        document.getElementById('modal-tab-reference').classList.toggle('active', tab === 'reference');
        updateModalImageDisplay();
        resetFilters();
    }

    function updateModalImageDisplay() {
        const img = document.getElementById('refImage');
        const emptyState = document.getElementById('modalEmptyState');
        const title = document.getElementById('modalImageTitle');
        const url = modalActiveTab === 'scan' ? scanImageUrl : referenceImageUrl;
        if (url) {
            img.src = url;
            img.style.display = 'block';
            emptyState.style.display = 'none';
            title.textContent = modalActiveTab === 'scan'
                ? (scanPage ? `扫描件查看 - 第 ${scanPage} 页` : '扫描件查看')
                : '参考件查看';
        } else {
            img.style.display = 'none';
            img.removeAttribute('src');
            emptyState.style.display = 'block';
            emptyState.textContent = modalActiveTab === 'scan' ? '暂无扫描件' : '暂无参考件';
            title.textContent = '家谱图片查看';
        }
        currentX = 0;
        currentY = 0;
        isZoomedIn = false;
        updateImageTransform();
    }

    document.addEventListener('DOMContentLoaded', function() {
        if (document.getElementById('detailImageTabNav')) {
            switchDetailImageTab(detailActiveTab);
        }
    });

    function confirmDelete() {
        if(confirm('确定要删除此成员吗？\n这将同时删除其所有关联关系记录！')) {
            document.getElementById('deleteForm').submit();
        }
    }

    function openImageViewer() {
        modalActiveTab = detailActiveTab;
        switchModalImageTab(modalActiveTab);
        var myModal = new bootstrap.Modal(document.getElementById('imageModal'));
        myModal.show();
    }

    // --- Image Viewer Logic (Reused from add_member) ---
    // Image State
    let imgRotation = 0;
    let imgBrightness = 100;
    let imgContrast = 100;
    
    // Dragging State
    let isDragging = false;
    let hasDragged = false;
    let startX = 0, startY = 0;
    let currentX = 0, currentY = 0; // Relative to center

    // Zoom State
    let isZoomedIn = false;
    const ZOOM_LEVEL = 2.0;

    // Elements
    const viewer = document.getElementById('viewer');
    const magnifier = document.getElementById('magnifier');
    const magnifierSwitch = document.getElementById('magnifierSwitch');
    const imageWrapper = document.getElementById('imageWrapper');
    const refImage = document.getElementById('refImage');
    
    // Initialize Dragging and Zooming
    if (imageWrapper) {
        // Center initial position logic is handled by CSS (top 50% left 50% translate -50%)
        
        viewer.style.cursor = 'zoom-in';

        viewer.addEventListener('mousedown', (e) => {
            if (e.target.closest('.image-toolbar') || e.target.closest('.magnifier-glass')) return;
            isDragging = true;
            hasDragged = false;
            startX = e.clientX;
            startY = e.clientY;
            
            viewer.style.cursor = 'grabbing';
            e.preventDefault(); 
        });
        
        window.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            
            if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
                hasDragged = true;
            }

            currentX += dx;
            currentY += dy;
            
            startX = e.clientX;
            startY = e.clientY;
            
            updateImageTransform();
        });
        
        window.addEventListener('mouseup', (e) => {
            if (isDragging) {
                isDragging = false;
                viewer.style.cursor = isZoomedIn ? 'grab' : 'zoom-in';
                
                if (!hasDragged && viewer.contains(e.target)) {
                    toggleZoom();
                }
            }
        });
    }

    function toggleZoom() {
        isZoomedIn = !isZoomedIn;
        if (!isZoomedIn) {
            currentX = 0;
            currentY = 0;
        }
        updateImageTransform();
        viewer.style.cursor = isZoomedIn ? 'grab' : 'zoom-in';
    }
    
    // Magnifier Logic
    viewer.addEventListener('mousemove', function(e) {
        if (!magnifierSwitch.checked) {
            magnifier.style.display = 'none';
            return;
        }
        
        if (isDragging) {
             magnifier.style.display = 'none';
             return;
        }
        
        if (!refImage) return;

        const rect = refImage.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
            magnifier.style.display = 'none';
            return;
        }

        magnifier.style.display = 'block';
        
        const glassOffset = 20;
        const viewerRect = viewer.getBoundingClientRect();
        magnifier.style.left = (e.clientX - viewerRect.left + glassOffset) + 'px';
        magnifier.style.top = (e.clientY - viewerRect.top + glassOffset) + 'px';
        
        const zoom = 2.5;
        magnifier.style.backgroundImage = `url('${refImage.src}')`;
        magnifier.style.backgroundSize = `${rect.width * zoom}px ${rect.height * zoom}px`;
        magnifier.style.backgroundPosition = `-${x * zoom - 75}px -${y * zoom - 75}px`; 
    });

    function rotateImage(deg) {
        imgRotation = (imgRotation + deg) % 360;
        updateImageTransform();
    }
    
    function updateImageFilter() {
        imgBrightness = document.getElementById('brightnessRange').value;
        imgContrast = document.getElementById('contrastRange').value;
        applyImageFilters();
    }
    
    function resetFilters() {
        imgRotation = 0;
        imgBrightness = 100;
        imgContrast = 100;
        currentX = 0;
        currentY = 0;
        isZoomedIn = false;
        
        document.getElementById('brightnessRange').value = 100;
        document.getElementById('contrastRange').value = 100;
        if(magnifierSwitch) magnifierSwitch.checked = false;
        
        updateImageTransform();
        applyImageFilters();
        if(viewer) viewer.style.cursor = 'zoom-in';
    }
    
    function updateImageTransform() {
        if (imageWrapper) {
            const scale = isZoomedIn ? ZOOM_LEVEL : 1;
            imageWrapper.style.transform = `translate(calc(-50% + ${currentX}px), calc(-50% + ${currentY}px)) rotate(${imgRotation}deg) scale(${scale})`;
        }
    }
    
    function applyImageFilters() {
        if (refImage) {
            refImage.style.filter = `brightness(${imgBrightness}%) contrast(${imgContrast}%)`;
        }
    }
</script>
{% endblock %}