<script lang="ts">
    import {onMount} from "svelte";
    import Icon from "../utils/Icon.svelte";

    let iconTemplate: HTMLTemplateElement;

    function addExternalLinkIcons(): void {
        console.log('Add icons to external links...');

        const iconElement = iconTemplate.childNodes.item(0);

        document.querySelectorAll('a[target="_blank"]').forEach(el => {
            if (!el.classList.contains('no-icon')) {
                el.appendChild(iconElement.cloneNode(true));
            }
        });
    }

    onMount(() => {
        addExternalLinkIcons();
    });
</script>

<style>
    div {
        display: none;
    }
</style>

<div bind:this={iconTemplate}>
    <Icon name="external-link"/>
</div>
