{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A text input allows users to enter a single line of text.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-form_group>
  <c-label id="text-default" label="First name" />
  <c-text_input id="text-default" name="first_name" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With value</h2>
<c-form_group>
  <c-label id="text-value" label="Last name" />
  <c-text_input id="text-value" name="last_name" value="Johnson" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With hint</h2>
<c-form_group>
  <c-label id="text-hint" label="Social Security number" hint="For example, 123-45-6789" />
  <c-text_input id="text-hint" name="ssn" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Email type</h2>
<c-form_group>
  <c-label id="text-email" label="Email address" />
  <c-text_input id="text-email" name="email" type="email" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Width variants</h2>
<c-form_group>
  <c-label id="text-2xs" label="Title suffix" hint="2xs width" />
  <c-text_input id="text-2xs" name="suffix" width="2xs" />
</c-form_group>

<c-form_group>
  <c-label id="text-xs" label="ZIP code" hint="xs width" />
  <c-text_input id="text-xs" name="zip" width="xs" />
</c-form_group>

<c-form_group>
  <c-label id="text-sm" label="City" hint="sm width" />
  <c-text_input id="text-sm" name="city" width="sm" />
</c-form_group>

<c-form_group>
  <c-label id="text-md" label="Street address" hint="md width" />
  <c-text_input id="text-md" name="street" width="md" />
</c-form_group>

<c-form_group>
  <c-label id="text-lg" label="Organization name" hint="lg width" />
  <c-text_input id="text-lg" name="org" width="lg" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-form_group error="true">
  <c-label id="text-error" label="Phone number" error="true" />
  <c-error_message id="text-error" error="Enter a 10-digit phone number" />
  <c-text_input id="text-error" name="phone" type="tel" error="true" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Success state</h2>
<c-form_group>
  <c-label id="text-success" label="Confirmation code" />
  <c-text_input id="text-success" name="confirmation_code" value="ABC123" success="true" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-form_group>
  <c-label id="text-disabled" label="Agency code" />
  <c-text_input id="text-disabled" name="agency_code" value="DOJ-2024" disabled="disabled" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Read-only</h2>
<c-form_group>
  <c-label id="text-readonly" label="Case number" />
  <c-text_input id="text-readonly" name="case_number" value="CASE-2024-001234" readonly="readonly" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-form_group>
  <c-label id="text-required" label="Full legal name" required="true" />
  <c-text_input id="text-required" name="legal_name" required="required" />
</c-form_group>
{% endblock %}