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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A select component allows users to choose one option from a list displayed in a dropdown menu.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-form_group>
  <c-label id="select-default" label="State of residence" />
  <c-select
    id="select-default"
    name="state"
    default_option="- Select -"
    :options='[
      {"value": "AL", "display": "Alabama"},
      {"value": "AK", "display": "Alaska"},
      {"value": "AZ", "display": "Arizona"},
      {"value": "CA", "display": "California"},
      {"value": "CO", "display": "Colorado"},
      {"value": "DC", "display": "District of Columbia"},
      {"value": "FL", "display": "Florida"},
      {"value": "GA", "display": "Georgia"},
      {"value": "MD", "display": "Maryland"},
      {"value": "NY", "display": "New York"},
      {"value": "TX", "display": "Texas"},
      {"value": "VA", "display": "Virginia"}
    ]'
  />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">With pre-selected value</h2>
<c-form_group>
  <c-label id="select-preselected" label="Branch of service" />
  <c-select
    id="select-preselected"
    name="branch"
    default_option="- Select -"
    value="army"
    :options='[
      {"value": "army", "display": "U.S. Army"},
      {"value": "navy", "display": "U.S. Navy"},
      {"value": "air_force", "display": "U.S. Air Force"},
      {"value": "marines", "display": "U.S. Marine Corps"},
      {"value": "coast_guard", "display": "U.S. Coast Guard"},
      {"value": "space_force", "display": "U.S. Space Force"}
    ]'
  />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-form_group>
  <c-label id="select-required" label="Document type" required="true" />
  <c-select
    id="select-required"
    name="document_type"
    default_option="- Select -"
    required="required"
    :options='[
      {"value": "passport", "display": "U.S. Passport"},
      {"value": "drivers_license", "display": "State-issued Driver License"},
      {"value": "military_id", "display": "Military ID"},
      {"value": "green_card", "display": "Permanent Resident Card"}
    ]'
  />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Disabled</h2>
<c-form_group>
  <c-label id="select-disabled" label="Account type" />
  <c-select
    id="select-disabled"
    name="account_type"
    default_option="- Select -"
    value="individual"
    disabled="disabled"
    :options='[
      {"value": "individual", "display": "Individual"},
      {"value": "business", "display": "Business"},
      {"value": "government", "display": "Government"}
    ]'
  />
</c-form_group>
{% endblock %}