{% extends "_base.html" %}
{% block title %}{{ title }}{% endblock title %}
{% block content %}
<div class="wiki-header">
    <h1>
        {{ title }}
        {% if category %}
        <span class="header-category">#{{ category }}</span>
        {% endif %}
    </h1>
</div>

<div class="wiki-container">
    <main class="wiki-body">
        <article>
            {{ content | safe }}
        </article>
    </main>

    <aside class="wiki-sidebar">
        {% if main_image %}
        <div class="sidebar-image">
            <img src="{{ main_image }}" alt="{{ title }}">
        </div>
        {% endif %}

        {% if infobox %}
        <div class="infobox-data">
            <table>
                <tbody>
                {% for item in infobox %}
                    <tr>
                        <td class="info-label">{{ item.key }}</td>
                        <td class="info-value">{{ item.value }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </aside>
</div>

<script>
document.querySelectorAll('pre[data-code]').forEach((block) => {
    const wrapper = document.createElement('div');
    wrapper.className = 'code-wrapper';
    block.parentNode.insertBefore(wrapper, block);
    wrapper.appendChild(block);

    const button = document.createElement('button');
    button.className = 'copy-button';
    button.type = 'button';
    button.innerHTML = '<i class="fa-regular fa-copy"></i>';
    wrapper.appendChild(button);

    button.addEventListener('click', async () => {
        const text = block.getAttribute('data-code');
        try {
            await navigator.clipboard.writeText(text);
            button.innerHTML = '<i class="fa-solid fa-check"></i>';
            button.classList.add('copied');
            setTimeout(() => {
                button.innerHTML = '<i class="fa-regular fa-copy"></i>';
                button.classList.remove('copied');
            }, 2000);
        } catch (err) { console.error('Copy failed', err); }
    });
});
</script>
{% endblock content %}