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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">An input group pairs a text input with a prefix or suffix to provide additional context about the expected value.</p>

<h2 class="font-heading-xl margin-top-4">Default with prefix</h2>
<c-form_group>
  <c-label id="ig-prefix" label="Cost estimate" />
  <c-input_group>
    <c-input_prefix>$</c-input_prefix>
    <c-text_input id="ig-prefix" name="cost_estimate" inputmode="numeric" />
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With suffix</h2>
<c-form_group>
  <c-label id="ig-suffix" label="Property size" />
  <c-input_group>
    <c-text_input id="ig-suffix" name="property_size" inputmode="numeric" />
    <c-input_suffix>sq. ft.</c-input_suffix>
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With prefix and suffix</h2>
<c-form_group>
  <c-label id="ig-both" label="Weight" />
  <c-input_group>
    <c-input_prefix>approx.</c-input_prefix>
    <c-text_input id="ig-both" name="weight" inputmode="numeric" />
    <c-input_suffix>lbs.</c-input_suffix>
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-form_group error="true">
  <c-label id="ig-error" label="Annual revenue" error="true" />
  <c-error_message id="ig-error" error="Enter a valid dollar amount" />
  <c-input_group error="true">
    <c-input_prefix>$</c-input_prefix>
    <c-text_input id="ig-error" name="annual_revenue" inputmode="numeric" error="true" />
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With width variant</h2>
<c-form_group>
  <c-label id="ig-width" label="Percentage complete" />
  <c-input_group width="sm">
    <c-text_input id="ig-width" name="percentage" inputmode="numeric" />
    <c-input_suffix>%</c-input_suffix>
  </c-input_group>
</c-form_group>
{% endblock %}