{% extends 'base.html' %}
{% load code_display %}

{% block body %}

<c-docs.layout.content>

    <c-docs.page-header
        title="Dialog"
        description="A window overlaid on either the primary window or another dialog window, rendering the content underneath inert."
    >
        <c-dialog>
          <c-dialog.trigger>Open Dialog</c-dialog.trigger>
          <c-dialog.content>
            <c-dialog.header>
              <c-dialog.title>Are you absolutely sure?</c-dialog.title>
              <c-dialog.description>
                This action is permanent and cannot be undone.
              </c-dialog.description>
            </c-dialog.header>
            <div class="flex justify-end gap-2 pt-4">
              <c-button variant="outline" @click="hideDialog">Cancel</c-button>
              <c-button variant="default">Submit</c-button>
            </div>
          </c-dialog.content>
        </c-dialog>
    </c-docs.page-header>

    <c-docs.component-section title="Installation">
        <c-docs.code-example language="bash">uvx shadcn_django@latest add dialog</c-docs.code-example>
    </c-docs.component-section>

    <c-docs.component-section title="Usage">
        <c-docs.code-example language="html">{{ "<c-dialog>
    <c-dialog.trigger>Open Dialog</c-dialog.trigger>
    <c-dialog.content>
        <c-dialog.header>
            <c-dialog.title>Are you absolutely sure?</c-dialog.title>
            <c-dialog.description>
            This action is permanent and cannot be undone.
            </c-dialog.description>
        </c-dialog.header>
        <div class='flex justify-end gap-2 pt-4'>
            <c-button variant='outline' @click='hideDialog'>Cancel</c-button>
            <c-button variant='default'>Submit</c-button>
        </div>
    </c-dialog.content>
</c-dialog>" | display_code }}</c-docs.code-example>
    </c-docs.component-section>

</c-docs.layout.content>
{% endblock %}
