import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    async fetchAndRenderApplications(targetElement) {
        try {
            const response = await fetch('/application/data/all');
            const apps = await response.json();

            targetElement.innerHTML = apps.map(app => `
                <div class="col-md-4 mb-3">
                    <div class="form-check border p-2 rounded d-flex align-items-center gap-2">
                        <input class="form-check-input ms-1" type="checkbox" name="applications[]" value="${app.id}" id="app_${app.id}">
                        <label class="form-check-label d-flex align-items-center gap-2" for="app_${app.id}">
                            <img src="${app.logoMiniUrl}" alt="${app.name}" style="height: 20px; width: 20px; object-fit: contain;">
                            ${app.name}
                        </label>
                    </div>
                </div>
            `).join('');

            return apps;
        } catch (error) {
            targetElement.innerHTML = '<div class="text-danger">Erreur de chargement.</div>';
            console.error("App load error:", error);
        }
    }
}