{% extends "_base.html" %}
{% block title %}{{ title }}{% endblock title %}
{% block content %}
    <article>
        {{ content | safe }}
    </article>

    <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 %}