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

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

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

    <hr>

    <h2 class="sink-page-header">Popover heading and description</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."]
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover heading, description and actions</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover heading, description and primary action only</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      action_button_text="Continue"
    ) }}

    <h2 class="sink-page-header">Popover heading, description and cancel action only</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover heading, description, form field and actions</h2>
    {% call luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue",
      trigger={
        type: "button",
        props: {
          text: "Primary Button Trigger",
          class: "luci-button--primary luci-button--flat"
        }
      }
    ) %}
      {{ luci.form_input(input_type="text", placeholder="Enter an answer") }}
    {% endcall %}

    <h2 class="sink-page-header">Popover heading, description, <b>2 form fields</b> and actions</h2>
    {% call luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue",
      trigger={
        type: "button",
        props: {
          text: "Primary Button Trigger",
          class: "luci-button--primary luci-button--flat"
        }
      }
    ) %}
      {{ luci.form_input(input_type="text", placeholder="Enter a name") }}
      {{ luci.form_input(input_type="text", placeholder="Enter an answer") }}
    {% endcall %}

    <hr>

    <h2 class="sink-page-header">Popover heading only</h2>
    {{ luci.popover(
      heading="Popover Heading"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover description only</h2>
    {{ luci.popover(
      description=["Popover text goes here and here and some text here and maybe just."],
      trigger={
        type: "button",
        props: {
          text: "Flat Button Trigger",
          class: "luci-button--secondary luci-button--flat"
        }
      }
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover heading and description (multiple paragraphs)</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=[
        "Popover text goes here and here and some text here and maybe just.",
        "Popover text goes here and here and some text here and maybe just."
      ],
      trigger={
        type: "button",
        props: {
          class: "luci-button--icon-only luci-button--flat",
          icon_left: "add"
        }
      }
    ) }}
    
    <hr>
    <hr>

    <h2 class="sink-page-header">Popover Positions</h2>

    <hr>

    <h2 class="sink-page-header">Popover bottom, center (default)</h2>
    {{ luci.popover(
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover bottom, offset right</h2>
    {{ luci.popover(
      class="luci-popover--right",
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover bottom, offset left</h2>
    {{ luci.popover(
      class="luci-popover--left",
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover top, center</h2>
    {{ luci.popover(
      class="luci-popover--top",
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover top, offset right</h2>
    {{ luci.popover(
      class="luci-popover--right luci-popover--top",
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

    <hr>

    <h2 class="sink-page-header">Popover top, offset left</h2>
    {{ luci.popover(
      class="luci-popover--left luci-popover--top",
      heading="Popover Heading",
      description=["Popover text goes here and here and some text here and maybe just."],
      cancel_button_text="Cancel",
      action_button_text="Continue"
    ) }}

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

{% endblock body %}