---
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 if theme.fileSlug !== 'custom' else 'default' }}"
unlisted: true
---
{% set isPro = theme.data.isPro %}
{% set status = theme.data.status %}
{% set since = theme.data.since %}
<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" class="wa-size-s"></p>
  <p id="theme-status">{% include 'status.njk' %}</p>
  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
  {% if theme.fileSlug === 'custom' %}
  <p>
    <wa-button href="../edit/" class="edit-link" target="_parent" appearance="outlined">
      <wa-icon slot="start" name="pencil"></wa-icon>
      Edit theme
    </wa-button>
  </p>
  {% endif %}
</header>
{% include 'theme-showcase.njk' %}
{% endset %}

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

<script type="module" src="../demo/index.js"></script>
