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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A form group wraps a form control with its label, hint, and error message, providing consistent spacing and error styling.</p>

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

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

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-form_group error="true">
  <c-label id="fg-error" label="Date of birth" error="true" />
  <c-error_message id="fg-error" error="Enter your date of birth in the format mm/dd/yyyy" />
  <c-text_input id="fg-error" name="dob" error="true" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With extra classes</h2>
<c-form_group extra_classes="margin-top-2">
  <c-label id="fg-extra" label="Middle name" hint="Optional" />
  <c-text_input id="fg-extra" name="middle_name" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Multiple form groups</h2>
<c-form action="#" method="post">
  <c-form_group>
    <c-label id="fg-multi-first" label="First name" required="true" />
    <c-text_input id="fg-multi-first" name="first" required="required" />
  </c-form_group>
  <c-form_group>
    <c-label id="fg-multi-last" label="Last name" required="true" />
    <c-text_input id="fg-multi-last" name="last" required="required" />
  </c-form_group>
  <c-form_group error="true">
    <c-label id="fg-multi-email" label="Email address" error="true" required="true" />
    <c-error_message id="fg-multi-email" error="Enter a valid email address" />
    <c-text_input id="fg-multi-email" name="email" type="email" error="true" required="required" />
  </c-form_group>
</c-form>
{% endblock %}