File: templates/shared_file.twig

{% extends "base.twig" %}

{% block title %}{% if file %}{{ file.filename }} | {{ t('ui.shared_file.shared_file', {}, locale, ['common']) }}{% else %}{{ t('ui.shared_file.shared_file', {}, locale, ['common']) }}{% endif %} - {{ parent() }}{% endblock %}

{% block meta_description_tags %}
    {% if file %}
        {% set description = file.short_description ? file.short_description : t('ui.shared_file.meta_description_from_system', {'system_name': system_name}, locale, ['common']) %}
        <meta name="description" content="{{ description|e }}">
        <meta property="og:description" content="{{ description|e }}">
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block meta_tags %}
    {% if file %}
        {% set description = file.short_description ? file.short_description : t('ui.shared_file.meta_description_from_system', {'system_name': system_name}, locale, ['common']) %}
        {# Open Graph meta tags #}
        <meta property="og:title" content="{{ file.filename|e }}">
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ share_url }}">
        <meta property="og:site_name" content="{{ system_name }}">

        {# Twitter Card meta tags #}
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="{{ file.filename|e }}">
        <meta name="twitter:description" content="{{ description|e }}">

        <meta name="keywords" content="FidoNet, file, BBS, download, {{ file.area_tag }}">
    {% endif %}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">

            {% if file and share_info %}

                {# Share header badge #}
                <div class="alert alert-info mb-4">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-share-alt me-2"></i>
                        <div>
                            <strong>{{ t('ui.shared_file.shared_file', {}, locale, ['common']) }}</strong>
                            <p class="mb-0 mt-1">
                                {{ t('ui.shared_file.shared_by', {}, locale, ['common']) }} <strong>{{ share_info.shared_by }}</strong>
                                {{ t('ui.shared_file.on_date_prefix', {}, locale, ['common']) }} {{ share_info.created_at|date('M j, Y') }}
                                &mdash; {{ t('ui.shared_file.viewed_count', {'count': share_info.access_count}, locale, ['common']) }}
                                {% if share_info.expires_at %}
                                    &mdash; {{ t('ui.shared_file.expires_prefix', {}, locale, ['common']) }} {{ share_info.expires_at|date('M j, Y g:i A') }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                {# File info card #}
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-file me-2"></i>{{ file.filename }}
                        </h5>
                        {% if file.virus_scanned and file.virus_scan_result == 'clean' %}
                            <span class="badge bg-success">
                                <i class="fas fa-shield-alt me-1"></i>{{ t('ui.shared_file.clean', {}, locale, ['common']) }}
                            </span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <dl class="row mb-0">
                            <dt class="col-sm-3">{{ t('ui.shared_file.size', {}, locale, ['common']) }}</dt>
                            <dd class="col-sm-9" id="sharedFileSize">{{ file.filesize }}</dd>

                            <dt class="col-sm-3">{{ t('ui.shared_file.uploaded', {}, locale, ['common']) }}</dt>
                            <dd class="col-sm-9">{{ file.created_at|date('M j, Y') }}</dd>

                            <dt class="col-sm-3">{{ t('ui.shared_file.area', {}, locale, ['common']) }}</dt>
                            <dd class="col-sm-9">
                                <span class="badge bg-secondary">{{ file.area_tag }}</span>
                                {% if file.area_description %}
                                    <span class="text-muted ms-1">{{ file.area_description }}</span>
                                {% endif %}
                            </dd>

                            {% if file.short_description %}
                                <dt class="col-sm-3">{{ t('ui.shared_file.description', {}, locale, ['common']) }}</dt>
                                <dd class="col-sm-9">{{ file.short_description }}</dd>
                            {% endif %}
                        </dl>

                        {% if file.long_description %}
                            <div class="mt-3">
                                <strong>{{ t('ui.shared_file.details', {}, locale, ['common']) }}</strong>
                                <pre class="bg-light p-2 rounded mt-1" style="white-space: pre-wrap; word-wrap: break-word;">{{ file.long_description }}</pre>
                            </div>
                        {% endif %}
                    </div>

                    <div class="card-footer">
                        {% if is_logged_in %}
                            {# Logged-in: show download button and area browse link #}
                            <a href="/api/files/{{ file.id }}/download" class="btn btn-primary me-2">
                                <i class="fas fa-download me-1"></i>{{ t('ui.shared_file.download', {}, locale, ['common']) }}
                            </a>
                            <a href="/files?area={{ file.file_area_id }}" class="btn btn-outline-secondary">
                                <i class="fas fa-folder-open me-1"></i>{{ t('ui.shared_file.browse_area', {'tag': file.area_tag}, locale, ['common']) }}
                            </a>
                        {% else %}
                            {# Anonymous: info-only, prompt to register/login #}
                            <div class="alert alert-primary mb-0">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-user-plus me-3 mt-1"></i>
                                    <div class="flex-grow-1">
                                        <h6 class="alert-heading mb-2">{{ t('ui.shared_file.join_system_to_download', {'system_name': system_name}, locale, ['common']) }}</h6>
                                        <p class="mb-3">
                                            {{ t('ui.shared_file.register_prompt', {}, locale, ['common']) }}
                                        </p>
                                        <div class="d-flex gap-2 flex-wrap">
                                            <a href="/register" class="btn btn-primary btn-sm">
                                                <i class="fas fa-user-plus me-1"></i>{{ t('ui.shared_file.register', {}, locale, ['common']) }}
                                            </a>
                                            <a href="/login" class="btn btn-outline-primary btn-sm">
                                                <i class="fas fa-sign-in-alt me-1"></i>{{ t('ui.shared_file.login', {}, locale, ['common']) }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# File preview #}
                <div class="card mb-4">
                    <div class="card-body p-0" id="sharedPreviewContainer" style="min-height:120px;">
                        <div class="text-center py-4 text-muted">
                            <i class="fas fa-spinner fa-spin fa-2x"></i>
                        </div>
                    </div>
                </div>

                {# About this system #}
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="fas fa-info-circle me-2"></i>{{ t('ui.shared_file.about_system', {'system_name': system_name}, locale, ['common']) }}
                        </h6>
                        <p class="card-text mb-0">
                            {{ t('ui.shared_file.about_system_text', {'system_name': system_name, 'network': file.domain ? file.domain|upper : 'FidoNet'}, locale, ['common']) }}
                        </p>
                    </div>
                </div>

            {% else %}

                {# Error state #}
                <div class="alert alert-danger">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <div>
                            <strong>{{ t('ui.shared_file.not_available_title', {}, locale, ['common']) }}</strong>
                            <p class="mb-0 mt-1">
                                {{ t('ui.shared_file.not_available_body', {}, locale, ['common']) }}
                            </p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="/" class="btn btn-primary">
                            <i class="fas fa-home me-1"></i>{{ t('ui.shared_file.go_to_main_site', {}, locale, ['common']) }}
                        </a>
                    </div>
                </div>

            {% endif %}

        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% if file %}
<script src="/js/ansisys.js"></script>
<script src="/js/sixel.js"></script>
<script src="/js/pcboard.js"></script>
<script src="/js/file-preview.js"></script>
{% endif %}
<script>
$(document).ready(function() {
    // Format file size using the same helper used in files.twig
    const sizeEl = document.getElementById('sharedFileSize');
    if (sizeEl) {
        const bytes = parseInt(sizeEl.textContent, 10);
        if (!isNaN(bytes)) {
            sizeEl.textContent = formatBytes(bytes);
        }
    }

    {% if file %}
    renderPreviewContent({{ file.id }}, {{ file.filename|json_encode|raw }}, $('#sharedPreviewContainer'), {share_area: {{ file.area_tag|json_encode|raw }}, share_filename: {{ file.filename|json_encode|raw }}});
    {% endif %}
});

function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}
</script>
{% endblock %}