{% extends 'file_explorer/base.html' %}

{% block title %}{{ file.original_name }} - 文件详情{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <!-- 导航面包屑 -->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'file_explorer:file_list' %}">
                            <i class="fas fa-home"></i> 文件列表
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">文件详情</li>
                </ol>
            </nav>

            <!-- 文件信息卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">
                            <i class="fas fa-file"></i> {{ file.original_name }}
                        </h3>
                        <div class="btn-group" role="group">
                            {% if user == file.uploaded_by or user.is_superuser %}
                                <a href="{% url 'file_explorer:file_update' file.pk %}"
                                   class="btn btn-outline-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="{% url 'file_explorer:file_delete' file.pk %}"
                                   class="btn btn-outline-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            {% endif %}
                            <a href="{% url 'file_explorer:download_file' file.id %}"
                               class="btn btn-success">
                                <i class="fas fa-download"></i> 下载
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- 文件基本信息 -->
                        <div class="col-md-8">
                            <h5>文件信息</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <td width="120"><strong>文件名:</strong></td>
                                    <td>{{ file.original_name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>文件类型:</strong></td>
                                    <td>
                                        <span class="badge bg-primary">{{ file.file_type|upper }}</span>
                                        {% if file.mime_type %}
                                            <small class="text-muted ms-2">({{ file.mime_type }})</small>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>文件大小:</strong></td>
                                    <td>{{ file.get_file_size_display }}</td>
                                </tr>
                                <tr>
                                    <td><strong>上传时间:</strong></td>
                                    <td>{{ file.uploaded_at|date:"Y-m-d H:i:s" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>最后更新:</strong></td>
                                    <td>{{ file.updated_at|date:"Y-m-d H:i:s" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>上传用户:</strong></td>
                                    <td>
                                        <i class="fas fa-user"></i> {{ file.uploaded_by.username }}
                                        {% if file.uploaded_by.email %}
                                            <small class="text-muted ms-2">({{ file.uploaded_by.email }})</small>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>访问权限:</strong></td>
                                    <td>
                                        {% if file.is_public %}
                                            <span class="badge bg-success">公开</span>
                                        {% else %}
                                            <span class="badge bg-warning">私有</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>下载次数:</strong></td>
                                    <td>
                                        <i class="fas fa-download"></i> {{ file.download_count }}
                                        {% if file.last_downloaded %}
                                            <small class="text-muted ms-2">
                                                最后下载: {{ file.last_downloaded|date:"Y-m-d H:i" }}
                                            </small>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>

                            <!-- 文件描述 -->
                            {% if file.description %}
                                <h5 class="mt-4">文件描述</h5>
                                <div class="border rounded p-3 bg-light">
                                    {{ file.description|linebreaks }}
                                </div>
                            {% endif %}

                            <!-- 标签 -->
                            {% if file.tags %}
                                <h5 class="mt-4">标签</h5>
                                <div class="mb-3">
                                    {% for tag in file.tags.split %}
                                        <span class="badge bg-light text-dark me-2">{{ tag }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- 文件预览 -->
                        <div class="col-md-4">
                            <h5>文件预览</h5>
                            <div class="text-center">
                                {% if file.file_type in 'jpg,jpeg,png,gif' %}
                                    <img src="{{ file.file_path.url }}"
                                         class="img-fluid rounded"
                                         alt="{{ file.original_name }}"
                                         style="max-height: 300px;">
                                {% elif file.file_type == 'pdf' %}
                                    <div class="border rounded p-4 bg-light">
                                        <i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
                                        <p class="mb-0">PDF 文件</p>
                                        <small class="text-muted">点击下载查看</small>
                                    </div>
                                {% elif file.file_type in 'doc,docx' %}
                                    <div class="border rounded p-4 bg-light">
                                        <i class="fas fa-file-word fa-3x text-primary mb-2"></i>
                                        <p class="mb-0">Word 文档</p>
                                        <small class="text-muted">点击下载查看</small>
                                    </div>
                                {% elif file.file_type in 'xls,xlsx' %}
                                    <div class="border rounded p-4 bg-light">
                                        <i class="fas fa-file-excel fa-3x text-success mb-2"></i>
                                        <p class="mb-0">Excel 表格</p>
                                        <small class="text-muted">点击下载查看</small>
                                    </div>
                                {% elif file.file_type in 'zip,rar' %}
                                    <div class="border rounded p-4 bg-light">
                                        <i class="fas fa-file-archive fa-3x text-warning mb-2"></i>
                                        <p class="mb-0">压缩文件</p>
                                        <small class="text-muted">点击下载查看</small>
                                    </div>
                                {% else %}
                                    <div class="border rounded p-4 bg-light">
                                        <i class="fas fa-file fa-3x text-secondary mb-2"></i>
                                        <p class="mb-0">{{ file.file_type|upper }} 文件</p>
                                        <small class="text-muted">点击下载查看</small>
                                    </div>
                                {% endif %}
                            </div>

                            <!-- 快速操作 -->
                            <div class="mt-3">
                                <a href="{% url 'file_explorer:download_file' file.id %}"
                                   class="btn btn-success w-100 mb-2">
                                    <i class="fas fa-download"></i> 下载文件
                                </a>
                                {% if user == file.uploaded_by or user.is_superuser %}
                                    <a href="{% url 'file_explorer:file_update' file.pk %}"
                                       class="btn btn-outline-primary w-100 mb-2">
                                        <i class="fas fa-edit"></i> 编辑信息
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 返回按钮 -->
            <div class="mt-4 text-center">
                <a href="{% url 'file_explorer:file_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回文件列表
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}