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

{% block title %}搜索结果 - {{ query }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>搜索结果</h2>
                <a href="{% url 'file_explorer:file_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回文件列表
                </a>
            </div>

            <!-- 搜索信息 -->
            <div class="alert alert-info">
                <i class="fas fa-search"></i>
                搜索关键词: <strong>"{{ query }}"</strong>
                <br>
                找到 <strong>{{ total_results }}</strong> 个结果
            </div>

            <!-- 搜索结果 -->
            {% if files %}
                <div class="row">
                    {% for file in files %}
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h6 class="card-title text-truncate" title="{{ file.original_name }}">
                                        {{ file.original_name }}
                                    </h6>
                                    <p class="card-text small text-muted">
                                        <i class="fas fa-file"></i> {{ file.file_type|upper }}
                                        <br>
                                        <i class="fas fa-weight-hanging"></i> {{ file.get_file_size_display }}
                                        <br>
                                        <i class="fas fa-user"></i> {{ file.uploaded_by.username }}
                                        <br>
                                        <i class="fas fa-calendar"></i> {{ file.uploaded_at|date:"Y-m-d H:i" }}
                                    </p>
                                    {% if file.description %}
                                        <p class="card-text small">{{ file.description|truncatechars:100 }}</p>
                                    {% endif %}
                                    {% if file.tags %}
                                        <div class="mb-2">
                                            {% for tag in file.tags.split|slice:":3" %}
                                                <span class="badge bg-light text-dark me-1">{{ tag }}</span>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="btn-group w-100" role="group">
                                        <a href="{% url 'file_explorer:file_detail' file.pk %}"
                                           class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a href="{% url 'file_explorer:download_file' file.id %}"
                                           class="btn btn-outline-success btn-sm">
                                            <i class="fas fa-download"></i> 下载
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <!-- 分页 -->
                {% if files.has_other_pages %}
                    <nav aria-label="搜索结果分页" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if files.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?q={{ query }}&page={{ files.previous_page_number }}">
                                        <i class="fas fa-chevron-left"></i> 上一页
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in files.paginator.page_range %}
                                {% if files.number == num %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ num }}</span>
                                    </li>
                                {% elif num > files.number|add:'-3' and num < files.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?q={{ query }}&page={{ num }}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if files.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?q={{ query }}&page={{ files.next_page_number }}">
                                        下一页 <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}

            {% else %}
                <!-- 没有搜索结果 -->
                <div class="text-center py-5">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h4 class="text-muted">没有找到相关文件</h4>
                    <p class="text-muted">请尝试使用其他关键词搜索</p>
                    <a href="{% url 'file_explorer:file_list' %}" class="btn btn-primary">
                        <i class="fas fa-list"></i> 查看所有文件
                    </a>
                </div>
            {% endif %}

            <!-- 搜索框 -->
            <div class="mt-4">
                <form method="get" action="{% url 'file_explorer:search_files' %}" class="d-flex">
                    <input type="text" name="q" value="{{ query }}"
                           class="form-control me-2" placeholder="搜索文件..." required>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}