{% extends 'templates/sink.nunjucks' %}
{% block body %}
    <style>
        body {
            text-align: left;
        }

        .button-sink-example {
            text-align: left;
            text-indent: 0;
        }
        .button-sink-example label {
            color: black;
        }

        .n-container--dark .button-sink-example label {
            color: white;
        }
    </style>
    {% macro buttons_sink_demos(variation_class="luci-button--primary") %}
        {# This macro is used to render a consistent example set for each of the button variation types #}
        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class) }}
        {% endcall %}

        {% call button_example_wrap('<a>') %}
            {{ luci.button(class=variation_class, href="#") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(class=variation_class, el="checkbox") }}
        {% endcall %}

        {% call button_example_wrap('input[type="radio"]') %}
            {{ luci.button(class=variation_class, el="radio") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class, icon_left="messages", text="Messages") }}
        {% endcall %}

        {% call button_example_wrap('<a>') %}
            {{ luci.button(class=variation_class, icon_right="navigate-forward", text="See All Topics") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(class=variation_class, icon_right="user-profile", icon_left="download", text="Download Profile", el="checkbox") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class, icon_right="user-profile", icon_left="download", text="Download Profile") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class, icon_left="close") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(class=variation_class, icon_right="menu", el="checkbox") }}
        {% endcall %}

        <h2 class="sink-page-header">States</h2>
        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class, text="Default") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class + " luci-button--hover", text="Hover") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class + " luci-button--active", text="Active") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class + " luci-button--focus", text="Focus") }}
        {% endcall %}

        {% call button_example_wrap('<button>') %}
            {{ luci.button(class=variation_class, disabled=true, text="Disabled") }}
        {% endcall %}
        <br>
        {% call button_example_wrap('<a>') %}
            {{ luci.button(el="a", class=variation_class, text="Default") }}
        {% endcall %}

        {% call button_example_wrap('<a>') %}
            {{ luci.button(el="a", class=variation_class + " luci-button--hover", text="Hover") }}
        {% endcall %}

        {% call button_example_wrap('<a>') %}
            {{ luci.button(el="a", class=variation_class + " luci-button--active", text="Active") }}
        {% endcall %}

        {% call button_example_wrap('<a>') %}
            {{ luci.button(el="a", class=variation_class + " luci-button--focus", text="Focus") }}
        {% endcall %}

        {% call button_example_wrap('<a> disabled') %}
            {{ luci.button(el="a", class=variation_class, disabled=true, text="Disabled") }}
        {% endcall %}
        <br>
        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class, text="Default") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class + " luci-button--hover", text="Hover") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class + " luci-button--active", text="Active") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class, checked=true, text="Checked") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class + " luci-button--focus", text="Focus") }}
        {% endcall %}

        {% call button_example_wrap('input[type="checkbox"]') %}
            {{ luci.button(el="checkbox", class=variation_class, disabled=true, text="Disabled") }}
        {% endcall %}
    {% endmacro %}

    <h2 class="sink-page-header">Primary Button</h2>
    {{ buttons_sink_demos() }}


    <h2 class="sink-page-header">Small Primary Button</h2>
    {{ buttons_sink_demos(variation_class="luci-button--primary luci-button--small") }}


    <div class="n-container n-container--dark luci-container--dark">
        <h2 class="sink-page-header" style="color: white;">Primary Button, On Dark</h2>
        {{ buttons_sink_demos(variation_class="luci-button--primary-on-dark") }}
    </div>

    <h2 class="sink-page-header">Secondary Button</h2>
    {{ buttons_sink_demos(variation_class="luci-button--secondary") }}

    <h2 class="sink-page-header">Small Secondary Button</h2>
    {{ buttons_sink_demos(variation_class="luci-button--secondary luci-button--small") }}

    <h2 class="sink-page-header">Flat Button</h2>
    {{ buttons_sink_demos(variation_class="luci-button--flat") }}

    <h2 class="sink-page-header">Small Flat Button</h2>
    {{ buttons_sink_demos(variation_class="luci-button--flat luci-button--small") }}

    <h2 class="sink-page-header">Icon Only Button</h2>
    {% call button_example_wrap('<button>') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('<a>') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", icon_left="expand") }}
    {% endcall %}

    {% call button_example_wrap('input[type="checkbox"]') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="checkbox", icon_left="menu") }}
    {% endcall %}

    {% call button_example_wrap('input[type="radio"]') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="radio", icon_left="delete") }}
    {% endcall %}

    {% call button_example_wrap('<button>') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", icon_left="chat") }}
    {% endcall %}

    <h2 class="sink-page-header">Icon Only Button, States</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--hover", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--active", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--focus", icon_left="close") }}
    {% endcall %}
    
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Icon Only Button, States - Small</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--hover", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--active", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--focus", icon_left="close") }}
    {% endcall %}
    
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Icon Only Button, States, Checkbox</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--hover", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--active", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Icon Only Button, States, Checkbox - Small</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--hover", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--active", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--primary luci-button--icon-only luci-button--small", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Secondary Icon Only, (Flat Button)</h2>
    {% call button_example_wrap('<button>') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('<a>') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", icon_left="expand") }}
    {% endcall %}

    {% call button_example_wrap('input[type="checkbox"]') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", icon_left="menu") }}
    {% endcall %}

    {% call button_example_wrap('input[type="radio"]') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="radio", icon_left="delete") }}
    {% endcall %}

    {% call button_example_wrap('<button>') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", icon_left="chat") }}
    {% endcall %}

    <h2 class="sink-page-header">Secondary Icon Only, (Flat Button), States</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--hover", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--active", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--focus", icon_left="close") }}
    {% endcall %}
    
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Secondary Icon Only, (Flat Button), States - Small</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--hover", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--active", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--focus", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Secondary Icon Only, (Flat Button), States, Checkbox</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--hover", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--active", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}
    
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Secondary Icon Only, (Flat Button), States, Checkbox - Small</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--hover", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--active", el="checkbox", icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}

    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}
    
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--small", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">Too Little Content</h2>
    {{ luci.button(text="a") }}

    <h2 class="sink-page-header">Too Much Content</h2>
    {{ luci.button(text="Please don't ever put this much text in a button, it's a really bad idea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis soluta natus, enim sequi temporibus debitis ad eius autem delectus rerum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis soluta natus, enim sequi temporibus debitis ad eius autem delectus rerum.") }}
{% endblock %}

{% macro button_example_wrap(label=false) %}
    <div class="button-sink-example" style="display: inline-block; background: transparent">
        <label class="sink-page-font-reset" style="font-size: 12px;">{{ label }}</label><br/>
        {{ caller() }}
    </div>
{% endmacro %}