462 lines
64 KiB
HTML
462 lines
64 KiB
HTML
<!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&family=DM+Mono:wght@400;500&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="{"$preview":{"width":1280,"height":900},"plugin":{"editor":"enum","options":["plytarium","users"],"default":"plytarium","tsType":"string"},"flyout":{"editor":"boolean","default":false,"tsType":"boolean"},"screen":{"editor":"enum","options":["login","list","form","relation"],"default":"list","tsType":"string"},"listState":{"editor":"enum","options":["default","selected","empty","loading"],"default":"default","tsType":"string"},"tab":{"editor":"enum","options":["basic","details"],"default":"basic","tsType":"string"},"dark":{"editor":"boolean","default":false,"tsType":"boolean"},"narrow":{"editor":"boolean","default":false,"tsType":"boolean"},"errors":{"editor":"boolean","default":false,"tsType":"boolean"},"toast":{"editor":"boolean","default":false,"tsType":"boolean"},"modal":{"editor":"boolean","default":false,"tsType":"boolean"},"userMenu":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
||
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>
|