import { api } from '../api.js';
import { showToast } from '../components/toast.js';
import { t, tn } from '../i18n.js';
import { esc } from '../utils.js';
// A refused request must reject, not resolve.
//
// This helper used to end in `.then(r => r.json())`, so a 403/404/500 body resolved as an ordinary
// value and the surrounding try/catch was unreachable — every handler took the failure for success.
// Concretely: deleting a built-in layout template showed "Layout deleted" while the server had
// returned 403 and the template was still there, and a rejected platform-role change showed "Role
// updated" while the dropdown kept displaying a value the server refused (its revert lives only in
// the dead catch). The shared client in api.js has always thrown on !res.ok; these local copies did
// not. Same contract now, including the 401 session-expiry reload.
const API = (url, opts = {}) => fetch('/api' + url, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}`, ...opts.headers }, ...opts }).then(async (r) => {
if (r.status === 401) { localStorage.removeItem('token'); window.location.reload(); throw new Error('Session expired'); }
if (!r.ok) { const e = await r.json().catch(() => ({})); throw new Error(e.error || `Request failed (${r.status})`); }
return r.json();
});
export async function render(container) {
const hash = window.location.hash;
if (hash.startsWith('#/layout/')) {
const id = hash.split('#/layout/')[1];
return renderEditor(container, id);
}
return renderList(container);
}
async function renderList(container) {
container.innerHTML = `
`;
}
/*
* Canvas aspect as a padding-top percentage: the layout's own height/width.
*
* Falls back to 16:9 when a layout carries no usable dimensions, and clamps so a pathological
* value cannot produce a canvas taller than the screen or thinner than a line — these rows are
* user-editable, and an unusable editor is worse than a slightly wrong aspect.
*/
function canvasRatioPct(layout) {
const w = Number(layout && layout.width) || 1920;
const h = Number(layout && layout.height) || 1080;
if (!(w > 0 && h > 0)) return 56.25;
return Math.min(300, Math.max(20, (h / w) * 100));
}
async function renderEditor(container, layoutId) {
let layout;
try {
layout = await API(`/layouts/${layoutId}`);
} catch { container.innerHTML = `