{% extends "base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Manage Pastes</h1>
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Owner ID</th>
            <th>Filename</th>
            <th>Created At</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
{% for paste in pastes %}
<tr>
    <td>{{ paste.id }}</td>
    <td>{{ paste.owner_id }}</td>
    <td>
        <a href="{{ url_for('get_paste', id=paste.id) }}"
           class="paste-link"
           data-type="{{ paste.content_type.split('/')[0] }}"
           data-preview="{{ paste.content|truncate(200) if paste.content_type.startswith('text/') else '' }}"
           data-filename="{{ paste.filename if not paste.content_type.startswith('text/') else '' }}">
           {{ paste.filename or 'View Paste' }}
        </a>
    </td>
    <td>{{ paste.created_at }}</td>
    <td>
        <form method="POST" action="{{ url_for('admin_delete_paste', paste_id=paste.id) }}" style="display:inline;">
            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">Delete</button>
        </form>
    </td>
</tr>
{% endfor %}
    </tbody>
</table>
<a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>

<!-- Tooltip Preview -->
<div id="tooltip" class="tooltip-preview"></div>

<style>
    .tooltip-preview {
        position: absolute;
        background-color: #fff; /* Fondo por defecto para modo claro */
        border: 1px solid #ddd;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px;
        max-width: 300px;
        display: none;
        z-index: 1000;
        min-height: 50px;
        color: #2d2d2d; /* Texto por defecto para modo claro */
    }

    /* Estilos para modo oscuro */
    body[data-theme="dark"] .tooltip-preview {
        background-color: #333; /* Fondo oscuro */
        border-color: #555;
        color: #f8f8f2; /* Texto claro */
    }
</style>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tooltip = document.getElementById('tooltip');
        const links = document.querySelectorAll('.paste-link');

        links.forEach(link => {
            link.addEventListener('mouseover', (event) => {
                const type = event.target.getAttribute('data-type');
                const content = event.target.getAttribute('data-preview');
                const filename = event.target.getAttribute('data-filename');

                console.log(`Type: ${type}, Content: ${content}, Filename: ${filename}`); // Log para depuración

                tooltip.innerHTML = ''; // Limpia el contenido del tooltip

                if (type === 'text') {
                    tooltip.textContent = content || 'No content available';
                } else if (type === 'image' && filename) { // Ajustado para 'image' en lugar de 'file'
                    const imagePath = `/file/${filename}`;
                    // Verificar si la imagen carga correctamente
                    const img = document.createElement('img');
                    img.src = imagePath;
                    img.alt = 'Image preview';
                    img.style.maxWidth = '300px';
                    img.style.maxHeight = '200px';
                    img.onerror = () => {
                        tooltip.textContent = 'Error loading image preview.';
                    };
                    tooltip.appendChild(img);
                } else {
                    tooltip.textContent = 'File type not supported for preview.';
                }

                tooltip.style.display = 'block';
                tooltip.style.left = `${event.pageX + 10}px`;
                tooltip.style.top = `${event.pageY + 10}px`;
            });

            link.addEventListener('mouseout', () => {
                tooltip.style.display = 'none';
            });

            link.addEventListener('mousemove', (event) => {
                tooltip.style.left = `${event.pageX + 10}px`;
                tooltip.style.top = `${event.pageY + 10}px`;
            });
        });
    });
</script>
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/favorites.js') }}" defer></script>
{% endblock %}

{% endblock %}