const SERVER_URL = "https://youtube.marha.de/profiles";
const container = document.getElementById("profiles");

async function load() {
  try {
    const res = await fetch(SERVER_URL);
    const profiles = await res.json();
    const stored = await browser.storage.local.get("profileId");
    const selectedId = stored.profileId || null;

    for (const profile of profiles) {
      const label = document.createElement("label");
      const radio = document.createElement("input");
      radio.type = "radio";
      radio.name = "profile";
      radio.value = profile.id;
      radio.checked = profile.id === selectedId;
      radio.addEventListener("change", () => {
        browser.storage.local.set({ profileId: profile.id });
      });
      label.appendChild(radio);
      label.appendChild(document.createTextNode(" " + profile.name));
      container.appendChild(label);
    }
  } catch {
    container.innerHTML = '<span class="error">Server nicht erreichbar</span>';
  }
}

load();