<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover datatable" >
    <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Straße</th>
      <th>Postleitzahl</th>
      <th>Stadt</th>
      <th class="text-right">Stundensatz (€)</th>
      <th class="text-right">Stundenmax (h)</th>
      <th>Notiz</th>
    </tr>
    </thead>
    <tbody>
    <% for ( let ei = 0; ei < emps.length; ei++ )    {   %>
    <tr data-type="employee-row"
        data-employee-id="<%= emps[ ei ].id %>"
        id="employee-<%= emps[ ei ].id %>"
        class="clickable">
      <td><%= emps[ ei ].id %></td>
      <td><%= emps[ ei ].getName() %></td>
      <td><%= emps[ ei ].street ? emps[ ei ].street : '' %></td>
      <td><%= emps[ ei ].zip ? emps[ ei ].zip : '' %></td>
      <td><%= emps[ ei ].city ? emps[ ei ].city : '' %></td>
      <td class="text-right"><%= _nf( emps[ ei ].kk_hourlyRate ) %></td>
      <td class="text-right"><%= _nf( emps[ ei ].kk_hourMax ) %></td>
      <td class="special-notice-crop"
          data-notice-cell-id="employee-notice-<%= emps[ ei ].id %>"
          title="<%=emps[ ei ].kk_notice ? emps[ ei ].kk_notice : '' %>">
        <%= emps[ ei ].kk_notice %>
      </td>
    </tr>
    <% }    %>
    </tbody>
  </table>
</div>

<div class="modal inmodal fade"
     data-id="modal-kkspecial-edit-employee-attributes"
     tabindex="-1"
     role="dialog"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button"
                class="close"
                data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Mitarbeiter Daten</h4>
      </div>
      <div class="modal-body">
        <section data-id="section-attribute-form"
                 style="display: block">
          <form data-id="form-contract-master-data">
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                Mitarbeiter
              </label>
              <div class="col-sm-10" style="padding-top: 7px">
                <span data-id="user-address"></span>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                Stundensatz
              </label>
              <div class="col-sm-10">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-special-hourlyrate"
                         class="form-control"
                         value="0"/>
                  <div class="input-group-append">
                    <span class="input-group-addon">€</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                Monatsmax (h)
              </label>
              <div class="col-sm-10">
                <input type="number"
                       data-id="input-special-hourmax"
                       class="form-control"
                       value="0"/>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">
                Notiz
              </label>
              <div class="col-sm-10">
                <textarea data-id="input-special-notice"
                          class="form-control"></textarea>
              </div>
            </div>
          </form>
        </section>
        <section data-id="section-loader"
                 style="display: none">
          <div style="height: 200px; padding-top: 70px">
            <div class="sk-spinner sk-spinner-double-bounce">
              <div class="sk-double-bounce1"></div>
              <div class="sk-double-bounce2"></div>
            </div>
          </div>
        </section>
      </div>
      <div class="modal-footer">
        <button type="button"
                class="btn btn-white"
                data-dismiss="modal">Abbrechen</button>
        <button type="button"
                data-id="btnSaveEmployeeAttributes"
                class="btn btn-primary">Speichern</button>
      </div>
    </div>
  </div>
</div>