{% extends "templates/sink.nunjucks" %}
{% block body %}
    <h1 class="sink-page-header">Menus Sink</h1>

    <p class="sink-page-font-reset">
        Menus can have <b>buttons</b>, <b>split buttions</b> or <b>links</b> as the trigger element. Menu content can be any component.
    </p>
    <p class="sink-page-font-reset">
        All Menus will close on Escape key press and on click of document body. Only one Menu will be open at a time.
    </p>

    <h2 class="sink-page-header">Menu Default Empty Content</h2>
    {{ luci.menu() }}

    <hr>

    <h2 class="sink-page-header">Menu Default With White Background Empty Content</h2>
    {{ luci.menu(container_class="luci-container--white") }}

    <hr>

    <h2 class="sink-page-header">Menu Secondary, Small Button Trigger</h2>
    {% call luci.menu(
      body_padding=false,
      trigger={
        type: "button",
        props: {
          text: "Secondary Small Button Trigger",
          class: "luci-button--secondary luci-button--small",
          icon_right: "expand"
        }
      }
    ) %}
      {{ luci.list_group(list=list.with_icon) }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Flat Button Trigger</h2>
    {% call luci.menu(
      trigger={
        type: "button",
        props: {
          text: "Flat Button Trigger",
          class: "luci-button--flat",
          icon_right: "expand"
        }
      }
    ) %}
      <div class="luci-long-form-text">
        <h4>H4 Heading</h4>
        <p>
          Long Form Text as menu content.
        </p>
      </div>
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Split Button Trigger</h2>
    {% call luci.menu(
      body_padding=false,
      class="luci-menu--left",
      trigger={
        type: "button",
        props: {
          class: "luci-button--secondary luci-button--small",
          icon_left: "expand"
        },
        button_group: {
          props: {
            text: "Split Button",
            class: "luci-button--secondary luci-button--small"
          }
        }
      }
    ) %}
      {{ luci.list_group(list=list.with_icon) }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Primary Button Trigger With Medium Blue Background</h2>
    {% call luci.menu(
      container_class="luci-container--medium-blue",
      trigger={
        type: "button",
        props: {
          text: "Primary Button Trigger",
          class: "luci-button--primary",
          icon_right: "expand"
        }
      }
    ) %}
      {{ luci.link(text="Link as menu content.") }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Primary, Small Button Trigger With Dark Blue Container</h2>
    {% call luci.menu(
      container_class="luci-container--dark-blue",
      body_padding=false,
      trigger={
        type: "button",
        props: {
          text: "Primary Small Button Trigger",
          class: "luci-button--primary luci-button--small",
          icon_right: "expand"
        }
      }
    ) %}
      {{ luci.list_group(list=list.with_icon) }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Icon Button Trigger</h2>
    {% call luci.menu(
      trigger={
        type: "button",
        props: {
          class: "luci-button--icon-only luci-button--flat",
          icon_left: "add"
        }
      }
    ) %}
      {{ luci.notification(class="luci-notification--success luci-notification--inline", text="Notification as menu content. Don't do this.") }}
    {% endcall %}

    <h2 class="sink-page-header">Menu Small, Icon Button Trigger</h2>
    {% call luci.menu(
      trigger={
        type: "button",
        props: {
          class: "luci-button--icon-only luci-button--flat luci-button--small",
          icon_left: "add"
        }
      }
    ) %}
      <div class="luci-long-form-text">
        <h4>H4 Heading</h4>
        <p>
          Long Form Text as menu content.
        </p>
      </div>
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu With Link Trigger</h2>
    {% call luci.menu(
      trigger={
        type: "link",
        props: {
          text: "Regular Link with Expand Icon",
          icon_right: "expand"
        }
      }
    ) %}
      {{ luci.link(text="Link as menu content.") }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Left</h2>
    {% call luci.menu(class="luci-menu--left") %}
      {{ luci.notification(class="luci-notification--success luci-notification--inline", text="Notification as menu content. Don't do this.") }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu With Checkboxes And Action Row With Darkest Blue Background</h2>
    {% call luci.menu(body_padding=false, action_button_text="Submit", container_class="luci-container--darkest-blue") %}
      {{ luci.list_group(list=list.with_checkboxes) }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Left With Compressed Form And Action Row</h2>
    {% call luci.menu(class="luci-menu--left", action_button_text="Submit" ) %}
      {% call luci.form(class="luci-form--compressed") %}
          {% call luci.form_field_group() %}
            {{ luci.form_label(for="first_name", name="First Name") }}
            {{ luci.form_input(name="firstName", input_id="first_name") }}
          {% endcall %}
          {% call luci.form_field_group() %}
            {{ luci.form_label(for="last_name", name="Last Name") }}
            {{ luci.form_input(name="lastName", input_id="last_name") }}
          {% endcall %}
          {% call luci.form_field_group() %}
            {{ luci.form_label(for="phone_number", name="Phone Number") }}
            {{ luci.form_input(input_type="tel", name="phoneNumber", input_id="phone_number") }}
          {% endcall %}
          {% call luci.form_field_group() %}
            {{ luci.form_label(for="work_email", name="Work Email") }}
            {{ luci.form_input(input_type="email", name="email", input_id="work_email") }}
          {% endcall %}
          {% call luci.form_field_group() %}
            {{ luci.form_label(for="country", name="Country") }}
            {{ luci.form_select(name="country", id="country", options=[
              {
                "label": "Afghanistan"
              },
              {
                "label": "Albania"
              },
              {
                "label": "Algeria"
              },
              {
                "label": "United States",
                "selected": true
              }
            ]) }}
          {% endcall %}
      {% endcall %}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Menu Left With Checkboxes And Action Row With White Background Content</h2>
    {% call luci.menu(class="luci-menu--left", container_class="luci-container--white", body_padding=false, action_button_text="Submit" ) %}
      {{ luci.list_group(list=list.with_checkboxes) }}
    {% endcall %}

    <h2 class="sink-page-header">Menu Custom Trigger</h2>
    <p class="sink-page-font-reset">
      Custom trigger element must have the <code>luci-menu__trigger</code> class.
    </p>
    {% call luci.menu(
      body_padding=false,
      custom_trigger='<button class="luci-menu__trigger">Custom Trigger Element</button>'
    ) %}
      {{ luci.list_group(list=list.with_icon) }}
    {% endcall %}

    <div style="height:400px;"></div>

{% endblock body %}