const models = [
    { name: 'gpt-oss-120b',        hf: 'openai/gpt-oss-120b' },
    { name: 'qwen3.8-27b',         hf: 'Qwen/Qwen3.8-27B' },
    { name: 'gemma-4-31b',         hf: 'google/gemma-4-31b-it' },
    { name: 'mistral-medium-3.5',  hf: 'mistralai/Mistral-Medium-3.5-128B' }
];
function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 2500);
}
function copy(btn, text) {
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        btn.classList.add('success');
        showToast(`Copied "${text}" to clipboard`);
        setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('success');
        }, 2000);
    });
}
document.addEventListener('DOMContentLoaded', () => {
    const list = document.getElementById('modelList');
    models.forEach(m => {
        const rowClass = m.disabled ? 'model-row disabled' : 'model-row';
        const badge    = m.badge ? `<span class="model-badge">${m.badge}</span>` : '';
        const btnLabel = m.disabled ? 'N/A' : 'Copy';
        const btnAttr  = m.disabled ? 'disabled' : '';
        const li = document.createElement('li');
        li.className = rowClass;
        li.innerHTML = `
            <a class="hf-link" href="https://huggingface.co/${m.hf}" target="_blank" rel="noreferrer" title="View on Hugging Face">🤗</a>
            <div class="model-panel">
                <div class="model-info">
                    <span class="model-hf">${m.hf}</span>
                    <span class="model-name">model-id: ${m.name}</span>
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                    ${badge}
                    <button class="btn" ${btnAttr} data-model="${m.name}">${btnLabel}</button>
                </div>
            </div>`;
        const btn = li.querySelector('button.btn');
        if (btn && !m.disabled) {
            btn.addEventListener('click', () => copy(btn, m.name));
        }
        list.appendChild(li);
    });
});