<div class="dol-form-section-title">
  <h2>Application Info</h2>
  <div class="dol-form-section-help">
    <ul>
      <li><a role="button" id="appInfoShowAllHelp" ng-keyup="$event.keyCode === 13 ? vm.toggleAllHelpText() : null" ng-click="vm.toggleAllHelpText($event)" tabindex="0">Show Help for All Items</a></li>
    </ul>
  </div>
</div>
<div class="dol-form-section-sub-title">
  All fields are required unless indicated as optional.
</div>
<div class="usa-alert usa-alert-error" role="alert" tabindex="0" ng-show="validate('__appinfo')">
  <div class="usa-alert-body">
    <p class="usa-alert-text">Please review this page. There are errors or missing information that we need to collect before you can submit the form.</p>
  </div>
</div>
<div class="dol-form-page">
  <fieldset class="dol-form-sub-section">
    <legend><h3>Application Type</h3></legend>
    <hr />

    <div class="dol-form-question-block" ng-class="validate('applicationTypeId') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs">
        <legend class="hide"><span id="applicationTypeLabel">What type of application is this?</span></legend>
        <div class="dol-legend-help">
          <span class="dol-form-question-text" aria-hidden="true">What type of application is this?</span>
          <helplink aria-controls="applicationTypeIdHelp" aria-describedby="applicationTypeLabel"></helplink>
        </div>
        <helptext category="appInfoShowAllHelp" id="applicationTypeIdHelp">Initial applicants are those who do not currently hold a valid section 14(c) certificate. Renewal applicants are employers who currently hold a valid certificate.</helptext>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('applicationTypeId')">{{ validate('applicationTypeId') }}</span>
        <ul class="usa-unstyled-list">
          <li ng-repeat="response in responses.ApplicationType">
            <input id="applicationType_{{ response.id }}" type="radio" name="applicationTypeId" ng-value="response.id" ng-model="formData.applicationTypeId">
            <label for="applicationType_{{ response.id }}">{{ response.display }}</label>
          </li>
        </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" ng-class="validate('hasPreviousApplication') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs">
        <legend class="dol-form-question-text">Has this employer ever previously applied for a section 14(c) certificate?</legend>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('hasPreviousApplication')">{{ validate('hasPreviousApplication') }}</span>
        <ul class="usa-unstyled-list">
          <li>
            <input id="hasPreviousApplication_1" type="radio" name="hasPreviousApplication" ng-value="true" ng-model="formData.hasPreviousApplication">
            <label for="hasPreviousApplication_1">Yes</label>
          </li>
          <li>
            <input id="hasPreviousApplication_0" type="radio" name="hasPreviousApplication" ng-value="false" ng-model="formData.hasPreviousApplication">
            <label for="hasPreviousApplication_0">No</label>
          </li>
        </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" ng-class="validate('hasPreviousCertificate') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs">
        <legend class="dol-form-question-text">Has this employer ever previously held a section 14(c) certificate?</legend>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('hasPreviousCertificate')">{{ validate('hasPreviousCertificate') }}</span>
        <ul class="usa-unstyled-list">
          <li>
            <input id="hasPreviousCertificate_1" type="radio" name="hasPreviousCertificate" ng-value="true" ng-model="formData.hasPreviousCertificate">
            <label for="hasPreviousCertificate_1">Yes</label>
          </li>
          <li>
            <input id="hasPreviousCertificate_0" type="radio" name="hasPreviousCertificate" ng-value="false" ng-model="formData.hasPreviousCertificate">
            <label for="hasPreviousCertificate_0">No</label>
          </li>
        </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" ng-show="formData.hasPreviousCertificate === true" ng-class="validate('previousCertificateNumber') ? 'usa-input-error' : ''">
      <label for="previousCertificateNumber" class="dol-form-question-text">What is the most recently held main establishment certificate number?</label>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('previousCertificateNumber')">{{ validate('previousCertificateNumber') }}</span>
      <input id="previousCertificateNumber" name="previousCertificateNumber" type="text" class="dol-side-example certificateno" mask="99-99999-9-999" ng-model="formData.previousCertificateNumber" aria-describedby="examplePrevCertNumber">
      <span id="examplePrevCertNumber" class="dol-example-text">Example: 12-34567-H-890</span>
    </div>

    <div class="dol-form-question-block" ng-class="validate('establishmentTypeId') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs">
        <legend class="dol-form-question-text">What type of establishment(s) are covered by this request for authority to employ workers with disabilities for?</legend>
        <p class="dol-form-question-subtext">Select all that apply</p>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('establishmentTypeId')">{{ validate('establishmentTypeId') }}</span>
        <ul class="usa-unstyled-list dol-list-help">
          <li ng-repeat="response in responses.EstablishmentType">
            <input id="establishmentType_{{ response.id }}" type="checkbox" name="establishmentTypeId" ng-value="response.id" ng-checked="formData.establishmentTypeId.indexOf(response.id) > -1" ng-click="vm.toggleEstablishmentType(response.id)">
            <label id="establishmentType_{{ response.id }}Label" for="establishmentType_{{ response.id }}">{{ response.display }}</label>
            <helplink aria-controls="establishmentType_{{ response.id }}Help" aria-describedby="establishmentType_{{ response.id }}Label"></helplink>
            <helptext category="appInfoShowAllHelp" id="establishmentType_{{ response.id }}Help">
                {{ response.subDisplay }}
            </helptext>
          </li>
        </ul>
      </fieldset>
    </div>
  </fieldset>


  <fieldset class="dol-form-sub-section">
    <legend class="hide">
      <span id="applicationContactLabel">Application Contact Person</span>
    </legend>
    <div class="dol-legend-h3-help">
      <h3 aria-hidden="true">Application Contact Person</span></h3>
      <helplink aria-controls="applicationContactPersonHelp" aria-describedby="applicationContactLabel"></helplink>
    </div>
    <helptext category="appInfoShowAllHelp" id="applicationContactPersonHelp">This should be a person who can best answer questions concerning information contained on this application.</helptext>
    <hr />
    <div class="dol-form-question-block" ng-class="validate('contactFirstName') ? 'usa-input-error' : ''">
      <label for="contactFirstName">First Name</label>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('contactFirstName')">{{ validate('contactFirstName') }}</span>
      <input id="contactFirstName" name="contactFirstName" type="text" ng-model="formData.contactFirstName"></input>
    </div>
    <div class="dol-form-question-block" ng-class="validate('contactLastName') ? 'usa-input-error' : ''">
      <label for="contactLastName">Last Name</label>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('contactLastName')">{{ validate('contactLastName') }}</span>
      <input id="contactLastName" name="contactLastName" type="text" ng-model="formData.contactLastName"></input>
    </div> 
    <div class="dol-form-question-block" ng-class="validate('contactPhone') ? 'usa-input-error' : ''">
      <label for="contactPhone">Telephone Number</label>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('contactPhone')">{{ validate('contactPhone') }}</span>
      <input id="contactPhone" name="contactPhone" type="text" mask="999-999-9999" restrict="reject" ng-model="formData.contactPhone" class="dol-side-example phoneno" aria-describedby="exampleContactPhone"></input>
      <span id="exampleContactPhone" class="dol-example-text">Example: 123-456-7890</span>
    </div>

    <div class="dol-form-question-block" ng-class="validate('contactFax') ? 'usa-input-error' : ''">
      <label for="contactFax">Fax Number <span class="dol-example-text">(Optional)</span></label>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('contactFax')">{{ validate('contactFax') }}</span>
      <input id="contactFax" name="contactFax" type="text" mask="999-999-9999" restrict="reject" ng-model="formData.contactFax" class="dol-side-example phoneno" aria-describedby="exampleContactFax"></input>
      <span id="exampleContactFax" class="dol-example-text">Example: 123-456-7890</span>
    </div>

    <div class="dol-form-question-block" ng-class="validate('contactEmail') ? 'usa-input-error' : ''">
        <label for="contactEmail">Email Address</label>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('contactEmail')">{{ validate('contactEmail') }}</span>
        <input id="contactEmail" name="contactEmail" type="email" ng-model="formData.contactEmail" class="dol-side-example email" aria-describedby="exampleContactEmail"></input>
        <span id="exampleContactEmail" class="dol-example-text">Example: contact.name@company.com</span>
    </div>
  </fieldset>


</div>
