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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Character count helps users know how much text they can enter when there is a limit on the number of characters.</p>

<h2 class="font-heading-xl margin-top-4">Default (text input)</h2>
<c-form_group>
  <c-label id="char-count-default" label="Agency name" hint="Enter the full name of your agency (50 characters allowed)" />
  <c-character_count id="char-count-default" name="agency_name" maxlength="50" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Textarea</h2>
<c-form_group>
  <c-label id="char-count-textarea" label="Brief description of your request" hint="Provide a summary in 200 characters or fewer" />
  <c-character_count id="char-count-textarea" name="request_description" maxlength="200" is_textarea="true" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-form_group>
  <c-label id="char-count-disabled" label="Previous submission" />
  <c-character_count id="char-count-disabled" name="previous_submission" maxlength="100" disabled="disabled" />
</c-form_group>
{% endblock %}