<div class="dol-form-section-title">
  <h2>Work Sites & Employees</h2>
  <div class="dol-form-section-help">
    <ul>
      <li><a role="button" id="workSitesAndEmployeesShowAllHelp" 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('__worksites')">
  <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">
  <div class="dol-form-question-block" ng-class="validate('totalNumWorkSites') ? 'usa-input-error' : ''">
    <div class="dol-form-question-help">
      <label for="numWorkSites" class="dol-form-question-text" id="numWorkSitesLabel">What is the total number of establishments and work sites to be covered by this certificate?</label>
      <helplink aria-controls="numWorkSitesHelp" aria-describedby="numWorkSitesLabel"></helplink>
    </div>
    <helptext category="workSitesAndEmployeesShowAllHelp" id="numWorkSitesHelp">
      <p>
        Count all work sites, including the main establishment and any branch establishments, off-site work locations, and/or SWEP work sites where the employer is seeking approval to employ workers at subminimum wages.
      </p>
      <p>
        Main Establishment: The primary location of the employer that files this application on behalf of all its associated work sites. (There can only be one main establishment.)
      </p>
      <p>
        Branch Establishments: A branch establishment is a physically separate work site that is part of the same organization as the main establishment.
      </p>
      <p>
        Off-Site Work Location: An off-site work location is a work site typically on the premises of a separate establishment, where workers with disabilities, or a group of workers with disabilities, are placed in work settings along with job coaches (staff of the rehabilitation or work center).
      </p>
    </helptext>
    <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('totalNumWorkSites')">{{ validate('totalNumWorkSites') }}</span>
    <input id="numWorkSites" name="numWorkSites" type="number" class="numeric7" min="0" step="any" ng-model="formData.totalNumWorkSites">
  </div>
  <div class="dol-form-question-block" ng-class="validate('workSites') ? 'usa-input-error' : ''">
    <div class="dol-form-question-text">We’ll need to collect information about each worksite and its employees.</div>
    <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="validate('workSites')">{{ validate('workSites') }}</span>
    <button ng-click="vm.addWorkSite()" ng-hide="vm.addingWorkSite">Add Work Site & Employee(s)</button>
  </div>
  <div id="worksite_tab_box" class="form-tabbed-section" ng-show="vm.notInitialApp() && vm.addingWorkSite">
    <a href class="form-tab {{ vm.activeTab === 1 ? 'active' : '' }}" ng-click="vm.setActiveTab(1)" aria-selected="{{ vm.activeTab === 1 ? 'true' : 'false' }}" ng-keyup="$event.keyCode === 13 ? vm.tabPanelFocus(1) : vm.setActiveTab(1)">
      <div class="circle">1</div> <span>Add</span> Work Site
    </a>
    <a href class="form-tab {{ vm.activeTab === 2 ? 'active' : '' }}" ng-click="vm.setActiveTab(2)" aria-selected="{{ vm.activeTab === 2 ? 'true' : 'false' }}" ng-keyup="$event.keyCode === 13 ? vm.tabPanelFocus(2) : vm.setActiveTab(2)">
      <div class="circle">2</div> <span>Add</span> Employees
    </a>
  </div>
  <!-- Tab 1 (Add Work Site) -->
  <div class="form-spaced-div" ng-show="vm.addingWorkSite && vm.activeTab === 1">
    <!-- ID for tab panel focus -->
    <p id="worksitesTabPanel" tabindex="-1">First, we’ll collect information about the Establishment / Work Site.</p>

    <div class="dol-form-question-block" ng-class="vm.validateActiveWorksiteProperty('type') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs usa-sans">
        <legend class="dol-form-question-text">What type of establishment / work site is this?</legend>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('workSiteTypeId')">{{ vm.validateActiveWorksiteProperty('workSiteTypeId') }}</span>
          <ul class="usa-unstyled-list dol-list-help">
            <li ng-repeat="response in responses.WorkSiteType">
              <input id="establishmentType_{{ response.id }}" type="radio" name="establishmentType_{{ response.id }}" ng-value="{{ response.id }}" ng-model="vm.activeWorksite.workSiteTypeId">
              <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="workSitesAndEmployeesShowAllHelp" id="establishmentType_{{ response.id }}Help">
                  {{ response.subDisplay }}
              </helptext>
            </li>
          </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" ng-class="vm.validateActiveWorksiteProperty('name') ? 'usa-input-error' : ''">
      <div class="dol-form-question-text">Name of Establishment / Work Site</div>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('name')">{{ vm.validateActiveWorksiteProperty('name') }}</span>
      <label for="worksiteName" class="hide">Name of Establishment / Work Site</label>
      <input id="worksiteName" name="worksiteName" type="text" ng-model="vm.activeWorksite.name">
    </div>

    <div class="dol-form-question-block">
      <fieldset>
        <legend class="dol-form-question-text no-margin">Address of Establishment / Work Site</legend>
        <div class="usa-form-large">
            <div ng-class="vm.validateActiveWorksiteProperty('address.streetAddress') ? 'usa-input-error' : ''">
              <label for="worksiteAddress1">Street address</label>
              <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('address.streetAddress')">{{ vm.validateActiveWorksiteProperty('address.streetAddress') }}</span>
              <input id="worksiteAddress1" name="worksiteAddress1" type="text" ng-model="vm.activeWorksite.address.streetAddress">
            </div>
            <div class="clearer" ng-class="vm.validateActiveWorksiteProperty('address.city') || vm.validateActiveWorksiteProperty('address.state') ? 'usa-input-error' : ''">
              <div class="usa-input-grid usa-input-grid-medium">
                <label for="workAddressCity">City</label>
                <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('address.city')">{{ vm.validateActiveWorksiteProperty('address.city') }}</span>
                <input id="workAddressCity" name="workAddressCity" type="text" ng-model="vm.activeWorksite.address.city">
              </div>

              <div class="usa-input-grid usa-input-grid-small">
                <label for="workAddressState">State</label>
                <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('address.state')">{{ vm.validateActiveWorksiteProperty('address.state') }}</span>
                <state-field name="workAddressState" selected-state="vm.activeWorksite.address.state"></state-field>
              </div>
            </div>
            <div ng-class="vm.validateActiveWorksiteProperty('address.zipCode') ? 'usa-input-error' : ''">
              <label for="workAddressZip">Zip Code</label>
              <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('address.zipCode')">{{ vm.validateActiveWorksiteProperty('address.zipCode') }}</span>
              <input class="usa-input-medium" id="workAddressZip" name="workAddressZip" type="text" mask="99999" pattern="[\d]{5}" data-grouplength="5" data-delimiter="" data-politespace ng-model="vm.activeWorksite.address.zipCode">
            </div>
        </div>
      </fieldset>
    </div>

    <div class="dol-form-question-block" class="form-question-block" ng-class="vm.validateActiveWorksiteProperty('sca') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs usa-sans">
        <legend class="dol-form-question-text">Is Service Contract Act (SCA)-covered work performed at this establishment / work site?</legend>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('sca')">{{ vm.validateActiveWorksiteProperty('sca') }}</span>
        <ul class="usa-unstyled-list">
          <li>
            <input id="worksiteScaYes" type="radio" name="worksiteSca" ng-value="true" ng-model="vm.activeWorksite.sca">
            <label for="worksiteScaYes">Yes</label>
          </li>
          <li>
            <input id="worksiteScaNo" type="radio" name="worksiteSca" ng-value="false" ng-model="vm.activeWorksite.sca">
            <label for="worksiteScaNo">No</label>
          </li>
        </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" class="form-question-block" ng-class="vm.validateActiveWorksiteProperty('federalContractWorkPerformed') ? 'usa-input-error' : ''">
      <fieldset class="usa-fieldset-inputs usa-sans">
        <legend class="dol-form-question-text"><span id="worksiteFederalLabel">Is work performed at this establishment / work site pursuant to a Federal contract for services or concessions that was entered into on or after January 1, 2015, and may be subject to Executive Order 13658 (Establishing a Minimum Wage for Contractors)?</span></legend>
        <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('federalContractWorkPerformed')">{{ vm.validateActiveWorksiteProperty('federalContractWorkPerformed') }}</span>
        <ul class="usa-unstyled-list">
          <li>
            <input id="worksiteFederalYes" type="radio" name="worksiteFederal" ng-value="true" ng-model="vm.activeWorksite.federalContractWorkPerformed">
            <label for="worksiteFederalYes">Yes</label>
          </li>
          <li>
            <input id="worksiteFederalNo" type="radio" name="worksiteFederal" ng-value="false" ng-model="vm.activeWorksite.federalContractWorkPerformed">
            <label for="worksiteFederalNo">No</label>
          </li>
        </ul>
      </fieldset>
    </div>

    <div class="dol-form-question-block" class="form-question-block" ng-class="vm.validateActiveWorksiteProperty('numEmployees') ? 'usa-input-error' : ''" ng-show="vm.notInitialApp()">
      <div class="dol-form-question-help">
        <label for="worksiteNumEmployees" class="dol-form-question-text" id="worksiteNumEmployeesLabel">Total number of employees who were employed at this establishment/work site at any time during the most recently completed fiscal quarter and received subminimum wages:</label>
        <helplink aria-controls="worksiteNumEmployeesHelp" aria-describedby="worksiteNumEmployeesLabel"></helplink>
      </div>
      <helptext category="workSitesAndEmployeesShowAllHelp" id="worksiteNumEmployeesHelp">Include workers who were employed for less than the full fiscal quarter, <em>i.e.</em> three-month period.</helptext>
      <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('numEmployees')">{{ vm.validateActiveWorksiteProperty('numEmployees') }}</span>
      <input id="worksiteNumEmployees" name="worksiteNumEmployees" type="number" class="numeric7" min="0" step="any" ng-model="vm.activeWorksite.numEmployees">
    </div>
  </div>
  <!-- Tab 2 (Add Employees) -->
  <div class="form-spaced-div" ng-show="vm.notInitialApp() && vm.addingWorkSite && vm.activeTab === 2">
    <!-- ID for tab panel focus. -->
    <div class="dol-worksite-title" id="employeesTabPanel" tabindex="-1">
      <h3 ng-if="!!vm.activeWorksite.name">{{ vm.activeWorksite.name }}</h3>
      <h4>Number of Employees: <strong>{{ vm.activeWorksite.employees.length  ? vm.activeWorksite.employees.length : 0 }}</strong></h4>
    </div>
    <div class="dol-worksite-employee-help">
      <div class="dol-left-column">
        <p>
          Information is needed about each specific worker who was employed at this work site at any time during the most recently completed fiscal quarter and received subminimum wages.
        </p>
        <p>
          <a href="" ng-click="vm.showEmployeeInfoHelp = !vm.showEmployeeInfoHelp" aria-controls="helpEmployeeInfo" aria-expanded="{{ vm.showEmployeeInfoHelp ? 'true' : 'false' }}">
              Click here for detailed instructions on the required work information.
          </a>
        </p>
      </div>
      <div class="dol-help-callout">
        Need Help? Email us: <a href="mailto:help-14c@dol.gov">help-14c@dol.gov</a>
      </div>
    </div>
    <div id="helpEmployeeInfo" class="dol-help-employee-info" ng-show="vm.showEmployeeInfoHelp">
      <dl>
        <div>
          <dt>Name of worker</dt>
          <dd>Provide the full name of the worker.</dd>
        </div>
        <div>
          <dt>Type of work performed (for employees working more than one job, use job employee worked most hours at subminimum wage)</dt>
          <dd>
            <p>Describe the type of work performed by this worker in the job for which the worker worked the most number of hours at a subminimum wage rate. Examples may include: sewing, janitorial, box assembly, laundry, etc.</p>
            <p>If the worker performed more than one job at this work site at a subminimum wage, provide the following information for the job for which this worker worked the most number of hours in the most recently completed fiscal quarter.</p>
            <p>For example, John Jones performed three jobs over the last quarter: contract for assembling bolts totaling 65 hours, contract for assembling boxes totaling 42 hours, and contract for shredding totaling 25 hours. The employer should provide responses based on Mr. Jones’ bolt assembly job.</p>
          </dd>
        </div>
        <div>
          <dt>Primary disability that affects productivity for job described above</dt>
          <dd>Identify the primary disability that affects the worker’s productivity for the job identified using the categories provided.</dd>
        </div>
        <div>
          <dt>How many jobs did this worker perform at this work site?</dt>
          <dd>If the worker performed more than one job at this work site during the most recently completed fiscal quarter, provide the total number of jobs performed.</dd>
        </div>
        <div>
          <dt>Average # of hours worked per week on all jobs at this work site</dt>
          <dd>
            Provide the average (mean) number of hours per week the employee worked on all jobs at this work site during the most recently completed fiscal quarter. Calculate this by taking the total number of hours the employee worked during the most recently completed three-month fiscal quarter and dividing by the number of weeks in the quarter (13 weeks). For example: 260 hours worked in the quarter ÷ 13 weeks per quarter = 20 hours per week average.
          </dd>
        </div>
        <div>
          <dt>Average earnings per hour for all jobs at this work site</dt>
          <dd>
            Average earnings are computed by dividing the total earnings of the individual worker by the total number of hours worked during the most recently completed fiscal quarter. Note: The total number of hours worked should only include the compensable work time (for example, generally would not include time spent in rehabilitation, therapy, etc.). For example, John Jones earned $900 during the fiscal quarter and he worked 300 hours. $900 ÷ 300 hours = $3.00 per hour, therefore, Mr. Jones’s average earnings per hour are $3.00.
          </dd>
        </div>
        <div>
          <dt>Prevailing wage rate for job described above</dt>
          <dd>Provide the prevailing wage rate for the job identified.</dd>
        </div>
        <div>
          <dt>Productivity measure/rating for job described above</dt>
          <dd>
            Provide the employee’s most recent productivity rating for the job identified. For work paid hourly, the productivity rating is the employee’s productivity in proportion to the standard-setter’s that was determined by the employee’s time study. For piece rate work, no calculation is required, select “n/a – piece rate”.
          </dd>
        </div>
        <div>
          <dt>Commensurate wage rate/average earnings per hour for job described above</dt>
          <dd>
            For work paid hourly, provide the employee’s commensurate wage rate per hour for the job identified. This should be the wage rate actually paid to the worker for this job. For piece rate work, provide the employee’s average earnings per hour for the job identified.
          </dd>
        </div>
        <div>
          <dt>Total hours worked for job described above</dt>
          <dd>Provide the employee’s total hours worked on the job identified over the most recently completed fiscal quarter.</dd>
        </div>
        <div>
          <dt>Does worker perform work for this employer at any other work site?</dt>
          <dd>Answer “yes” if the employee also performed work at another work site included with this application. The worker should be listed at each work site where they performed subminimum wage work.</dd>
        </div>
      </dl>
    </div>
    <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorksiteProperty('employee_count')">{{ vm.validateActiveWorksiteProperty('employee_count') }}</span>
    <button ng-click="vm.addingEmployee = true" class="cd-panel-trigger" aria-controls="addEmployeesSlidePanel">Add Employee</button>
    <a href="" class="cd-panel-trigger" aria-controls="addEmployeeExampleSlidePanel">Show Me an Example</a>
  </div>
  <div ng-show="vm.activeWorksite.employees.length" class="dol-form-question-group">
    <div ng-class="vm.validateActiveWorksiteProperty('employee_count') ? 'usa-input-error' : ''">
      <div  class="container dol-employees-data-container">
        <results-table id="Employee" results="vm.activeWorksite.employees" definitions="vm.employeeColumnDefs" columns="vm.employeeColumns" edit="vm.editEmployee" delete="vm.deleteEmployee" ></results-table>
      </div>
    </div>
  </div>
  <div class="dol-form-question-group">
    <div class="container dol-employees-data-container">
      <div ng-show="!vm.addingWorkSite && formData.workSites.length">
        <results-table id="WorkSite" results="formData.workSites" definitions="vm.workSiteColumnDefs" columns="vm.workSiteColumns" edit="vm.editWorkSite" delete="vm.deleteWorkSite"></results-table>
      </div>
    </div>
  </div>
  <div class="cd-panel from-right employee" id="addEmployeesSlidePanel">
    <div class="cd-panel-container">
      <div class="cd-panel-content">
        <header class="cd-panel-header">
          <a href="#0" ng-click="vm.clearActiveWorker()" class="cd-panel-close dol-close-button dol-first-focus">Close<span class="hide"></span> the Add Employee Panel</span></a>
          <div ng-show="vm.saveEmployee.status" class="dol-feedback-success">
            <p class="dol-feedback-message">
              <strong>Saved Employee:</strong> {{vm.saveEmployee.name}}
            </p>
          </div>
          <h3 tabindex="-1" id="addEmployeesHeader">Add New Employee</h3>
        </header>
        <div class="dol-form-section-help">
          <ul>
            <li><a role="button" id="addEmployeeShowAllHelp" 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 class="dol-form-question-block" ng-class="vm.validateActiveWorkerProperty('name') ? 'usa-input-error' : ''">
          <div class="dol-plain-label-help">
            <label for="workerName" id="workerNameLabel">Name of Worker</label>
            <helplink aria-controls="workerNameHelp" aria-describedby="workerNameLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerNameHelp">Provide the full name of the worker.</helptext>
          <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('name')">{{ vm.validateActiveWorkerProperty('name') }}</span>
          <input id="workerName" name="workerName" type="text" ng-model="vm.activeWorker.name">
        </div>

        <div class="dol-form-question-block" ng-class="vm.validateActiveWorkerProperty('workType') ? 'usa-input-error' : ''">
          <div class="dol-plain-label-help">
            <label for="workType" id="workTypeLabel">Type of work performed (for employees working more than one job, use job employee worked most hours at subminimum wage)</label>
            <helplink aria-controls="workTypeHelp" aria-describedby="workTypeLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workTypeHelp">
              <p>Describe the type of work performed by this worker in the job for which the worker worked the most number of hours at a subminimum wage rate. Examples may include: sewing, janitorial, box assembly, laundry, etc.</p>
              <p>If the worker performed more than one job at this work site at a subminimum wage, provide the following information for the job for which this worker worked the most number of hours in the most recently completed fiscal quarter.</p>
              <p>For example, John Jones performed three jobs over the last quarter: contract for assembling bolts totaling 65 hours, contract for assembling boxes totaling 42 hours, and contract for shredding totaling 25 hours. The employer should provide responses based on Mr. Jones’ bolt assembly job.</p>
          </helptext>
          <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('workType')">{{ vm.validateActiveWorkerProperty('workType') }}</span>
          <input id="workType" name="workType" type="text" ng-model="vm.activeWorker.workType">
        </div>

        <div class="dol-form-question-block" ng-class="vm.validateActiveWorkerProperty('primaryDisabilityId') ? 'usa-input-error' : ''">
          <fieldset class="dol-legend-plain usa-fieldset-inputs usa-sans">
            <legend class="hide"><span id="primaryDisabilityLabel">Primary disability that affects productivity for job described above. Pick only one.</span></legend>
            <div class="dol-legend-help">
              <span aria-hidden="true">Primary disability that affects productivity for job described above. Pick only one.</span>
              <helplink aria-controls="primaryDisabilityHelp" aria-describedby="primaryDisabilityLabel"></helplink>
            </div>
            <helptext category="addEmployeeShowAllHelp" id="primaryDisabilityHelp">
                Identify the primary disability that affects the worker’s productivity for the job identified using the categories provided.
            </helptext>
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('primaryDisabilityId')">{{ vm.validateActiveWorkerProperty('primaryDisabilityId') }}</span>
            <ul class="usa-unstyled-list">
              <li ng-repeat="response in responses.PrimaryDisability">
                <input id="primaryDisability_{{ response.id }}" type="radio" name="primaryDisability" ng-value="{{ response.id }}" ng-model="vm.activeWorker.primaryDisabilityId">
                <label for="primaryDisability_{{ response.id }}">{{ response.display }}</label>
                <label for="primaryDisabilityOther" class="hide">Primary disability (other)</label>
                <input id="primaryDisabilityOther" name="primaryDisabilityOther" type="text" ng-model="vm.activeWorker[response.otherValueKey]" ng-if="response.otherValueKey">
              </li>
            </ul>
          </fieldset>
        </div>

        <fieldset class="dol-form-question-block">

          <div class="dol-plain-label-help">
            <label for="workerNumJobs" id="workerNumJobsLabel">How many jobs did this worker perform at this work site?</label>
            <helplink aria-controls="workerNumJobsHelp" aria-describedby="workerNumJobsLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerNumJobsHelp">
              If the worker performed more than one job at this work site during the most recently completed fiscal quarter, provide the total number of jobs performed.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('numJobs') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('numJobs')">{{ vm.validateActiveWorkerProperty('numJobs') }}</span>
            <input id="workerNumJobs" name="workerNumJobs" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.numJobs">
          </div>

          <div class="dol-plain-label-help">
            <label for="workerAvgHours" id="workerAvgHoursLabel">Average # of hours worked per week on all jobs at this work site</label>
            <helplink aria-controls="workerAvgHoursHelp" aria-describedby="workerAvgHoursLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerAvgHoursHelp">
              Provide the average (mean) number of hours per week the employee worked on all jobs at this work site during the most recently completed fiscal quarter. Calculate this by taking the total number of hours the employee worked during the most recently completed three-month fiscal quarter and dividing by the number of weeks in the quarter (13 weeks). For example: 260 hours worked in the quarter ~ 13 weeks per quarter =20 hours per week average.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('avgWeeklyHours') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('avgWeeklyHours')">{{ vm.validateActiveWorkerProperty('avgWeeklyHours') }}</span>
            <input id="workerAvgHours" name="workerAvgHours" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.avgWeeklyHours">
          </div>

          <div class="dol-plain-label-help">
            <label for="workerAvgEarnings" id="workerAvgEarningsLabel">Average earnings per hour for all jobs at this work site</label>
            <helplink aria-controls="workerAvgEarningsHelp" aria-describedby="workerAvgEarningsLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerAvgEarningsHelp">
              Average earnings are computed by dividing the total earnings of the individual worker by the total number of hours worked during the most recently completed fiscal quarter. Note: The total number of hours worked should only include the compensable work time (for example, generally would not include time spent in rehabilitation, therapy, etc.). For example, John Jones earned $900 during the fiscal quarter and he worked 300 hours. $900 ÷ 300 hours = $3.00 per hour, therefore, Mr. Jones’s average earnings per hour are $3.00.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('avgHourlyEarnings') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('avgHourlyEarnings')">{{ vm.validateActiveWorkerProperty('avgHourlyEarnings') }}</span>
            <span class="wage-label">$</span><input id="workerAvgEarnings" name="workerAvgEarnings" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.avgHourlyEarnings">
          </div>

          <div class="dol-plain-label-help">
            <label for="workerWage" id="workerWageLabel">Prevailing wage rate for job described above</label>
            <helplink aria-controls="workerWageHelp" aria-describedby="workerWageLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerWageHelp">
              Provide the prevailing wage rate for the job identified.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('prevailingWage') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('prevailingWage')">{{ vm.validateActiveWorkerProperty('prevailingWage') }}</span>
            <span class="wage-label">$</span><input id="workerWage" name="workerWage" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.prevailingWage">
          </div>

          <fieldset class="dol-legend-plain usa-fieldset-inputs usa-sans">
            <legend class="hide"><span id="workerProductivityLabel">Productivity measure/rating for job described above</span></legend>
            <div class="dol-legend-help">
              <span aria-hidden="true">Productivity measure/rating for job described above</span>
              <helplink aria-controls="workerProductivityHelp" aria-describedby="workerProductivityLabel"></helplink>
            </div>
            <helptext category="addEmployeeShowAllHelp" id="workerProductivityHelp">
                Provide the employee’s most recent productivity rating for the job identified. For work paid hourly, the productivity rating is the employee’s productivity in proportion to the standard-setter’s that was determined by the employee’s time study. For piece rate work, no calculation is required, select “n/a – piece rate”.
            </helptext>
            <div ng-class="vm.validateActiveWorkerProperty('productivityMeasure') ? 'usa-input-error' : ''">
              <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('productivityMeasure')">{{ vm.validateActiveWorkerProperty('productivityMeasure') }}</span>
              <ul class="usa-unstyled-list">
                <li>
                  <input id="workerProductivityNA" type="radio" name="workerProductivityToggle" ng-value="undefined" ng-model="vm.activeWorker.hasProductivityMeasure" ng-change="vm.workerProductivityChanged()">
                  <label for="workerProductivityNA">n/a - piece rate</label>
                </li>
                <li>
                  <input id="workerProductivityStudy" type="radio" name="workerProductivityToggle" ng-value="true" ng-model="vm.activeWorker.hasProductivityMeasure" ng-change="vm.workerProductivityChanged()">
                  <label for="workerProductivityStudy">hourly,</label>
                </li>
              </ul>
              <label for="workerProductivity" class="hide">Hourly measure/rating</label>
              <input id="workerProductivity" name="workerProductivity" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.productivityMeasure" ng-disabled="!vm.activeWorker.hasProductivityMeasure">
            </div>
          </fieldset>

          <div class="dol-plain-label-help">
            <label for="workerWageRate" id="workerWageRateLabel">Commensurate wage rate/average earnings per hour for job described above</label>
            <helplink aria-controls="workerWageRateHelp" aria-describedby="workerWageRateLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerWageRateHelp">
              For work paid hourly, provide the employee’s commensurate wage rate per hour for the job identified. This should be the wage rate actually paid to the worker for this job. For piece rate work, provide the employee’s average earnings per hour for the job identified.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('commensurateWageRate') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('commensurateWageRate')">{{ vm.validateActiveWorkerProperty('commensurateWageRate') }}</span>
            <span class="wage-label">$</span><input id="workerWageRate" name="workerWageRate" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.commensurateWageRate">
          </div>

          <div class="dol-plain-label-help">
            <label for="workerHours" id="workerHoursLabel">Total hours worked for job described above</label>
            <helplink aria-controls="workerHoursHelp" aria-describedby="workerHoursLabel"></helplink>
          </div>
          <helptext category="addEmployeeShowAllHelp" id="workerHoursHelp">
              Provide the employee’s total hours worked on the job identified over the most recently completed fiscal quarter.
          </helptext>
          <div ng-class="vm.validateActiveWorkerProperty('totalHours') ? 'usa-input-error' : ''">
            <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('totalHours')">{{ vm.validateActiveWorkerProperty('totalHours') }}</span>
            <input id="workerHours" name="workerHours" type="number" class="wage-rate" min="0" step="any" ng-model="vm.activeWorker.totalHours">
          </div>

          <fieldset class="dol-legend-plain usa-fieldset-inputs usa-sans">
            <legend class="hide"><span id="workerOtherSiteLabel">Does worker perform work for this employer at any other work site?</span></legend>
            <div class="dol-legend-help">
              <span aria-hidden="true">Does worker perform work for this employer at any other work site?</span>
              <helplink aria-controls="workerOtherSiteHelp" aria-describedby="workerOtherSiteLabel"></helplink>
            </div>
            <helptext category="addEmployeeShowAllHelp" id="workerOtherSiteHelp">
                Answer “yes” if the employee also performed work at another work site included with this application. The worker should be listed at each work site where they performed subminimum wage work.
            </helptext>
            <div ng-class="vm.validateActiveWorkerProperty('workAtOtherSite') ? 'usa-input-error' : ''">
              <span class="usa-input-error-message" role="alert" tabindex="0" ng-show="vm.validateActiveWorkerProperty('workAtOtherSite')">{{ vm.validateActiveWorkerProperty('workAtOtherSite') }}</span>
              <ul class="usa-unstyled-list">
                <li>
                  <input id="workerOtherSiteYes" type="radio" name="workerOtherSite" ng-value="true" ng-model="vm.activeWorker.workAtOtherSite">
                  <label for="workerOtherSiteYes">Yes</label>
                </li>
                <li>
                  <input id="workerOtherSiteNo" type="radio" name="workerOtherSite" ng-value="false" ng-model="vm.activeWorker.workAtOtherSite">
                  <label for="workerOtherSiteNo">No</label>
                </li>
              </ul>
            </div>
          </fieldset>

        </fieldset>

        <div class="clearer dol-add-employee-footer">
          <button class="no-margin" ng-show="vm.activeWorkerIndex < 0" ng-click="vm.addAnotherEmployee()">Add Another Employee</button><a ng-hide="vm.activeWorkerIndex >=0" role="button" href ng-click="vm.cancelAndClosePanel($event)" class="pull-right">Cancel & Close Panel</a>
          <hr>
          <button class="green-button dol-last-focus no-margin" ng-click="vm.doneAddingEmployees($event)">Done {{ vm.activeWorkerIndex >= 0 ? 'Editing Employee' : 'Adding Employee(s)' }}</button>
        </div>

      </div> <!-- cd-panel-content -->
    </div> <!-- cd-panel-container -->
  </div> <!-- end addEmployeesSlidePanel -->
  <div class="cd-panel from-right" id="addEmployeeExampleSlidePanel">
      <div class="cd-panel-container">
          <div class="cd-panel-content" ng-init="dataExample">
            <header class="cd-panel-header">

              <a href="#0" class="cd-panel-close dol-close-button dol-first-focus">Close Example</a>
              <h3 tabindex="-1" id="addEmployeeExampleHeader">Add New Employee</h3>
            </header>
            <div class="dol-simple-link-tabs">
                <a href ng-class="vm.exampleView === '1' ? 'active' : ''" ng-click="vm.showExampleView('1')" aria-selected="{{ vm.exampleView === '1' ? 'true' : 'false' }}">
                  <span class="hide">Add Employee Form Data - </span>Example One<span class="hide">: John Jones</span>
                </a>
                <a href ng-class="vm.exampleView === '2' ? 'active' : ''" ng-click="vm.showExampleView('2')" aria-selected="{{ vm.exampleView === '2' ? 'true' : 'false' }}">
                  <span class="hide">Add Employee Form Data - </span>Example Two<span class="hide">: Sue Gomez</span>
                </a>
            </div>
            <dl class="dol-employee-example-data">
              <dt id="exampleFirstFocus" tabindex="-1">
                  Name of worker
              </dt>
              <dd>
                <span ng-show="vm.exampleView === '1'">John Jones</span>
                <span ng-show="vm.exampleView === '2'">Sue Gomez</span>
              </dd>
              <dt>
                  Type of work performed (for employees working more than one job, use job employee worked most hours at subminimum wage)
              </dt>
              <dd>
                <span ng-show="vm.exampleView === '1'">Bolt hand assembly</span>
                <span ng-show="vm.exampleView === '2'">SCA laundry contract</span>
              </dd>
              <dt>
                  Primary disability that affects productivity for job described above. Pick only one.
              </dt>
              <dd>
                <span ng-show="vm.exampleView === '1'">Neuromuscular Disability (NM)</span>
                <span ng-show="vm.exampleView === '2'">Intellectual/Developmental Disability (IDD)</span>
              </dd>
            </dl>
            <dl class="dol-employee-example-data">
                <dt>
                    How many jobs did this worker perform at this work site?
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">3</span>
                  <span ng-show="vm.exampleView === '2'">1</span>
                </dd>
                <dt>
                    Average # of hours worked per week on all jobs at this work site
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">10.15</span>
                  <span ng-show="vm.exampleView === '2'">22</span>
                </dd>
                <dt>
                    Average earnings per hour for all jobs at this work site
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">$3.00</span>
                  <span ng-show="vm.exampleView === '2'">$10.65</span>
                </dd>
                <dt>
                    Prevailing wage rate for job described above
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">$10.15</span>
                  <span ng-show="vm.exampleView === '2'">$16.42</span>
                </dd>
                <dt>
                    Productivity measure/rating for job described above
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">n/a - Piece Rate</span>
                  <span ng-show="vm.exampleView === '2'">64.80%</span>
                </dd>
                <dt>
                    Commensurate wage rate/average earings per hour for job described above
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">$3.38</span>
                  <span ng-show="vm.exampleView === '2'">$10.65</span>
                </dd>
                <dt>
                    Total hours worked for job described above
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">65</span>
                  <span ng-show="vm.exampleView === '2'">22</span>
                </dd>
                <dt>
                    Does worker perform work for this employer at any other work site?
                </dt>
                <dd>
                  <span ng-show="vm.exampleView === '1'">No</span>
                  <span ng-show="vm.exampleView === '2'">Yes</span>
                </dd>
              </dl>

              <button class="cd-panel-close dol-last-focus">Close Example</button>
          </div>
      </div>
  </div> <!-- end addEmployeeExampleSlidePanel -->
</div>
