---
layout: blank
pagination:
  data: collections.theme
  size: 1
  alias: theme
permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
eleventyExcludeFromCollections: true
override:tags: []
eleventyComputed:
  forceTheme: "{{ theme.fileSlug }}"
---

<link rel="stylesheet" href="/docs/themes/showcase.css" />

{% set content %}
<header>
  {% include 'breadcrumbs.njk' %}
  <h1 class="title">{{ theme.data.title }}</h1>
  <p id="mix_and_match" hidden class="wa-size-s"></p>
  <p>{% include 'status.njk' %}</p>
  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
</header>
{% include 'theme-showcase.njk' %}
{% endset %}

<wa-image-comparer style="width: 100%" position="90">
<div slot="after" class="theme-showcase wa-gap-xl">
{{ content | safe }}
</div>
<div slot="before" class="theme-showcase wa-gap-xl wa-invert">
  {{ content | safe }}
</div>
</wa-image-comparer>

<script type="module">
import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";

function updateTheme() {
  let params = new URLSearchParams(window.location.search);
  params = Object.fromEntries(params.entries());

  const docsURLs = {
    colors: '/docs/themes/',
    palette: '/docs/palettes/',
    typography: '/docs/themes/'
  };
  const icons = {
    colors: 'palette',
    palette: 'swatchbook',
    brand: 'droplet',
    typography: 'font-case'
  };

  for (let link of document.querySelectorAll('link.mix-and-match')) {
    link.remove();
  }

  let msgs = [];
  let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
  document.head.insertAdjacentHTML('beforeend', code);

  for (let name in stylesheetURLs) {
    let override = params[name];
    if (override) {
      let docsURL = docsURLs[name] ? docsURLs[name] + override + '/' : '';
      let title = override.replace(/^[a-z]/g, c => c.toUpperCase());

      if (docsURL) {
        title = `<a href="${ docsURL }">${ title }</a>`;
      }

      let icon = icons[name];
      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
    }
  }

  for (let p of mix_and_match) {
    p.hidden = msgs.length === 0;
    if (msgs.length) {
      let icon =
      p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
        ${ msg }</wa-badge>`).join(' ');
    }
  }
}
updateTheme();
</script>
