Dialog

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_basic" title="Modal title" trigger_label="Delete" description="Review the selected item before continuing. Confirm this action or cancel to return to the page." %}
<div class="mt-4 flex justify-end gap-2">
  <button type="button" data-wdj-dialog-close class="inline-flex h-9 items-center rounded-lg bg-kumo-base px-3 text-base font-medium ring-1 ring-kumo-line hover:bg-kumo-tint">Cancel</button>
  <button type="button" data-wdj-dialog-close class="inline-flex h-9 items-center rounded-lg bg-kumo-danger-fill px-3 text-base font-medium text-white ring-1 ring-kumo-danger">Delete</button>
</div>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_form" title="Project settings" trigger_label="Open form"  %}
<form method="dialog" class="grid gap-4">{% include "wdj/components/input.html" with name="dialog_project" label="Project name" required=True only %}{% include "wdj/components/button.html" with label="Save" type="submit" variant="primary" only %}</form>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_description" title="Project settings" trigger_label="Open description" description="Manage your project settings." %}
<p class="text-base">Review the details before continuing.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_large" title="Project settings" trigger_label="Open large" size="lg" %}
<p class="text-base">Review the details before continuing.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_scrolling_body" title="Project settings" trigger_label="Open scrolling body"  %}
<div class="grid gap-4"><p class="text-base">Resource details and configuration 0.</p><p class="text-base">Resource details and configuration 1.</p><p class="text-base">Resource details and configuration 2.</p><p class="text-base">Resource details and configuration 3.</p><p class="text-base">Resource details and configuration 4.</p><p class="text-base">Resource details and configuration 5.</p><p class="text-base">Resource details and configuration 6.</p><p class="text-base">Resource details and configuration 7.</p><p class="text-base">Resource details and configuration 8.</p><p class="text-base">Resource details and configuration 9.</p><p class="text-base">Resource details and configuration 10.</p><p class="text-base">Resource details and configuration 11.</p><p class="text-base">Resource details and configuration 12.</p><p class="text-base">Resource details and configuration 13.</p><p class="text-base">Resource details and configuration 14.</p><p class="text-base">Resource details and configuration 15.</p><p class="text-base">Resource details and configuration 16.</p><p class="text-base">Resource details and configuration 17.</p><p class="text-base">Resource details and configuration 18.</p><p class="text-base">Resource details and configuration 19.</p><p class="text-base">Resource details and configuration 20.</p><p class="text-base">Resource details and configuration 21.</p><p class="text-base">Resource details and configuration 22.</p><p class="text-base">Resource details and configuration 23.</p></div>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_small" title="Confirm action" trigger_label="Open small dialog" size="sm" %}
<p class="text-base">Review the change.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_xl" title="Deployment details" trigger_label="Open wide dialog" size="xl" %}
<p class="text-base">Deployment summary.</p>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_confirmation" title="Confirm deployment" trigger_label="Confirm deployment" %}
<form method="dialog" class="grid gap-4"><p class="text-base">Continue with this deployment?</p>{% include "wdj/components/button.html" with label="Confirm" type="submit" variant="primary" only %}</form>
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="dialog_parent" title="Project" trigger_label="Open parent dialog" %}
{% wdj_component "wdj/components/dialog.html" id="dialog_child" title="Details" trigger_label="Open details" %}
<p class="text-base">Nested modal focus stays contained.</p>
{% endwdj_component %}
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="audit-dialog-select" title="Project settings" trigger_label="Select in dialog" %}
{% include "wdj/components/select.html" with id="audit-dialog-control-select" options=audit_options label="Environment" mode="custom" only %}
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="audit-dialog-combobox" title="Project settings" trigger_label="Combobox in dialog" %}
{% include "wdj/components/combobox.html" with id="audit-dialog-control-combobox" options=audit_options label="Environment" only %}
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="audit-dialog-dropdown" title="Project settings" trigger_label="Dropdown in dialog" %}
{% include "wdj/components/dropdown.html" with label="Actions" items=audit_menu_links only %}
{% endwdj_component %}

{% load wdj %}
{% wdj_component "wdj/components/dialog.html" id="audit-alert-dialog" title="Confirm action" trigger_label="Open alert dialog" alert=True close_on_backdrop=False %}
<p class="text-base">Review the confirmation and press Escape to cancel.</p>
{% endwdj_component %}