<!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="stylesheet" href="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/_ds_bundle.css">
  <link rel="stylesheet" href="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/styles.css">
  <script src="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/_ds_bundle.js"></script>
  <style>
    @font-face { font-family: 'Audi Type'; src: url('assets/fonts/AudiTypeVF.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Audi Type Wide'; src: url('assets/fonts/AudiType-WideLight.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
    :root { --font-stack: 'Audi Type', Helvetica, Arial, sans-serif; --font-wide: 'Audi Type Wide', 'Audi Type', Helvetica, Arial, sans-serif; }
    html, body { margin: 0; background: #0b0e13; }
    a { color: #F50537; text-decoration: none; }
    a:hover { color: #fff; }
  </style>
</helmet>
<div class="ads-root" data-theme="nacht" style="min-height:100vh;background:#0b0e13;font-weight:400;padding:0 0 48px">

  <div style="position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:16px 28px;background:#0b0e13;border-bottom:1px solid var(--line)">
    <div style="min-width:180px">
      <img src="assets/audi-rings-white.svg" alt="Audi" style="height:13px;width:auto;display:block;margin-bottom:10px">
      <span class="ads-eyebrow">DataMetric360</span>
      <div style="font-size:15px;font-weight:300;margin-top:6px;font-family:var(--font-wide)">Bildschirme und Zustände</div>
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:320px">
      <sc-for list="{{ screens }}" as="s" hint-placeholder-count="8">
        <button onClick="{{ s.go }}" style="padding:8px 14px;border-radius:999px;border:1px solid {{ s.border }};font:inherit;font-size:12.5px;font-weight:300;cursor:pointer;background:{{ s.bg }};color:{{ s.fg }}">{{ s.label }}</button>
      </sc-for>
    </div>
    <div style="display:flex;align-items:center;gap:18px">
      <x-import component-from-global-scope="AudiDashUI.Seg" options="{{ themes }}" value="{{ theme }}" onChange="{{ setTheme }}" hint-size="auto,34px"></x-import>
      <sc-for list="{{ toggles }}" as="t" hint-placeholder-count="3">
        <label style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;color:var(--fg2)">
          {{ t.label }}
          <x-import component-from-global-scope="AudiDashUI.Switch" checked="{{ t.on }}" onChange="{{ t.set }}" aria-label="{{ t.label }}" hint-size="44px,26px"></x-import>
        </label>
      </sc-for>
    </div>
  </div>

  <div style="display:flex;flex-wrap:wrap;align-items:flex-start;gap:36px;padding:32px 28px">
    <div>
      <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px">
        <span class="ads-eyebrow">Smartphone</span>
        <span style="font-size:11.5px;font-weight:300;color:var(--fg3)">402 px · Tab-Leiste unten</span>
      </div>
      <div style="width:402px;height:844px;border-radius:38px;border:1px solid var(--line-strong);overflow:hidden;background:var(--canvas)">
        <dc-import name="DM360" screen="{{ screen }}" theme="{{ theme }}" offline="{{ offline }}" driving="{{ driving }}" empty="{{ empty }}" hint-size="100%,100%" style="width:100%;height:100%"></dc-import>
      </div>
    </div>

    <div>
      <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px">
        <span class="ads-eyebrow">Großer Bildschirm</span>
        <span style="font-size:11.5px;font-weight:300;color:var(--fg3)">1280 px · Navigation seitlich, Liste und Detail nebeneinander</span>
      </div>
      <div style="width:1280px;height:844px;border-radius:16px;border:1px solid var(--line-strong);overflow:hidden;background:var(--canvas)">
        <dc-import name="DM360" screen="{{ screen }}" theme="{{ theme }}" offline="{{ offline }}" driving="{{ driving }}" empty="{{ empty }}" hint-size="100%,100%" style="width:100%;height:100%"></dc-import>
      </div>
    </div>
  </div>
</div>

</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}">
const SCREENS = [
  ['uebersicht', 'Übersicht'], ['audi', 'Mein Audi'], ['fahrten', 'Fahrten'], ['statistik', 'Statistik'],
  ['tanken', 'Tanken'], ['live', 'Fahrt läuft'], ['einstellungen', 'Einstellungen'], ['setup', 'Ersteinrichtung']
];

class Component extends DCLogic {
  state = { screen: 'uebersicht', theme: 'nacht', offline: false, driving: false, empty: false };

  renderVals() {
    const s = this.state;
    return {
      screen: s.screen, theme: s.theme, offline: s.offline, driving: s.driving, empty: s.empty,
      screens: SCREENS.map(([key, label]) => ({
        label, go: () => this.setState({ screen: key }),
        bg: s.screen === key ? 'var(--tile)' : 'transparent',
        fg: s.screen === key ? 'var(--fg)' : 'var(--fg2)',
        border: s.screen === key ? 'var(--red)' : 'var(--line-strong)'
      })),
      themes: [{ value: 'nacht', label: 'Nacht' }, { value: 'tag', label: 'Tag' }],
      setTheme: (t) => this.setState({ theme: t }),
      toggles: [
        { label: 'Offline', on: s.offline, set: (v) => this.setState({ offline: v }) },
        { label: 'Fährt gerade', on: s.driving, set: (v) => this.setState({ driving: v }) },
        { label: 'Ohne Daten', on: s.empty, set: (v) => this.setState({ empty: v }) }
      ]
    };
  }
}

</script>
</body>
</html>
