{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<H2>{% translate 'Export Viewer' %}</H2>
<hr>{% endblock %}

{% block content %}


{% if file_content %}
<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">{{ file_name }}</h5>
            <a href="#" onclick="copyFileContentToClipboard(event)" title="{% translate 'Copy content to clipboard' %}"><i class="fa fa-lg fa-copy"></i></a>
        </div>
        <pre class="bg-light p-3 rounded" style="max-height: 600px; overflow-y: auto;" id="file_content">{{ file_content }}</pre>
    </div>
</div>
{% else %}
{% if export_files %}
<table class="table table-striped table-hover table-sm">
    <thead class="table-light">
        <tr>
            <th>{% translate 'Filename' %}</th>
            <th>{% translate 'Size' %} (bytes)</th>
            <th>{% translate 'Created' %}</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for file in export_files %}
        <tr>
            <td><a href="{% url 'app_data:data_export' %}?view={{ file.filename_md5 }}">{{ file.filename }}</a></td>
            <td>{{ file.size }}</td>
            <td>{{ file.creation_date }}</td>
            <td><a href="{% url 'app_data:data_export' %}?dl={{ file.filename_md5 }}"><i class="fa fa-download"></i></a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<p class="text-muted">{% translate 'No export files available' %}</p>
{% endif %}
{% endif %}

<script>
function copyFileContentToClipboard(event) {
    event.preventDefault();
    const fileContent = document.getElementById('file_content').innerText;

    if (!fileContent) {
        alert('{% translate "No content to copy" %}');
        return;
    }

    // Try modern Clipboard API first
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(fileContent).then(() => {
            alert('{% translate "Content copied to clipboard" %}');
        }).catch(err => {
            console.error('Failed to copy content:', err);
            fallbackCopyToClipboard(fileContent);
        });
    } else {
        // Fallback for non-secure contexts (HTTP)
        fallbackCopyToClipboard(fileContent);
    }
}

function fallbackCopyToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    document.body.appendChild(textArea);

    try {
        textArea.select();
        document.execCommand('copy');
        alert('{% translate "Content copied to clipboard" %}');
    } catch (err) {
        console.error('Fallback copy failed:', err);
        alert('{% translate "Failed to copy content" %}');
    }

    document.body.removeChild(textArea);
}
</script>

{% endblock %}