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

    <h2 class="sink-page-header">Basic Modal Dialog (Large)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#basicModalLarge'
        }
      ]
      ) }}

    {{ luci.dialog(
      id="basicModalLarge",
      title="Delete Server ABC",
      text='You have opted to delete Server ABC from the cluster. This action cannot be undone. Please confirm that you want to proceed.') }}

      <h2 class="sink-page-header">Basic Modal Dialog (Alot of content)</h2>
      {{ luci.button(
        text="Launch Demo Modal",
        class="luci-button--primary",
        custom_attr_array=[
          {
            name: 'data-luci-toggle',
            value: 'modal'
          },
          {
            name: 'data-luci-target',
            value: '#basicModalContent'
          }
        ]
        ) }}

      {{ luci.dialog(
        id="basicModalContent",
        title="Content Modal",
        text='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.') }}

    <h2 class="sink-page-header">Basic Modal Dialog (Small)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#basicModalSmall'
        }
      ]
      ) }}

    {{ luci.dialog(
      id="basicModalSmall",
      class='luci-dialog--small',
      title="Delete Server ABC",
      text='You have opted to delete Server ABC from the cluster. This action cannot be undone. Please confirm that you want to proceed.',
      open=false) }}

    <h2 class="sink-page-header">Modal Dialog Form (Large)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#modalDialogFormLarge'
        }
      ]
      ) }}

    {% call luci.dialog(
        id="modalDialogFormLarge",
        title="Please Sign or Register",
        text="Please validate your email in order to proceed to access all of the features for the product.",
        primary_action_text="Sign In",
        open=false
      ) %}
      {% call luci.form(class="luci-form--compressed") %}
          {% call luci.form_field_group() %}
              {{ luci.form_label(for="username", name="Username") }}
              {{ luci.form_input(name="username", placeholder="Enter username", describedby="Username") }}
          {% endcall %}
          {% call luci.form_field_group() %}
              {{ luci.form_label(for="password", name="Password") }}
              {{ luci.form_input(input_type="password", name="password", placeholder="Enter password", describedby="password") }}
          {% endcall %}
      {% endcall %}
    {% endcall %}

    <h2 class="sink-page-header">Modal Dialog Form (Small)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#modalDialogFormSmall'
        }
      ]
      ) }}

    {% call luci.dialog(
        id="modalDialogFormSmall",
        class='luci-dialog--small',
        title="Please Sign or Register",
        text="Please validate your email in order to proceed to access all of the features for the product.",
        primary_action_text="Sign In",
        open=false
      ) %}
      {% call luci.form(class="luci-form--compressed") %}
          {% call luci.form_field_group() %}
              {{ luci.form_label(for="username", name="Username") }}
              {{ luci.form_input(name="username", placeholder="Enter username", describedby="Username") }}
          {% endcall %}
          {% call luci.form_field_group() %}
              {{ luci.form_label(for="password", name="Password") }}
              {{ luci.form_input(input_type="password", name="password", placeholder="Enter password", describedby="password") }}
          {% endcall %}
      {% endcall %}
    {% endcall %}

    <h2 class="sink-page-header">Basic Non-Modal Dialog (Large)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#nonModalDialogLarge'
        }
      ]
      ) }}

    {% call luci.dialog(
        id="nonModalDialogLarge",
        class="luci-dialog--non-modal",
        title="We use cookies",
        text="We use cookies on this site to ensure you have the best experience possible.",
        cancel_text=false,
        primary_action_text="Close",
        primary_action_dismiss=true,
        open=false
      ) %}
    {% endcall %}

    <h2 class="sink-page-header">Basic Non-Modal Dialog (Small)</h2>
    {{ luci.button(
      text="Launch Demo Modal",
      class="luci-button--primary",
      custom_attr_array=[
        {
          name: 'data-luci-toggle',
          value: 'modal'
        },
        {
          name: 'data-luci-target',
          value: '#nonModalDialogSmall'
        }
      ]
      ) }}

    {% call luci.dialog(
        id="nonModalDialogSmall",
        class="luci-dialog--small luci-dialog--non-modal",
        title="We use cookies",
        text="We use cookies on this site to ensure you have the best experience possible.",
        cancel_text=false,
        primary_action_text="Close",
        primary_action_dismiss=true,
        open=false
      ) %}
    {% endcall %}

{% endblock body %}