{% 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">Primary Button Group</h2>
    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary") }}
        {{ luci.button(class="luci-button--primary", el="checkbox") }}
        {{ luci.button(class="luci-button--primary", icon_left="messages", text="Messages") }}
        {{ luci.button(class="luci-button--primary", icon_right="user-profile", icon_left="download", text="Download Profile") }}
        {{ luci.button(class="luci-button--primary", icon_right="menu", el="checkbox") }}
    {% endcall %}

    {{ luci.button(class="luci-button--primary") }}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary", el="radio", name="primary-button-group-toggle", icon_left="menu", checked=true) }}
        {{ luci.button(class="luci-button--primary", el="radio", name="primary-button-group-toggle", icon_left="chat") }}
        {{ luci.button(class="luci-button--primary", el="radio", name="primary-button-group-toggle", icon_left="delete") }}
    {% endcall %}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary", text="Manage Details") }}
        {{ luci.button(class="luci-button--primary", icon_left="expand") }}
    {% endcall %} #}

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


{#     <h2 class="sink-page-header">Small Primary Button Group</h2>
    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary luci-button--small") }}
        {{ luci.button(class="luci-button--primary luci-button--small", el="checkbox") }}
        {{ luci.button(class="luci-button--primary luci-button--small", icon_left="messages", text="Messages") }}
        {{ luci.button(class="luci-button--primary luci-button--small", icon_right="user-profile", icon_left="download", text="Download Profile") }}
        {{ luci.button(class="luci-button--primary luci-button--small", icon_right="menu", el="checkbox") }}
    {% endcall %}

    {{ luci.button(class="luci-button--primary luci-button--small") }}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary luci-button--small", el="radio", name="primary-button-group-toggle", icon_left="menu", checked=true) }}
        {{ luci.button(class="luci-button--primary luci-button--small", el="radio", name="primary-button-group-toggle", icon_left="chat") }}
        {{ luci.button(class="luci-button--primary luci-button--small", el="radio", name="primary-button-group-toggle", icon_left="delete") }}
    {% endcall %}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--primary luci-button--small", text="Manage Details") }}
        {{ luci.button(class="luci-button--primary luci-button--small", icon_left="expand") }}
    {% endcall %} #}


    <div class="n-container n-container--dark" style="background: black;">
        <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">Secondary Button Group</h2>
    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--secondary") }}
        {{ luci.button(class="luci-button--secondary", el="checkbox") }}
        {{ luci.button(class="luci-button--secondary", icon_left="messages", text="Messages") }}
        {{ luci.button(class="luci-button--secondary", icon_right="user-profile", icon_left="download", text="Download Profile") }}
        {{ luci.button(class="luci-button--secondary", icon_right="menu", el="checkbox") }}
    {% endcall %}

    {{ luci.button(class="luci-button--secondary") }}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--secondary", el="radio", name="secondary-button-group-toggle", icon_left="menu", checked=true) }}
        {{ luci.button(class="luci-button--secondary", el="radio", name="secondary-button-group-toggle", icon_left="chat") }}
        {{ luci.button(class="luci-button--secondary", el="radio", name="secondary-button-group-toggle", icon_left="delete") }}
    {% endcall %}

    {% call luci.button_group() %}
        {{ luci.button(class="luci-button--secondary", text="Manage Details") }}
        {{ luci.button(class="luci-button--secondary", icon_left="expand") }}
    {% endcall %} #}

    <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--icon-only luci-button--small", icon_left="close") }}
    {% endcall %}

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

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

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

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

    <h2 class="sink-page-header">Icon Only Button, States</h2>
    {% call button_example_wrap('default') %}
        {{ luci.button(class="luci-button--icon-only", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--focus", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--hover", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--active", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="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--icon-only luci-button--small", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small luci-button--focus", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small luci-button--hover", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small luci-button--active", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="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--icon-only", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('hover') %}
        {{ luci.button(class="luci-button--icon-only luci-button--hover", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('active') %}
        {{ luci.button(class="luci-button--icon-only luci-button--active", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('checked') %}
        {{ luci.button(class="luci-button--icon-only", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="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--icon-only luci-button--small", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small luci-button--focus", el="checkbox", icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('hover') %}
        {{ luci.button(class="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--icon-only 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--small", el="checkbox", checked=true, icon_left="close") }}
    {% endcall %}
    {% call button_example_wrap('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--small", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}


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

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

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

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

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

    <h2 class="sink-page-header">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('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--focus", 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('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">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('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('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('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">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('focus') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat luci-button--focus", 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('disabled') %}
        {{ luci.button(class="luci-button--icon-only luci-button--flat", el="checkbox", disabled=true, icon_left="close") }}
    {% endcall %}

    <h2 class="sink-page-header">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('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('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('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 %}