const lead_announcement = `<p>I’m thrilled to share that I’ll be leading [language] in the Multilingual FineWeb 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?</p>`
const recruit_collaborators = `<p>Do you want to improve the quality of language models in [language]?</p><p>Join me in this collaborative annotation sprint! No experience needed - simply follow the link to start annotating!</p>`
const call_contributors_generic = `<p>Do you want to improve the quality of language models in your language?</p><p>Join me in this collaborative annotation sprint! No experience needed - simply follow the link to start annotating!</p>`
const recruit_leads = `<p>I’m thrilled to share that I’ll be leading [language] in the Multilingual FineWeb 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, image_src, image_url) {
    let url_text = text.replaceAll('<p>', '').replaceAll('</p>', '%0A%0A')
    var text_block = (url) ? `${text}<p>${url}</p>` : `${text}`
    var image_button = (image_url) ? `<a href="${image_url}" target="_blank"><button class="button-4" role="button">Edit this image</button></a>` : `<a href="${image_src}" download><button class="button-4" role="button">Download this image</button></a>`
        
    let template = `
        <div class="card">
            <h2>${title}</h2>
            ${text_block}
            <img alt="Image for posts to rectruit collaborators" src="${image_src}">
            <div class="button-container" align="center">
            ${image_button}
            <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;
        
}

function addCardToContainer(title, text, url, image_src, image_url) {
    const cardContainer = document.getElementById('card-container');
    const cardHTML = createCard(title, text, url, image_src, image_url);
    cardContainer.innerHTML += cardHTML;
}

addCardToContainer("Announce you've been selected to be a lead!", lead_announcement, "https://huggingfacefw-discussion.hf.space/", "images/lead_announcement.png", "https://docs.google.com/presentation/d/1CA4xLLf6rpUlDBym0SORrJZskNDKiBc51tngZkyGDXU/edit#slide=id.p");
addCardToContainer("Call for people to contribute to the effort, no matter the language!", call_contributors_generic, "https://data-is-better-together-fineweb-c.hf.space/", "images/call_contributors_generic.png", null);
addCardToContainer("Call for collaborators for your language (edit this and translate it for your language, see examples below)", recruit_collaborators, 'https://data-is-better-together-fineweb-c.hf.space/', "images/call_contributors_template.png", "https://docs.google.com/presentation/d/1Mouh1HpmJYPZFJ-99y9bRZyeb2lLqD2KB3btnXwVJyU/edit#slide=id.p");
addCardToContainer("Example: Call for collaborators in Spanish (ready to publish if you want)", recruit_collaborators, 'https://data-is-better-together-fineweb-c.hf.space/', "images/call_contributors_spanish.png", null);
addCardToContainer("Example: Call for collaborators in French (ready to publish if you want)", recruit_collaborators, 'https://data-is-better-together-fineweb-c.hf.space/', "images/call_contributors_french.png", null);