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

{% block body %}

<c-docs.layout.content>

    <c-docs.page-header
        title="Alert Dialog"
        description="A modal dialog that interrupts the user with important content and expects a response."
    >
        <c-alert-dialog>
            <c-button variant="outline">
                <c-alert-dialog.trigger>Open Dialog</c-alert-dialog.trigger>
            </c-button>

            <c-alert-dialog.content>
                <c-alert-dialog.header>
                    <c-alert-dialog.title>Are you absolutely sure?</c-alert-dialog.title>
                    <c-alert-dialog.description>
                    This action cannot be undone. This will permanently delete your account
                    and remove your data from our servers.
                    </c-alert-dialog.description>
                </c-alert-dialog.header>
                <c-alert-dialog.footer>
                    <c-alert-dialog.cancel>Cancel</c-alert-dialog.cancel>
                    <c-alert-dialog.action>Continue</c-alert-dialog.action>
                </c-alert-dialog.footer>
            </c-alert-dialog.content>
        </c-alert-dialog>
    </c-docs.page-header>

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

    <c-docs.component-section title="Usage">
        <c-docs.code-example language="html">{{ "<c-alert-dialog>
    <c-button variant='outline'>
        <c-alert-dialog.trigger>Open Dialog</c-alert-dialog.trigger>
    </c-button>

    <c-alert-dialog.content>

        <c-alert-dialog.header>
            <c-alert-dialog.title>Are you absolutely sure?</c-alert-dialog.title>
            <c-alert-dialog.description>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
            </c-alert-dialog.description>
        </c-alert-dialog.header>

        <c-alert-dialog.footer>
            <c-alert-dialog.cancel>Cancel</c-alert-dialog.cancel>
            <c-alert-dialog.action>Continue</c-alert-dialog.action>
        </c-alert-dialog.footer>
    </c-alert-dialog.content>

</c-alert-dialog>" | display_code }}</c-docs.code-example>
    </c-docs.component-section>

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