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

{% block body %}

<c-docs.layout.content>

    <c-docs.page-header
        title="Alert"
        description="Displays a callout for user attention."
    >
        <c-alert variant="default">
          <!-- Include the terminal icon -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="h-4 w-4"
          >
            <polyline points="4 17 10 11 4 5"></polyline>
            <line x1="12" y1="19" x2="20" y2="19"></line>
          </svg>
          <c-alert.title>Heads up!</c-alert.title>
          <c-alert.description>
            You can add components to your app using the cli.
          </c-alert.description>
        </c-alert>
    </c-docs.page-header>

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

    <c-docs.component-section title="Usage">
        <c-docs.code-example language="html">{{ "<c-alert variant='default'>
    <c-alert.title>Heads up!</c-alert.title>
    <c-alert.description>
    You can add components to your app using the cli.
    </c-alert.description>
</c-alert>" | display_code }}</c-docs.code-example>
    </c-docs.component-section>

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