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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A memorable date input allows users to enter a date they know well, such as a birthday, using separate month, day, and year fields.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-memorable_date
  id="mem-date-default"
  name="date_of_birth"
  legend="Date of birth"
/>

<h2 class="font-heading-xl margin-top-4">With custom hint</h2>
<c-memorable_date
  id="mem-date-hint"
  name="hire_date"
  legend="Date of hire"
  hint="For example: March 15 2019"
/>

<h2 class="font-heading-xl margin-top-4">With pre-filled values</h2>
<c-memorable_date
  id="mem-date-prefilled"
  name="enrollment_date"
  legend="Enrollment date"
  month_value="9"
  day_value="15"
  year_value="2023"
/>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-memorable_date
  id="mem-date-required"
  name="service_start"
  legend="Service start date"
  required="required"
/>

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-memorable_date
  id="mem-date-error"
  name="separation_date"
  legend="Date of separation"
  error="true"
/>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-memorable_date
  id="mem-date-disabled"
  name="original_date"
  legend="Original filing date"
  month_value="1"
  day_value="20"
  year_value="2020"
  disabled="disabled"
/>
{% endblock %}