//
// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
// SPDX-License-Identifier: Apache-2.0
//

document.addEventListener('DOMContentLoaded', function() {
    const modelSelect = document.getElementById('modelSelect');
    const sizeSelect = document.getElementById('sizeSelect');
    const examplesGrid = document.getElementById('examplesGrid');

    if (typeof models !== 'undefined' && modelSelect) {
        models.forEach(model => {
            const option = document.createElement('option');
            option.value = model.value;
            option.textContent = model.label;
            modelSelect.appendChild(option);
        });
    }

    if (typeof sizes !== 'undefined' && sizeSelect) {
        Object.keys(sizes).forEach(category => {
            const optgroup = document.createElement('optgroup');
            optgroup.label = category.charAt(0).toUpperCase() +
                category.slice(1);

            sizes[category].forEach(size => {
                const option = document.createElement('option');
                option.value = size.value;
                option.textContent = size.label;
                optgroup.appendChild(option);
            });

            sizeSelect.appendChild(optgroup);
        });
    }

    if (typeof examples !== 'undefined' && examplesGrid) {
        examples.forEach(example => {
            const div = document.createElement('div');
            div.className = 'example-card';
            div.onclick = function() {
                triggerExample(
                    example.prompt,
                    example.model,
                    example.size
                );
            };

            const promptP = document.createElement('p');
            promptP.className = 'example-text';
            promptP.textContent = example.prompt;

            const metaP = document.createElement('p');
            metaP.className = 'example-meta';

            const modelSpan = document.createElement('span');
            modelSpan.className = 'example-model';
            modelSpan.textContent = example.modelLabel;

            metaP.appendChild(modelSpan);
            metaP.appendChild(
                document.createTextNode(' | ' + example.sizeLabel)
            );

            if (example.note) {
                metaP.appendChild(
                    document.createTextNode(' | ' + example.note)
                );
            }

            div.appendChild(promptP);
            div.appendChild(metaP);
            examplesGrid.appendChild(div);
        });
    }
});