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

{% block body %}

<c-docs.layout.content>

    <c-docs.page-header
        title="Checkbox"
        description="A control that allows the user to toggle between checked and not checked."
    >
        <div class="flex items-center space-x-2">
            <c-checkbox id="terms" />
            <label
                for="terms"
                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
                Accept terms and conditions
            </label>
        </div>
    </c-docs.page-header>

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

    <c-docs.component-section title="Usage">
        <c-docs.code-example language="html">{{ "<c-checkbox id='terms' />" | display_code }}</c-docs.code-example>
    </c-docs.component-section>

    <c-docs.component-section title="Examples">
        <c-docs.example-item title="With text" language="html">
            <div class="items-top flex space-x-2">
                <c-checkbox id="terms" />
                <div class="grid gap-1.5 leading-none">
                    <label
                        for="terms"
                        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                        Accept terms and conditions
                    </label>
                    <p class="text-sm text-muted-foreground">
                        You agree to our Terms of Service and Privacy Policy.
                    </p>
                </div>
            </div>

            <c-slot name="code">{{ "<div class='items-top flex space-x-2'>
    <c-checkbox id='terms' />
    <div class='grid gap-1.5 leading-none'>
        <label
            for='terms'
            class='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
        >
            Accept terms and conditions
        </label>
        <p class='text-sm text-muted-foreground'>
            You agree to our Terms of Service and Privacy Policy.
        </p>
    </div>
</div>" | display_code }}</c-slot>
        </c-docs.example-item>

        <c-docs.example-item title="Disabled" language="html">
            <c-checkbox id='terms' disabled />
            <c-slot name="code">{{ "<c-checkbox id='terms' disabled />" | display_code }}</c-slot>
        </c-docs.example-item>
    </c-docs.component-section>

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