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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">An input prefix is a visual indicator placed before a text input to convey the expected type of value, such as a currency symbol.</p>

<h2 class="font-heading-xl margin-top-4">Currency symbol</h2>
<c-form_group>
  <c-label id="prefix-currency" label="Loan amount" />
  <c-input_group>
    <c-input_prefix>$</c-input_prefix>
    <c-text_input id="prefix-currency" name="loan_amount" inputmode="numeric" />
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Text prefix</h2>
<c-form_group>
  <c-label id="prefix-text" label="Website address" />
  <c-input_group>
    <c-input_prefix>https://</c-input_prefix>
    <c-text_input id="prefix-text" name="website" type="url" />
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With icon (using text)</h2>
<c-form_group>
  <c-label id="prefix-at" label="Email address" />
  <c-input_group>
    <c-input_prefix>@</c-input_prefix>
    <c-text_input id="prefix-at" name="email" type="email" />
  </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="prefix-error" label="Budget allocation" error="true" />
  <c-error_message id="prefix-error" error="Enter an amount greater than zero" />
  <c-input_group error="true">
    <c-input_prefix>$</c-input_prefix>
    <c-text_input id="prefix-error" name="budget" inputmode="numeric" error="true" />
  </c-input_group>
</c-form_group>
{% endblock %}