{% extends "component_cookbook/base.html" %}{% load i18n %}
{% block heading %}{% translate "Interactive component cookbook" %}{% endblock %}
{% block introduction %}{% translate "Each route is a complete consumer-owned example using only Django and django-brickwork 4.2.0." %}{% endblock %}
{% block cookbook_content %}<ul class="bw-stack bw-stack--xs">
{% for name, label in recipes %}{% empty %}
<li><a href="{% url 'component_cookbook:dropdown' %}">Dropdown</a></li><li><a href="{% url 'component_cookbook:tabs' %}">Tabs</a></li><li><a href="{% url 'component_cookbook:tooltip' %}">Tooltip</a></li><li><a href="{% url 'component_cookbook:disclosure' %}">Disclosure</a></li><li><a href="{% url 'component_cookbook:tag-input' %}">Tag input</a></li><li><a href="{% url 'component_cookbook:modal' %}">Modal</a></li><li><a href="{% url 'component_cookbook:slide-over' %}">Slide-over</a></li><li><a href="{% url 'component_cookbook:combobox' %}">Combobox</a></li><li><a href="{% url 'component_cookbook:table' %}">Data table, filter bar and pagination</a></li><li><a href="{% url 'component_cookbook:search' %}">Search</a></li><li><a href="{% url 'component_cookbook:upload' %}">Dropzone</a></li>
{% endfor %}</ul>
<section class="bw-stack bw-stack--xs"><h2>{% translate "Overlay triggers" %}</h2><a class="bw-btn bw-btn--primary" href="{% url 'component_cookbook:modal' %}" hx-get="{% url 'component_cookbook:modal' %}" hx-target="#bw-modal-root" hx-swap="innerHTML">{% translate "Open modal" %}</a><a class="bw-btn bw-btn--secondary" href="{% url 'component_cookbook:slide-over' %}" hx-get="{% url 'component_cookbook:slide-over' %}" hx-target="#bw-slide-over-root" hx-swap="innerHTML">{% translate "Open slide-over" %}</a></section><section class="bw-stack bw-stack--xs"><h2>{% translate "POST demonstrations" %}</h2><form method="post" action="{% url 'component_cookbook:toggle' %}" hx-post="{% url 'component_cookbook:toggle' %}" hx-target="#toggle-outcome" hx-swap="outerHTML">{% csrf_token %}{% load brickwork_components %}{% bw_toggle "Enable notices" id="cookbook-notices" name="notices" %}<button class="bw-btn bw-btn--primary" type="submit">{% translate "Submit toggle" %}</button></form><p id="toggle-outcome" aria-live="polite">{% translate "The value is not saved." %}</p><form method="post" action="{% url 'component_cookbook:toast' %}" hx-post="{% url 'component_cookbook:toast' %}" hx-swap="none">{% csrf_token %}<button class="bw-btn bw-btn--secondary" type="submit">{% translate "Send toast" %}</button></form></section>{% endblock %}