{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{{ document.title }} - {% trans "Reference Section" %}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="{% url 'references:dashboard' %}">{% trans "Reference Section" %}</a>
                    </li>
                    {% if document.folder %}
                        {% for folder in document.folder.get_full_path_folders %}
                            <li class="breadcrumb-item">
                                <a href="{% url 'references:folder_view' folder.id %}">{{ folder.name }}</a>
                            </li>
                        {% endfor %}
                    {% endif %}
                    <li class="breadcrumb-item active">{{ document.title }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0">
                <i class="{{ document.get_file_icon }} me-2"></i>
                {{ document.title }}
            </h1>
            <p class="text-muted small mb-0">{{ document.description }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'references:document_edit' document.id %}" class="btn btn-outline-primary">
                <i class="fas fa-edit me-2"></i>{% trans "Edit" %}
            </a>
            <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-primary">
                <i class="fas fa-download me-2"></i>{% trans "Download" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Document Details -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Document Details" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-4">{% trans "File Name" %}</dt>
                        <dd class="col-sm-8">{{ document.filename }}</dd>

                        <dt class="col-sm-4">{% trans "File Type" %}</dt>
                        <dd class="col-sm-8">
                            <span class="badge bg-light text-dark">{{ document.file_type|upper }}</span>
                        </dd>

                        <dt class="col-sm-4">{% trans "File Size" %}</dt>
                        <dd class="col-sm-8">{{ document.get_file_size_display }}</dd>

                        <dt class="col-sm-4">{% trans "Version" %}</dt>
                        <dd class="col-sm-8">
                            {% if document.is_latest_version %}
                                <span class="badge bg-success">{{ document.version }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ document.version }}</span>
                            {% endif %}
                        </dd>

                        <dt class="col-sm-4">{% trans "Downloads" %}</dt>
                        <dd class="col-sm-8">{{ document.download_count }}</dd>

                        <dt class="col-sm-4">{% trans "Uploaded By" %}</dt>
                        <dd class="col-sm-8">
                            {% if document.uploaded_by %}
                                {{ document.uploaded_by.get_full_name }}
                            {% else %}
                                {% trans "Unknown" %}
                            {% endif %}
                        </dd>

                        <dt class="col-sm-4">{% trans "Created" %}</dt>
                        <dd class="col-sm-8">{{ document.created_at|date:"M d, Y H:i" }}</dd>

                        <dt class="col-sm-4">{% trans "Last Modified" %}</dt>
                        <dd class="col-sm-8">{{ document.updated_at|date:"M d, Y H:i" }}</dd>

                        {% if document.tags %}
                            <dt class="col-sm-4">{% trans "Tags" %}</dt>
                            <dd class="col-sm-8">
                                {% for tag in document.tags_list %}
                                    <span class="badge bg-info text-white me-1">{{ tag }}</span>
                                {% endfor %}
                            </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- Version History -->
            {% if versions %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">{% trans "Version History" %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>{% trans "Version" %}</th>
                                        <th>{% trans "File" %}</th>
                                        <th>{% trans "Size" %}</th>
                                        <th>{% trans "Created" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for version in versions %}
                                        <tr{% if version.is_latest_version %} class="table-light"{% endif %}>
                                            <td>
                                                {% if version.is_latest_version %}
                                                    <span class="badge bg-success">{{ version.version }}</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ version.version }}</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ version.filename }}</td>
                                            <td>{{ version.get_file_size_display }}</td>
                                            <td>{{ version.created_at|date:"M d, Y H:i" }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Actions" %}</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'references:api_document_download' document.id %}" class="btn btn-primary">
                            <i class="fas fa-download me-2"></i>{% trans "Download Document" %}
                        </a>
                        <a href="{% url 'references:document_edit' document.id %}" class="btn btn-outline-primary">
                            <i class="fas fa-edit me-2"></i>{% trans "Edit Metadata" %}
                        </a>
                        {% if document.folder %}
                        <a href="{% url 'references:document_create_in_folder' folder_pk=document.folder.id %}" class="btn btn-outline-success">
                            <i class="fas fa-upload me-2"></i>{% trans "Upload New Version" %}
                        </a>
                        {% endif %}
                        <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
                            <i class="fas fa-trash me-2"></i>{% trans "Delete Document" %}
                        </button>
                    </div>
                </div>
            </div>

            <!-- Description -->
            {% if document.description %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">{% trans "Description" %}</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">{{ document.description|linebreaks }}</p>
                    </div>
                </div>
            {% endif %}

            <!-- Related Documents -->
            {% if related_documents %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">{% trans "Related Documents" %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            {% for related in related_documents %}
                                <a href="{% url 'references:document_view' related.id %}" class="list-group-item list-group-item-action text-decoration-none">
                                    <i class="{{ related.get_file_icon }} me-2"></i>
                                    {{ related.title|truncatechars:30 }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<form id="deleteForm" method="post" action="{% url 'references:document_delete' document.id %}" style="display: none;">
    {% csrf_token %}
</form>

<script>
function confirmDelete() {
    if (confirm('{% trans "Are you sure you want to delete this document?" %}')) {
        document.getElementById('deleteForm').submit();
    }
}
</script>
{% endblock %}