<div id="page_slots_demo">
<link rel="stylesheet" href="/docs/components/page/demo.css">
{% set slots = components.page.slots %}

<fieldset id="page_slots_fieldset">
  <legend>Slots</legend>
  <div class="options">
  {% for slot in slots %}
	{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" and slot.name != 'navigation-toggle' | safe}} class="{{ 'default' if not slot.name }}"
  data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
    {{ slot.name or "(default)" }}
  </wa-checkbox>
	{% endif %}
  {% endfor %}
  </div>
</fieldset>

<wa-zoomable-frame srcdoc="" zoom="0.5" id="page_slots_iframe"></wa-zoomable-frame>
</div>

<script type="module">
  const cacheBust = new Date().toString()
  import(`/docs/components/page/demo.js?${cacheBust}`)
</script>
