const lead_announcement = `<p>I’m thrilled to share that I’ll be leading <var>Asturian and Aragonese</var> 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 <var>Asturian and Aragonese</var>?</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 <var>Asturian and Aragonese</var> 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://huggingface.co/spaces/HuggingFaceFW/discussion", "images/lead_announcement.png", "https://docs.google.com/presentation/d/1CA4xLLf6rpUlDBym0SORrJZskNDKiBc51tngZkyGDXU/edit#slide=id.p");
addCardToContainer("Recuit collaborators for your language", recruit_collaborators, 'https://huggingface.co/spaces/data-is-better-together/demo-argilla-space', "images/recruit_collaborators.png", "https://docs.google.com/presentation/d/1Mouh1HpmJYPZFJ-99y9bRZyeb2lLqD2KB3btnXwVJyU/edit#slide=id.p");
addCardToContainer("Recuit leads for other languages", recruit_leads, 'https://nataliaelv-language-leads-dashboard.hf.space/', "images/recruit_leads.png", null);