Files
summercms/.planning/phases/10-admin-vue-spa/design/Direction C v2.dc.html
2026-09-26 23:21:43 +02:00

462 lines
64 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&amp;family=DM+Mono:wght@400;500&amp;display=swap">
<link rel="stylesheet" href="https://unpkg.com/lucide-static@0.460.0/font/lucide.css">
<style>html,body{margin:0;height:100%}*{box-sizing:border-box}input::placeholder,textarea::placeholder{color:var(--placeholder)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}</style>
</helmet>
<div style="--bg:{{ t.bg }};--surface:{{ t.surface }};--subtle:{{ t.subtle }};--border:{{ t.border }};--border-strong:{{ t.borderStrong }};--text:{{ t.text }};--muted:{{ t.muted }};--placeholder:{{ t.placeholder }};--primary:{{ t.primary }};--on-primary:{{ t.onPrimary }};--danger:{{ t.danger }};--danger-soft:{{ t.dangerSoft }};--ok-bg:{{ t.okBg }};--ok-text:{{ t.okText }};--ring:{{ t.ring }};--hover:{{ t.hover }};--sel:{{ t.sel }};--skel:{{ t.skel }};--overlay:{{ t.overlay }};--side:{{ t.side }};--side-border:{{ t.sideBorder }};--accent:#fcd34d;--on-accent:#1b2540;--shadow:{{ t.shadow }};color-scheme:{{ t.scheme }};position:relative;width:100%;height:100%;overflow:hidden;display:flex;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px;line-height:1.5">
<sc-if value="{{ isLogin }}" hint-placeholder-val="{{ false }}">
<main style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 35%,#2b3a5c 0%,#1d2740 60%)">
<div style="width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:24px">
<div style="display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#ffffff;letter-spacing:-0.01em"><span style="width:34px;height:34px;border-radius:50%;background:rgba(252,211,77,.14);display:inline-flex;align-items:center;justify-content:center"><i class="icon-sun" style="font-size:20px;color:var(--accent)"></i></span><span>Summer<span style="color:var(--accent)">CMS</span></span></div>
<form style="width:100%;background:var(--surface);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)">
<h1 style="margin:0;font-size:22px;font-weight:700;letter-spacing:-0.02em">Witaj ponownie</h1>
<div style="display:flex;flex-direction:column;gap:6px">
<label for="c-login" style="font-weight:500">Login lub e-mail</label>
<input id="c-login" defaultValue="tomasz.wojcik" style="height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%" style-focus="border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)">
</div>
<div style="display:flex;flex-direction:column;gap:6px">
<label for="c-pass" style="font-weight:500">Hasło</label>
<input id="c-pass" type="password" defaultValue="winyl1970" aria-invalid="true" aria-describedby="c-err" style="height:44px;padding:0 14px;border:1px solid var(--danger);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%;box-shadow:0 0 0 3px var(--ring)">
</div>
<div id="c-err" role="alert" style="display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-weight:500"><i class="icon-circle-alert" style="font-size:18px"></i>Nieprawidłowe dane logowania</div>
<button type="submit" style="height:44px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer" style-hover="opacity:.92">Zaloguj</button>
</form>
</div>
</main>
</sc-if>
<sc-if value="{{ isApp }}" hint-placeholder-val="{{ true }}">
<nav aria-label="Wtyczki" style="width:80px;flex:none;background:var(--side);border-right:1px solid var(--side-border);color:#ffffff;display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;gap:6px">
<span title="SummerCMS" style="width:40px;height:40px;flex:none;border-radius:12px;background:rgba(252,211,77,.14);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px"><i class="icon-sun" style="font-size:22px;color:var(--accent)"></i></span>
<sc-for list="{{ rail }}" as="r" hint-placeholder-count="3">
<a href="#" aria-current="{{ r.current }}" aria-label="{{ r.label }}" style="width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:12px;background:{{ r.bg }};letter-spacing:-0.01em;color:{{ r.color }};font-size:11px;font-weight:{{ r.weight }};line-height:1.2;text-align:center" style-hover="background:rgba(255,255,255,.08);color:#ffffff;text-decoration:none" style-focus="outline:3px solid var(--ring);outline-offset:1px"><i class="icon-{{ r.icon }}" style="font-size:20px"></i><span>{{ r.short }}</span></a>
</sc-for>
<div style="flex:1"></div>
<sc-if value="{{ collapsed }}" hint-placeholder-val="{{ false }}"><button aria-label="Rozwiń menu" title="Rozwiń menu" style="width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#c3cbda;display:inline-flex;align-items:center;justify-content:center;cursor:pointer" style-hover="background:rgba(255,255,255,.08);color:#fff"><i class="icon-panel-left-open" style="font-size:18px"></i></button></sc-if>
<a href="#" aria-label="Ustawienia" style="width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:12px;color:#c3cbda;font-size:11px;font-weight:500" style-hover="background:rgba(255,255,255,.08);color:#fff;text-decoration:none"><i class="icon-settings" style="font-size:20px"></i><span>Ustawienia</span></a>
</nav>
<sc-if value="{{ showPanel }}" hint-placeholder-val="{{ true }}">
<aside aria-label="{{ pluginLabel }}" style="width:224px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 12px;gap:2px">
<div style="display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 10px;margin-bottom:14px">
<span style="flex:1;font-weight:700;font-size:16px;letter-spacing:-0.01em">{{ pluginLabel }}</span>
<button aria-label="Zwiń menu" title="Zwiń menu" style="width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer" style-hover="background:var(--hover);color:var(--text)"><i class="icon-panel-left-close" style="font-size:16px"></i></button>
</div>
<sc-for list="{{ nav }}" as="item" hint-placeholder-count="4">
<a href="#" aria-current="{{ item.current }}" style="display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:10px;background:{{ item.bg }};color:{{ item.color }};font-weight:{{ item.weight }}" style-hover="background:var(--hover);text-decoration:none;color:var(--text)"><i class="icon-{{ item.icon }}" style="font-size:18px;width:18px"></i><span>{{ item.label }}</span></a>
</sc-for>
</aside>
</sc-if>
<sc-if value="{{ flyout }}" hint-placeholder-val="{{ false }}">
<div role="menu" aria-label="{{ pluginLabel }}" style="position:absolute;left:88px;top:62px;width:230px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(20,27,45,.18);padding:8px;z-index:25;display:flex;flex-direction:column;gap:2px">
<div style="padding:6px 10px 8px;font-weight:700">{{ pluginLabel }}</div>
<sc-for list="{{ nav }}" as="item" hint-placeholder-count="4">
<a href="#" role="menuitem" aria-current="{{ item.current }}" style="display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:9px;background:{{ item.bg }};color:{{ item.color }};font-weight:{{ item.weight }}" style-hover="background:var(--hover);text-decoration:none;color:var(--text)"><i class="icon-{{ item.icon }}" style="font-size:17px;width:17px"></i><span>{{ item.label }}</span></a>
</sc-for>
</div>
</sc-if>
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
<header style="height:64px;flex:none;display:flex;align-items:center;gap:16px;padding:0 24px 0 32px;background:var(--surface);border-bottom:1px solid var(--border)">
<nav aria-label="Ścieżka" style="display:flex;align-items:center;gap:8px;color:var(--muted)">
<a href="#">{{ pluginLabel }}</a><i class="icon-chevron-right" style="font-size:14px"></i>
<sc-for list="{{ crumbs }}" as="c" hint-placeholder-count="1"><span style="display:flex;align-items:center;gap:8px"><a href="#" style="color:{{ c.color }};font-weight:{{ c.weight }}">{{ c.label }}</a><sc-if value="{{ c.more }}" hint-placeholder-val="{{ false }}"><i class="icon-chevron-right" style="font-size:14px"></i></sc-if></span></sc-for>
</nav>
<div style="flex:1"></div>
<button aria-haspopup="menu" aria-expanded="{{ userMenuStr }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 4px;border:1px solid {{ userBtnBorder }};border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;text-align:left" style-hover="background:var(--hover)">
<span style="width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700">TW</span>
<sc-if value="{{ wide }}" hint-placeholder-val="{{ true }}"><span style="display:flex;flex-direction:column;line-height:1.2"><span style="font-weight:600">Tomasz Wójcik</span><span style="font-size:12px;color:var(--muted)">Administrator</span></span></sc-if>
<i class="icon-chevron-down" style="font-size:16px;color:var(--muted)"></i>
</button>
</header>
<main style="flex:1;min-height:0;display:flex;flex-direction:column">
<sc-if value="{{ isList }}" hint-placeholder-val="{{ true }}">
<div style="flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;padding:28px 32px">
<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap">
<div style="flex:1;min-width:200px"><h1 style="margin:0;font-size:26px;font-weight:700;letter-spacing:-0.02em">Albumy</h1><p style="margin:2px 0 0;color:var(--muted)">348 pozycji w katalogu</p></div>
<button style="display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer" style-hover="opacity:.92" style-focus="outline:3px solid var(--ring);outline-offset:2px"><i class="icon-plus" style="font-size:18px"></i>Nowy album</button>
</div>
<div style="flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden">
<div role="toolbar" aria-label="Akcje listy" style="flex:none;display:flex;align-items:center;gap:12px;padding:16px 20px;flex-wrap:wrap">
<div style="position:relative;width:320px;max-width:100%">
<i class="icon-search" style="position:absolute;left:14px;top:12px;font-size:18px;color:var(--muted)"></i>
<input type="search" aria-label="Szukaj albumów" placeholder="Szukaj albumów…" defaultValue="{{ searchValue }}" style="height:42px;width:100%;padding:0 14px 0 42px;border:1px solid var(--border-strong);border-radius:10px;background:var(--subtle);color:var(--text);font:inherit;outline:none" style-focus="border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)">
<sc-if value="{{ searchFocus }}" hint-placeholder-val="{{ false }}"><span aria-hidden="true" style="position:absolute;inset:0;border-radius:10px;border:1px solid var(--primary);box-shadow:0 0 0 3px var(--ring);pointer-events:none"></span></sc-if>
</div>
<div style="flex:1"></div>
<sc-if value="{{ hasSel }}" hint-placeholder-val="{{ false }}"><span style="display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--sel);font-weight:600"><i class="icon-check" style="font-size:14px"></i>Zaznaczono {{ selCount }}</span><button style="display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--danger);background:var(--surface);color:var(--danger);font:inherit;font-weight:600;cursor:pointer" style-hover="background:var(--danger-soft)"><i class="icon-trash-2" style="font-size:17px"></i>Usuń zaznaczone</button></sc-if>
<sc-if value="{{ noSel }}" hint-placeholder-val="{{ true }}"><button disabled="{{ true }}" style="display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-weight:600;opacity:.6;cursor:not-allowed"><i class="icon-trash-2" style="font-size:17px"></i>Usuń zaznaczone</button></sc-if>
</div>
<div style="flex:1;min-height:0;overflow:auto">
<table style="width:100%;min-width:920px;border-collapse:collapse">
<thead>
<tr>
<th style="width:52px;height:44px;padding:0 0 0 20px;text-align:left;background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0">
<sc-if value="{{ hdrNone }}" hint-placeholder-val="{{ true }}"><span role="checkbox" aria-checked="false" aria-label="Zaznacz wszystkie" style="width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:flex;background:var(--surface)"></span></sc-if>
<sc-if value="{{ hdrIndet }}" hint-placeholder-val="{{ false }}"><span role="checkbox" aria-checked="mixed" aria-label="Zaznacz wszystkie" style="width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-minus" style="font-size:13px"></i></span></sc-if>
</th>
<th aria-sort="ascending" style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--text);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;white-space:nowrap"><span style="display:inline-flex;align-items:center;gap:4px">Nazwa<i class="icon-arrow-up" style="font-size:14px"></i></span></th>
<th style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0">Artyści</th>
<th style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;width:110px">Format</th>
<th style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0">Gatunek</th>
<th style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;width:72px">Półka</th>
<th style="height:44px;padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;width:150px">Utworzono</th>
<th style="height:44px;padding:0 20px 0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;top:0;width:128px">Wypożyczony</th>
</tr>
</thead>
<tbody>
<sc-for list="{{ rows }}" as="row" hint-placeholder-count="12">
<tr style="background:{{ row.bg }}">
<td style="height:54px;padding:0 0 0 20px;border-bottom:1px solid var(--border)">
<sc-if value="{{ row.sel }}" hint-placeholder-val="{{ false }}"><span role="checkbox" aria-checked="true" style="width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-check" style="font-size:13px"></i></span></sc-if>
<sc-if value="{{ row.notSel }}" hint-placeholder-val="{{ true }}"><span role="checkbox" aria-checked="false" style="width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:flex;background:var(--surface)"></span></sc-if>
</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);font-weight:600;white-space:nowrap"><a href="#">{{ row.name }}</a></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted)">{{ row.artists }}</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--subtle);font-size:13px;font-weight:500;white-space:nowrap"><i class="icon-{{ row.icon }}" style="font-size:14px;color:var(--muted)"></i>{{ row.format }}</span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:{{ row.genreColor }}">{{ row.genre }}</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);font-family:'DM Mono',monospace;font-size:13px">{{ row.shelf }}</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums">{{ row.created }}</td>
<td style="padding:0 20px 0 14px;border-bottom:1px solid var(--border)">
<sc-if value="{{ row.rented }}" hint-placeholder-val="{{ false }}"><span style="display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok-text);font-size:13px;font-weight:600"><i class="icon-arrow-up-right" style="font-size:13px"></i>Tak</span></sc-if>
<sc-if value="{{ row.notRented }}" hint-placeholder-val="{{ true }}"><span style="display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;color:var(--muted);font-size:13px;font-weight:500;border:1px solid var(--border)">Nie</span></sc-if>
</td>
</tr>
</sc-for>
<sc-for list="{{ skel }}" as="s" hint-placeholder-count="0">
<tr>
<td style="height:54px;padding:0 0 0 20px;border-bottom:1px solid var(--border)"><span style="display:block;width:18px;height:18px;border-radius:5px;background:var(--skel)"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:12px;border-radius:6px;background:var(--skel);width:{{ s.a }}"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:12px;border-radius:6px;background:var(--skel);width:{{ s.b }}"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:26px;border-radius:999px;background:var(--skel);width:70px"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:12px;border-radius:6px;background:var(--skel);width:{{ s.c }}"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:12px;border-radius:6px;background:var(--skel);width:36px"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:12px;border-radius:6px;background:var(--skel);width:110px"></span></td>
<td style="padding:0 20px 0 14px;border-bottom:1px solid var(--border)"><span style="display:block;height:26px;border-radius:999px;background:var(--skel);width:52px"></span></td>
</tr>
</sc-for>
</tbody>
</table>
<sc-if value="{{ isEmpty }}" hint-placeholder-val="{{ false }}">
<div style="display:flex;flex-direction:column;align-items:center;gap:10px;padding:80px 24px;text-align:center">
<span style="width:56px;height:56px;border-radius:50%;background:var(--subtle);display:inline-flex;align-items:center;justify-content:center;color:var(--muted)"><i class="icon-search-x" style="font-size:24px"></i></span>
<div style="font-size:17px;font-weight:700;margin-top:4px">Nic nie znaleziono</div>
<p style="margin:0;color:var(--muted);max-width:360px;text-wrap:pretty">Żaden album nie pasuje do frazy „kaseta 1983”. Spróbuj innej nazwy lub artysty.</p>
<button style="margin-top:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer" style-hover="background:var(--hover)">Wyczyść wyszukiwanie</button>
</div>
</sc-if>
</div>
<div style="flex:none;display:flex;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px;flex-wrap:wrap">
<span aria-live="polite">{{ range }}</span>
<sc-if value="{{ showPager }}" hint-placeholder-val="{{ true }}">
<div style="display:flex;align-items:center;gap:8px"><span>Na stronę</span><button aria-haspopup="listbox" style="display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer">12<i class="icon-chevron-down" style="font-size:14px;color:var(--muted)"></i></button></div>
<div style="flex:1"></div>
<nav aria-label="Stronicowanie" style="display:flex;align-items:center;gap:4px">
<button disabled="{{ true }}" style="display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;opacity:.5"><i class="icon-arrow-left" style="font-size:15px"></i>Poprzednia</button>
<button aria-current="page" style="width:34px;height:34px;border:0;border-radius:8px;background:var(--sel);color:var(--text);font:inherit;font-weight:700">1</button>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;cursor:pointer" style-hover="background:var(--hover)">2</button>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;cursor:pointer" style-hover="background:var(--hover)">3</button>
<span style="width:24px;text-align:center">…</span>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;cursor:pointer" style-hover="background:var(--hover)">29</button>
<button style="display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-weight:500;cursor:pointer" style-hover="background:var(--hover)">Następna<i class="icon-arrow-right" style="font-size:15px"></i></button>
</nav>
</sc-if>
</div>
</div>
</div>
</sc-if>
<sc-if value="{{ isUserList }}" hint-placeholder-val="{{ false }}">
<div style="flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;padding:28px 32px">
<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap">
<div style="flex:1;min-width:200px"><h1 style="margin:0;font-size:26px;font-weight:700;letter-spacing:-0.02em">Użytkownicy</h1><p style="margin:2px 0 0;color:var(--muted)">42 konta administracyjne</p></div>
<button style="display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer" style-hover="opacity:.92"><i class="icon-user-plus" style="font-size:18px"></i>Nowy użytkownik</button>
</div>
<div style="flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden">
<div role="toolbar" style="flex:none;display:flex;align-items:center;gap:12px;padding:16px 20px;flex-wrap:wrap">
<div style="position:relative;width:320px;max-width:100%"><i class="icon-search" style="position:absolute;left:14px;top:12px;font-size:18px;color:var(--muted)"></i><input type="search" aria-label="Szukaj użytkowników" placeholder="Szukaj użytkowników…" style="height:42px;width:100%;padding:0 14px 0 42px;border:1px solid var(--border-strong);border-radius:10px;background:var(--subtle);color:var(--text);font:inherit;outline:none"></div>
<div style="flex:1"></div>
<button disabled="{{ true }}" style="display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-weight:600;opacity:.6;cursor:not-allowed"><i class="icon-trash-2" style="font-size:17px"></i>Usuń zaznaczone</button>
</div>
<div style="flex:1;min-height:0;overflow:auto">
<table style="width:100%;min-width:860px;border-collapse:collapse">
<thead><tr>
<th style="width:52px;height:44px;padding:0 0 0 20px;text-align:left;background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border)"><span role="checkbox" aria-checked="false" aria-label="Zaznacz wszystkie" style="width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:flex;background:var(--surface)"></span></th>
<th aria-sort="ascending" style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border)"><span style="display:inline-flex;align-items:center;gap:4px">Imię i nazwisko<i class="icon-arrow-up" style="font-size:14px"></i></span></th>
<th style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">E-mail</th>
<th style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">Grupy</th>
<th style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);width:170px">Ostatnie logowanie</th>
<th style="padding:0 20px 0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);width:110px">Aktywny</th>
</tr></thead>
<tbody>
<sc-for list="{{ users }}" as="u" hint-placeholder-count="10">
<tr>
<td style="height:54px;padding:0 0 0 20px;border-bottom:1px solid var(--border)"><span role="checkbox" aria-checked="false" style="width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:flex;background:var(--surface)"></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:flex;align-items:center;gap:10px;font-weight:600"><span style="width:30px;height:30px;border-radius:50%;background:var(--subtle);font-size:11px;display:inline-flex;align-items:center;justify-content:center">{{ u.ini }}</span><a href="#">{{ u.name }}</a></span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted)">{{ u.email }}</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)">{{ u.groups }}</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums">{{ u.last }}</td>
<td style="padding:0 20px 0 14px;border-bottom:1px solid var(--border)">
<sc-if value="{{ u.active }}" hint-placeholder-val="{{ true }}"><span style="display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok-text);font-size:13px;font-weight:600">Tak</span></sc-if>
<sc-if value="{{ u.inactive }}" hint-placeholder-val="{{ false }}"><span style="display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;color:var(--muted);font-size:13px;font-weight:500;border:1px solid var(--border)">Nie</span></sc-if>
</td>
</tr>
</sc-for>
</tbody>
</table>
</div>
<div style="flex:none;display:flex;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px"><span>1–10 z 42</span><div style="flex:1"></div>
<nav aria-label="Stronicowanie" style="display:flex;align-items:center;gap:4px">
<button aria-current="page" style="width:34px;height:34px;border:0;border-radius:8px;background:var(--sel);color:var(--text);font:inherit;font-weight:700">1</button>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit">2</button>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit">3</button>
<button style="width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit">4</button>
<button style="display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-weight:500">Następna<i class="icon-arrow-right" style="font-size:15px"></i></button>
</nav>
</div>
</div>
</div>
</sc-if>
<sc-if value="{{ isFormLike }}" hint-placeholder-val="{{ false }}">
<div style="flex:1;min-height:0;display:flex;flex-direction:column">
<div style="flex:1;min-height:0;overflow:auto;padding:28px 32px 32px">
<div style="max-width:980px;display:flex;flex-direction:column;gap:20px">
<div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
<a href="#" aria-label="Wróć do listy" style="width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:var(--text)"><i class="icon-arrow-left" style="font-size:18px"></i></a>
<div style="flex:1"><h1 style="margin:0;font-size:24px;font-weight:700;letter-spacing:-0.02em">{{ recordName }}</h1><p style="margin:0;color:var(--muted);font-size:13px">{{ formTitle }}</p></div>
<div role="tablist" style="display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--subtle);border:1px solid var(--border)">
<sc-for list="{{ tabs }}" as="tab" hint-placeholder-count="2">
<button role="tab" aria-selected="{{ tab.selected }}" style="height:34px;padding:0 16px;border:0;border-radius:9px;background:{{ tab.bg }};color:{{ tab.color }};box-shadow:{{ tab.shadow }};font:inherit;font-weight:600;cursor:pointer" style-focus="outline:3px solid var(--ring)">{{ tab.label }}</button>
</sc-for>
</div>
</div>
<sc-if value="{{ errors }}" hint-placeholder-val="{{ false }}">
<div role="alert" style="display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:12px;background:var(--danger-soft);color:var(--danger)"><i class="icon-circle-alert" style="font-size:20px"></i><div><span style="font-weight:700">Nie udało się zapisać.</span> Popraw 2 pola oznaczone poniżej.</div></div>
</sc-if>
<div style="background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:28px">
<sc-if value="{{ showBasic }}" hint-placeholder-val="{{ false }}">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 24px">
<div style="display:flex;flex-direction:column;gap:8px">
<label for="c-name" style="font-weight:600">Nazwa <span aria-hidden="true" style="color:var(--danger)">*</span></label>
<input id="c-name" aria-invalid="{{ errorsStr }}" defaultValue="{{ nameVal }}" style="height:44px;padding:0 14px;border:1px solid {{ errBorder }};border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%" style-focus="border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)">
<sc-if value="{{ errors }}" hint-placeholder-val="{{ false }}"><p style="margin:0;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--danger)"><i class="icon-circle-alert" style="font-size:14px"></i>Pole Nazwa jest wymagane.</p></sc-if>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<label style="font-weight:600">Artyści <span aria-hidden="true" style="color:var(--danger)">*</span></label>
<div style="min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 12px 6px 6px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface)">
<span style="display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 4px;border-radius:999px;background:var(--subtle);font-size:13px;font-weight:600"><span style="width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:10px;display:inline-flex;align-items:center;justify-content:center">CN</span>Czesław Niemen<button aria-label="Usuń: Czesław Niemen" style="width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer" style-hover="background:var(--border)"><i class="icon-x" style="font-size:12px"></i></button></span>
<span style="display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 4px;border-radius:999px;background:var(--subtle);font-size:13px;font-weight:600"><span style="width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:10px;display:inline-flex;align-items:center;justify-content:center">AK</span>Akwarium<button aria-label="Usuń: Akwarium" style="width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer" style-hover="background:var(--border)"><i class="icon-x" style="font-size:12px"></i></button></span>
<input aria-label="Szukaj artystów" placeholder="Dodaj artystę…" style="flex:1;min-width:100px;height:30px;border:0;outline:none;background:transparent;color:var(--text);font:inherit">
</div>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<label style="font-weight:600">Format <span aria-hidden="true" style="color:var(--danger)">*</span></label>
<button aria-haspopup="listbox" style="height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;text-align:left"><span style="display:flex;align-items:center;gap:8px"><i class="icon-disc-3" style="font-size:16px;color:var(--muted)"></i>Winyl</span><i class="icon-chevron-down" style="font-size:18px;color:var(--muted)"></i></button>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<label style="font-weight:600">Gatunek</label>
<button aria-haspopup="listbox" style="height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:{{ genreColor }};font:inherit;text-align:left"><span>{{ genreVal }}</span><i class="icon-chevron-down" style="font-size:18px;color:var(--muted)"></i></button>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<label for="c-shelf" style="font-weight:600">Półka</label>
<input id="c-shelf" aria-invalid="{{ errorsStr }}" defaultValue="{{ shelfVal }}" style="height:44px;padding:0 14px;border:1px solid {{ errBorder }};border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%">
<sc-if value="{{ errors }}" hint-placeholder-val="{{ false }}"><p style="margin:0;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--danger)"><i class="icon-circle-alert" style="font-size:14px"></i>Pole Półka może mieć maksymalnie 12 znaków.</p></sc-if>
</div>
<div></div>
<div style="display:flex;flex-direction:column;gap:8px;grid-column:1 / -1">
<label for="c-desc" style="font-weight:600">Opis</label>
<textarea id="c-desc" rows="4" defaultValue="Nagrany z zespołem Akwarium w 1969 r. Wydanie Polskie Nagrania Muza XL 0569. Stan płyty bardzo dobry, okładka lekko przetarta na grzbiecie." style="padding:12px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%;resize:vertical"></textarea>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px">
<div style="flex:1"><div style="font-weight:600">Wypożyczony</div><div style="font-size:13px;color:var(--muted)">Płyta jest aktualnie poza domem</div></div>
<button role="switch" aria-checked="false" aria-label="Wypożyczony" style="width:44px;height:26px;border-radius:999px;border:0;padding:3px;background:var(--border-strong);display:flex;cursor:pointer"><span style="width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)"></span></button>
</div>
<label style="display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;cursor:pointer">
<div style="flex:1"><div style="font-weight:600">Ulubiony</div><div style="font-size:13px;color:var(--muted)">Pokazuj na początku listy</div></div>
<span role="checkbox" aria-checked="true" style="width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-check" style="font-size:14px"></i></span>
</label>
</div>
</sc-if>
<sc-if value="{{ showDetails }}" hint-placeholder-val="{{ false }}">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 24px">
<div style="display:flex;flex-direction:column;gap:8px"><label style="font-weight:600">Rok wydania</label><input defaultValue="1970" style="height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%"></div>
<div style="display:flex;flex-direction:column;gap:8px"><label style="font-weight:600">Wytwórnia</label><input defaultValue="Polskie Nagrania Muza" style="height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%"></div>
<div style="display:flex;flex-direction:column;gap:8px"><label style="font-weight:600">Numer katalogowy</label><input defaultValue="XL 0569" style="height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;width:100%"></div>
<div style="display:flex;flex-direction:column;gap:8px"><label style="font-weight:600">Stan nośnika</label><button aria-haspopup="listbox" style="height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;text-align:left"><span>Bardzo dobry (VG+)</span><i class="icon-chevron-down" style="font-size:18px;color:var(--muted)"></i></button></div>
<div style="display:flex;flex-direction:column;gap:8px">
<span style="font-weight:600">Kolor okładki</span>
<div role="note" style="min-height:44px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px dashed var(--border-strong);border-radius:10px;background:var(--subtle);color:var(--muted);font-size:13px"><i class="icon-puzzle" style="font-size:16px"></i><span>Nieobsługiwany typ pola: <code style="font-family:'DM Mono',monospace;color:var(--text)">colorpicker</code></span></div>
</div>
</div>
</sc-if>
<sc-if value="{{ isRel }}" hint-placeholder-val="{{ false }}">
<section aria-labelledby="c-rel-h" style="display:flex;flex-direction:column;gap:16px">
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
<div style="flex:1;min-width:200px"><h2 id="c-rel-h" style="margin:0;font-size:17px;font-weight:700">Redaktorzy</h2><p style="margin:0;color:var(--muted);font-size:13px">Osoby, które mogą edytować tę kolekcję</p></div>
<div style="position:relative;width:220px"><i class="icon-search" style="position:absolute;left:12px;top:11px;font-size:16px;color:var(--muted)"></i><input type="search" aria-label="Szukaj redaktorów" placeholder="Szukaj…" style="height:38px;width:100%;padding:0 12px 0 36px;border:1px solid var(--border-strong);border-radius:10px;background:var(--subtle);color:var(--text);font:inherit;outline:none"></div>
<button style="display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--danger);background:var(--surface);color:var(--danger);font:inherit;font-weight:600;cursor:pointer"><i class="icon-user-minus" style="font-size:16px"></i>Usuń zaznaczonych</button>
<button style="display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer"><i class="icon-user-plus" style="font-size:16px"></i>Dodaj redaktora</button>
</div>
<div style="border:1px solid var(--border);border-radius:12px;overflow:hidden">
<table style="width:100%;border-collapse:collapse">
<thead><tr>
<th style="width:52px;height:42px;padding:0 0 0 18px;text-align:left;background:var(--subtle);border-bottom:1px solid var(--border)"><span role="checkbox" aria-checked="mixed" style="width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-minus" style="font-size:13px"></i></span></th>
<th style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-bottom:1px solid var(--border)">Imię i nazwisko</th>
<th style="padding:0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-bottom:1px solid var(--border)">E-mail</th>
<th style="padding:0 18px 0 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--subtle);border-bottom:1px solid var(--border);width:160px">Dodano</th>
</tr></thead>
<tbody>
<sc-for list="{{ editors }}" as="e" hint-placeholder-count="3">
<tr style="background:{{ e.bg }}">
<td style="height:56px;padding:0 0 0 18px;border-bottom:1px solid var(--border)">
<sc-if value="{{ e.sel }}" hint-placeholder-val="{{ false }}"><span role="checkbox" aria-checked="true" style="width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-check" style="font-size:13px"></i></span></sc-if>
<sc-if value="{{ e.notSel }}" hint-placeholder-val="{{ true }}"><span role="checkbox" aria-checked="false" style="width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;display:flex;background:var(--surface)"></span></sc-if>
</td>
<td style="padding:0 14px;border-bottom:1px solid var(--border)"><span style="display:flex;align-items:center;gap:10px;font-weight:600"><span style="width:30px;height:30px;border-radius:50%;background:var(--subtle);font-size:11px;display:inline-flex;align-items:center;justify-content:center">{{ e.ini }}</span>{{ e.name }}</span></td>
<td style="padding:0 14px;border-bottom:1px solid var(--border);color:var(--muted)">{{ e.email }}</td>
<td style="padding:0 18px 0 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:13px">{{ e.added }}</td>
</tr>
</sc-for>
</tbody>
</table>
</div>
</section>
</sc-if>
</div>
</div>
</div>
<div style="flex:none;display:flex;align-items:center;gap:10px;padding:14px 32px;border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap">
<button style="display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--danger);background:transparent;color:var(--danger);font:inherit;font-weight:600;cursor:pointer" style-hover="background:var(--danger-soft)"><i class="icon-trash-2" style="font-size:17px"></i>Usuń</button>
<div style="flex:1"></div>
<button style="height:42px;padding:0 16px;border-radius:10px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;cursor:pointer" style-hover="background:var(--hover);color:var(--text)">Anuluj</button>
<button style="height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer" style-hover="background:var(--hover)">Zapisz i zamknij</button>
<button style="height:42px;padding:0 22px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer" style-hover="opacity:.92" style-focus="outline:3px solid var(--ring);outline-offset:2px">Zapisz</button>
</div>
</div>
</sc-if>
</main>
</div>
<sc-if value="{{ userMenu }}" hint-placeholder-val="{{ false }}">
<div role="menu" style="position:absolute;top:60px;right:24px;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(20,27,45,.16);padding:8px;z-index:20">
<div style="display:flex;gap:12px;align-items:center;padding:10px"><span style="width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700">TW</span><div><div style="font-weight:700">Tomasz Wójcik</div><div style="font-size:13px;color:var(--muted)">tomasz.wojcik@plytarium.pl</div></div></div>
<div style="height:1px;background:var(--border);margin:6px 0"></div>
<button role="menuitem" style="width:100%;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:0;border-radius:9px;background:var(--hover);color:var(--text);font:inherit;font-weight:500;text-align:left;cursor:pointer;outline:3px solid var(--ring)"><i class="icon-log-out" style="font-size:18px;color:var(--muted)"></i>Wyloguj</button>
</div>
</sc-if>
<sc-if value="{{ toast }}" hint-placeholder-val="{{ false }}">
<div role="status" style="position:absolute;left:50%;bottom:88px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:12px 12px 12px 16px;background:#1d2740;color:#ffffff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.25);z-index:20">
<span style="width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center"><i class="icon-check" style="font-size:15px"></i></span>
<span style="font-weight:500">Album „Enigmatic” został zapisany</span>
<button aria-label="Zamknij" style="width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#c3cbda;display:inline-flex;align-items:center;justify-content:center;cursor:pointer" style-hover="background:rgba(255,255,255,.1)"><i class="icon-x" style="font-size:15px"></i></button>
</div>
</sc-if>
<sc-if value="{{ modal }}" hint-placeholder-val="{{ false }}">
<div style="position:absolute;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px;z-index:30">
<div role="dialog" aria-modal="true" aria-labelledby="c-dlg" style="width:560px;max-width:100%;background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;padding:24px;gap:16px">
<div style="display:flex;align-items:flex-start;gap:12px">
<div style="flex:1"><h2 id="c-dlg" style="margin:0;font-size:20px;font-weight:700;letter-spacing:-0.01em">Dodaj redaktora</h2><p style="margin:4px 0 0;color:var(--muted);font-size:13px">Wybierz osoby spoza obecnych redaktorów. Właściciel kolekcji nie jest wyświetlany.</p></div>
<button aria-label="Zamknij" style="width:34px;height:34px;border:0;border-radius:10px;background:var(--subtle);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer"><i class="icon-x" style="font-size:17px"></i></button>
</div>
<div style="position:relative"><i class="icon-search" style="position:absolute;left:14px;top:12px;font-size:18px;color:var(--muted)"></i><input type="search" aria-label="Szukaj użytkowników" placeholder="Szukaj po nazwisku lub e-mailu…" style="height:44px;width:100%;padding:0 14px 0 42px;border:1px solid var(--primary);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;outline:none;box-shadow:0 0 0 3px var(--ring)"></div>
<div role="listbox" aria-multiselectable="true" style="display:flex;flex-direction:column;gap:6px">
<sc-for list="{{ cands }}" as="c" hint-placeholder-count="5">
<div role="option" aria-selected="{{ c.selStr }}" style="display:flex;align-items:center;gap:12px;height:54px;padding:0 14px;border-radius:12px;border:1px solid {{ c.border }};background:{{ c.bg }};cursor:pointer">
<span style="width:32px;height:32px;border-radius:50%;background:var(--subtle);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center">{{ c.ini }}</span>
<div style="flex:1;line-height:1.3"><div style="font-weight:600">{{ c.name }}</div><div style="font-size:13px;color:var(--muted)">{{ c.email }}</div></div>
<sc-if value="{{ c.sel }}" hint-placeholder-val="{{ false }}"><span style="width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary)"><i class="icon-check" style="font-size:14px"></i></span></sc-if>
<sc-if value="{{ c.notSel }}" hint-placeholder-val="{{ true }}"><span style="width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:6px"></span></sc-if>
</div>
</sc-for>
</div>
<div style="display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px">
<span>1–5 z 14</span><div style="flex:1"></div>
<button disabled="{{ true }}" aria-label="Poprzednia strona" style="width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);opacity:.5;display:inline-flex;align-items:center;justify-content:center"><i class="icon-chevron-left" style="font-size:16px"></i></button>
<button aria-label="Następna strona" style="width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer"><i class="icon-chevron-right" style="font-size:16px"></i></button>
</div>
<div style="display:flex;gap:10px">
<button style="flex:1;height:44px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer">Anuluj</button>
<button style="flex:1;height:44px;border-radius:10px;border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-weight:600;cursor:pointer">Dodaj (2)</button>
</div>
</div>
</div>
</sc-if>
</sc-if>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1280,&quot;height&quot;:900},&quot;plugin&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;plytarium&quot;,&quot;users&quot;],&quot;default&quot;:&quot;plytarium&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;flyout&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;screen&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;login&quot;,&quot;list&quot;,&quot;form&quot;,&quot;relation&quot;],&quot;default&quot;:&quot;list&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;listState&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;default&quot;,&quot;selected&quot;,&quot;empty&quot;,&quot;loading&quot;],&quot;default&quot;:&quot;default&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;tab&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;basic&quot;,&quot;details&quot;],&quot;default&quot;:&quot;basic&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;dark&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;narrow&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;errors&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;toast&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;modal&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;userMenu&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;}}">
const ALBUMS=[
['Astigmatic','Krzysztof Komeda','Winyl','Jazz','J-02','2026-09-21 14:32',false],
['Ella and Louis','Ella Fitzgerald, Louis Armstrong','Winyl','Jazz','J-04','2026-09-20 19:05',true],
['Enigmatic','Czesław Niemen, Akwarium','Winyl','Rock progresywny','R-11','2026-09-18 10:47',false],
['Kind of Blue','Miles Davis','Winyl','Jazz','J-01','2026-09-17 21:13',false],
['Legenda','Armia','Kaseta','Punk','K-03','2026-09-15 08:26',false],
['Nevermind','Nirvana','CD','Grunge','C-07','2026-09-14 16:58',true],
['Nowe sytuacje','Republika','Kaseta','Nowa fala','K-01','2026-09-12 12:09',false],
['OK Computer','Radiohead','CD','Rock alternatywny','C-12','2026-09-10 18:40',false],
['Rumours','Fleetwood Mac','Winyl','','R-04','2026-09-08 20:15',true],
['Spokojnie','Kult','Winyl','Rock','R-02','2026-09-05 11:31',false],
['Tutu','Miles Davis','CD','Jazz fusion','C-03','2026-09-03 09:52',false],
['Unknown Pleasures','Joy Division','Winyl','Post-punk','R-09','2026-09-01 22:04',false]];
const ICON={Winyl:'disc-3',CD:'disc',Kaseta:'cassette-tape'};
const EDITORS=[['Anna Kowalska','anna.kowalska@plytarium.pl','2026-08-02 17:20',false],['Marek Nowak','marek.nowak@plytarium.pl','2026-08-14 09:03',true],['Julia Wiśniewska','julia.wisniewska@plytarium.pl','2026-09-19 20:41',false]];
const CANDS=[['Piotr Zieliński','piotr.zielinski@plytarium.pl',true],['Katarzyna Lewandowska','k.lewandowska@plytarium.pl',true],['Michał Kamiński','michal.kaminski@plytarium.pl',false],['Agnieszka Dąbrowska','a.dabrowska@plytarium.pl',false],['Paweł Szymański','pawel.szymanski@plytarium.pl',false]];
const SKEL=[['62%','48%','50%'],['44%','70%','38%'],['70%','40%','60%'],['52%','58%','44%'],['38%','66%','52%'],['66%','44%','36%'],['48%','52%','58%'],['58%','62%','42%']].map(([a,b,c])=>({a,b,c}));
const USERS=[['Anna Kowalska','anna.kowalska@plytarium.pl','Redaktorzy','2026-09-26 08:14',true],['Tomasz Wójcik','tomasz.wojcik@plytarium.pl','Administratorzy','2026-09-26 09:02',true],['Julia Wiśniewska','julia.wisniewska@plytarium.pl','Redaktorzy','2026-09-25 21:40',true],['Paweł Szymański','pawel.szymanski@plytarium.pl','Goście','2026-07-11 18:03',false],['Marek Nowak','marek.nowak@plytarium.pl','Redaktorzy, Moderatorzy','2026-09-24 12:55',true],['Piotr Zieliński','piotr.zielinski@plytarium.pl','Goście','2026-09-02 16:20',true],['Katarzyna Lewandowska','k.lewandowska@plytarium.pl','Redaktorzy','2026-09-20 10:31',true],['Michał Kamiński','michal.kaminski@plytarium.pl','Moderatorzy','2026-08-29 14:12',true],['Agnieszka Dąbrowska','a.dabrowska@plytarium.pl','Goście','2026-06-18 19:47',false],['Ewa Mazur','ewa.mazur@plytarium.pl','Redaktorzy','2026-09-23 07:58',true]].sort((a,b)=>a[0].localeCompare(b[0],'pl'));
const PLUGINS={plytarium:{label:'Płytarium',short:'Płytarium',icon:'disc-3',items:[['Albumy','disc-3'],['Artyści','mic-vocal'],['Kolekcje','library'],['Gatunki','tags']]},users:{label:'Użytkownicy',short:'Użytkownicy',icon:'users',items:[['Użytkownicy','users'],['Grupy','users-round'],['Role','shield-check']]},media:{label:'Media',short:'Media',icon:'image',items:[]}};
const ini=n=>n.split(' ').map(w=>w[0]).join('').slice(0,2);
const LIGHT={bg:'#f4f6f9',surface:'#ffffff',subtle:'#f3f5f8',border:'#e6e9ef',borderStrong:'#d2d8e2',text:'#141b2d',muted:'#566175',placeholder:'#6b7588',primary:'#22304d',onPrimary:'#ffffff',danger:'#c62828',dangerSoft:'#fdf0f0',okBg:'#e3f4e8',okText:'#1c6b35',ring:'rgba(252,196,40,.55)',hover:'#f1f3f7',sel:'#fdf3cf',skel:'#eceff4',overlay:'rgba(20,27,45,.5)',side:'#1d2740',sideBorder:'#1d2740',shadow:'0 1px 2px rgba(20,27,45,.04),0 4px 16px rgba(20,27,45,.05)',scheme:'light'};
const DARK={bg:'#111726',surface:'#182033',subtle:'#1f283d',border:'#29334b',borderStrong:'#3a4661',text:'#eef1f6',muted:'#a9b3c6',placeholder:'#8a95ab',primary:'#fcd34d',onPrimary:'#1b2540',danger:'#f58a8a',dangerSoft:'#3a1d24',okBg:'#173826',okText:'#8fdfa8',ring:'rgba(252,211,77,.45)',hover:'#212b42',sel:'#3a3622',skel:'#263049',overlay:'rgba(5,8,16,.7)',side:'#0d1320',sideBorder:'#222b40',shadow:'none',scheme:'dark'};
class Component extends DCLogic {
renderVals() {
const p=this.props, screen=p.screen??'list', ls=p.listState??'default', narrow=!!p.narrow, tab=p.tab??'basic', errors=!!p.errors;
const t=p.dark?DARK:LIGHT;
const sel=ls==='selected'?[2,5,6]:[];
const showRows=ls==='default'||ls==='selected';
const rows=showRows?ALBUMS.map((a,i)=>{const s=sel.includes(i);return {name:a[0],artists:a[1],format:a[2],icon:ICON[a[2]],genre:a[3]||'—',genreColor:a[3]?'var(--text)':'var(--muted)',shelf:a[4],created:a[5],rented:a[6],notRented:!a[6],sel:s,notSel:!s,bg:s?'var(--sel)':'transparent'};}):[];
const active=screen==='relation'?'Kolekcje':'Albumy';
const plugin=p.plugin??'plytarium', isUsers=plugin==='users'&&screen==='list';
const act=isUsers?'Użytkownicy':active, pl=PLUGINS[isUsers?'users':'plytarium'];
const nav=pl.items.map(([label,icon])=>{const a=label===act;return {label,icon,current:a?'page':undefined,bg:a?'var(--sel)':'transparent',color:a?'var(--text)':'var(--muted)',weight:a?600:500};});
const rail=['plytarium','users','media'].map(k=>{const P=PLUGINS[k],a=P===pl;return {label:P.label,short:P.short,icon:P.icon,current:a?'page':undefined,bg:a?'rgba(252,211,77,.14)':'transparent',color:a?'#fcd34d':'#c3cbda',weight:a?700:500};});
const tabDefs=screen==='relation'?[['Podstawowe',false],['Redaktorzy',true]]:[['Podstawowe',tab==='basic'],['Szczegóły',tab==='details']];
const tabs=tabDefs.map(([label,a])=>({label,selected:a?'true':'false',bg:a?'var(--surface)':'transparent',color:a?'var(--text)':'var(--muted)',shadow:a?'0 1px 3px rgba(20,27,45,.12)':'none'}));
const crumbs=isUsers?[{label:'Użytkownicy',color:'var(--text)',weight:600,more:false}]:screen==='list'?[{label:'Albumy',color:'var(--text)',weight:600,more:false}]:screen==='form'?[{label:'Albumy',color:'var(--muted)',weight:400,more:true},{label:'Enigmatic',color:'var(--text)',weight:600,more:false}]:[{label:'Kolekcje',color:'var(--muted)',weight:400,more:true},{label:'Kolekcja domowa',color:'var(--text)',weight:600,more:false}];
const userMenu=!!p.userMenu;
return {
t, isLogin:screen==='login', isApp:screen!=='login', isList:screen==='list'&&!isUsers, isUserList:isUsers, rail, pluginLabel:pl.label, collapsed:narrow, showPanel:!narrow, flyout:narrow&&!!p.flyout, users:USERS.map(([name,email,groups,last,a])=>({name,email,groups,last,ini:ini(name),active:a,inactive:!a})), isFormLike:screen==='form'||screen==='relation', isRel:screen==='relation',
showBasic:screen==='form'&&tab==='basic', showDetails:screen==='form'&&tab==='details',
wide:!narrow, nav, tabs, crumbs,
rows, skel:ls==='loading'?SKEL:[], isEmpty:ls==='empty',
hasSel:sel.length>0, noSel:sel.length===0, selCount:sel.length, hdrIndet:sel.length>0, hdrNone:sel.length===0,
searchFocus:ls==='default'&&!userMenu, searchValue:ls==='empty'?'kaseta 1983':'',
range:ls==='empty'?'0 wyników':ls==='loading'?'Wczytywanie…':'1–12 z 348', showPager:ls!=='empty',
recordName:screen==='relation'?'Kolekcja domowa':'Enigmatic', formTitle:screen==='relation'?'Edycja kolekcji':'Edycja albumu · Czesław Niemen, Akwarium',
errors, errorsStr:errors?'true':'false', errBorder:errors?'var(--danger)':'var(--border-strong)',
nameVal:errors?'':'Enigmatic', shelfVal:errors?'Regał w salonie, góra':'R-11',
genreVal:errors?'— brak —':'Rock progresywny', genreColor:errors?'var(--muted)':'var(--text)',
editors:EDITORS.map(([name,email,added,s])=>({name,email,added,ini:ini(name),sel:s,notSel:!s,bg:s?'var(--sel)':'transparent'})),
cands:CANDS.map(([name,email,s])=>({name,email,ini:ini(name),sel:s,notSel:!s,selStr:s?'true':'false',bg:s?'var(--sel)':'var(--surface)',border:s?'#e0b020':'var(--border)'})),
userMenu, userMenuStr:userMenu?'true':'false', userBtnBorder:userMenu?'var(--border-strong)':'transparent',
toast:!!p.toast, modal:!!p.modal
};
}
}
</script>
</body>
</html>