const lead_announcement = `<p>I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>I’ll be helping to build an open dataset to improve language models for our language. Do you want to join me? I’ll share more details about this soon!</p>`
const recruit_collaborators = `<p>Do you want to improve the quality of language models in <var>Asturian and Aragonese</var>?</p><p>Join me in this collaborative annotation sprint! No experience needed - simply follow the link to start annotating!`
const recruit_leads = `<p>I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> in Hugging Face’s collaborative annotation sprint! 🤗</p><p>Would you like to lead the efforts in your own language? Check if it’s still listed!</p>`

function createCard(title, text, url) {
    let url_text = text.replaceAll('<p>', '').replaceAll('</p>', '%0A%0A')
    if (url) {
        
        let template = `
            <div class="card">
                <h2>${title}</h2>
                ${text}<p>${url}</p>
                <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><img alt="Image for posts to rectruit collaborators" src="images/lead_announcement.png"></a>
                <div class="button-container" align="center">
                <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><button class="button-4" role="button">Edit this image</button></a>
                <a href="https://x.com/intent/post?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in X</button></a>
                <a href="https://www.linkedin.com/feed/?shareActive=true&text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in LinkedIn</button></a>
                <a href="https://bsky.app/intent/compose?text=${url_text}${url}" target="_blank"><button class="button-4" role="button">Share in Bluesky</button></a>
                </div>
            </div>
            </br>
            `
        return template;
        
    } else {
        let template = `
        <div class="card">
            <h2>${title}</h2>
            <p>${text}</p>
            <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><img alt="Image for posts to rectruit collaborators" width="500" src="images/lead_announcement.png"></a>
            <div class="button-container" align="center">
            <a href="https://huggingface.co/docs/hub/spaces" target="_blank"><button class="button-4" role="button">Edit this template</button></a>
            <a href="https://x.com/intent/post?text=${url_text}" target="_blank"><button class="button-4" role="button">Share in X</button></a>
            <a href="https://www.linkedin.com/feed/?shareActive=true&text=${url_text}" target="_blank"><button class="button-4" role="button">Share in LinkedIn</button></a>
            <a href="https://bsky.app/intent/compose?text=${url_text}" target="_blank"><button class="button-4" role="button">Share in Bluesky</button></a>
            </div>
        </div>
        </br>
        `
        return template;
    }
}

function addCardToContainer(language, link, customText) {
    const cardContainer = document.getElementById('card-container');
    const cardHTML = createCard(language, link, customText);
    cardContainer.innerHTML += cardHTML;
}

addCardToContainer("Announce you've been selected to be a lead!", lead_announcement);
addCardToContainer("Recuit collaborators for your language", recruit_collaborators, 'https://nataliaelv-language-leads-dashboard.hf.space/');
addCardToContainer("Recuit leads for other languages", recruit_leads, 'https://nataliaelv-language-leads-dashboard.hf.space/');