const lead_announcement = `<p>I’m thrilled to share that I’ll be leading [language] in the FineWeb 2 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 FineWeb 2 collaborative annotation sprint! 🤗</p><p>Would you like to lead the efforts in your own language? Check if it’s still listed!</p>`
const recruit_collaborators_es = `<p>¿Quieres mejorar la calidad de los modelos de lenguaje en español?</p><p>¡Únete a nosotros en esta campaña colaborativa de anotación! No se necesita experiencia - simplemente sigue el enlace para empezar a anotar</p>`
const recruit_collaborators_fr = `<p>Vous aimeriez améliorer la qualité des modèles de langage en Français?</p><p>Rejoignez-moi dans ce sprint d'annotation collaborative ! Aucune expérience n'est nécessaire - il suffit de suivre le lien pour commencer à annoter!</p>`

function createCard(title, text, url, image_src, image_url, language) {
    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://huggingface.co/spaces/HuggingFaceFW/discussion", "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://huggingface.co/spaces/data-is-better-together/fineweb-c", "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://huggingface.co/spaces/data-is-better-together/fineweb-c', "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_es, 'https://huggingface.co/spaces/data-is-better-together/fineweb-c', "images/call_contributors_spanish.png", null);
addCardToContainer("Example: Call for collaborators in French (ready to publish if you want)", recruit_collaborators_fr, 'https://huggingface.co/spaces/data-is-better-together/fineweb-c', "images/call_contributors_french.png", null);