<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover datatable" >
    <thead>
    <tr>
      <th>Datum</th>
      <th>Veranstaltung</th>
      <th>Dauer (h)</th>
      <th>Mitarbeiter</th>
      <!--
      <th>Stundenmax (h)</th>
      -->
      <th>Stundenlohn (€)</th>
      <th>Brutto (h)</th>
      <th>Pausen (h)</th>
      <th>Netto (h)</th>
      <th>Lohn (€)</th>
      <th>Sonstiges (€)</th>
      <th>Total (€)</th>
      <th>Notiz</th>
    </tr>
    </thead>
    <tbody>
    <% for ( let i = 0; i < ws.length; i++ )    {   %>
    <tr data-type="workshift-row"
        data-appointment-id="<%= ws[ i ].appointment_id %>"
        data-employee-id="<%= ws[ i ].profile_id %>"
        id="ws-<%= ws[ i ].appointment_id %>-<%= ws[ i ].profile_id %>"
        class="clickable">
      <td data-sort="<%= ws[ i ].appointment_momentStart.format( 'YYYYMMDDhhmm' ) %>">
        <%= ws[ i ].appointment_momentStart.format( 'DD.MM.YYYY [-] hh:mm' ) %>
      </td>
      <td>
        <%= ws[ i ].appointment_subject %>
      </td>
      <td>
        <%= _nf( ws[ i ].appointment_duration, 2 ) %>
      </td>
      <td>
        <%= ws[ i ].member ? ws[ i ].member.getName( true ) : 'UNBEKANNT' %>
      </td>
      <!--
      <td>
        <%= ws[ i ].member ? ws[ i ].member.kk_hourMax : '---' %>
      </td>
      -->
      <td>
        <%= _nf( ws[ i ].hourly_rate, 2 ) %>
      </td>
      <td>
        <%= _nf( ws[ i ].gross_hour, 2 ) %>
      </td>
      <td>
        <%= _nf( ws[ i ].pause_hour, 2 ) %>
      </td>
      <td>
        <%= _nf( ws[ i ].net_hour,2 ) %>
      </td>
      <td>
        <%= ws[ i ].member ? _nf( ( ws[ i ].hourly_rate * ws[ i ].net_hour ),2 ) : '---' %>
      </td>
      <td>
        <%= _nf( ws[ i ].additional_pay, 2 ) %>
      </td>
      <td>
        <%= _nf( ( parseFloat( ws[ i ].hourly_rate ) * parseFloat( ws[ i ].net_hour ) ) + parseFloat( ws[ i ].additional_pay ) , 2 ) %>
      </td>
      <td data-notice-cell-id="ws-<%= ws[ i ].appointment_id %>-<%= ws[ i ].profile_id %>"
          class="special-notice-crop"
          title="<%= ws[ i ].notice ? ws[ i ].notice : '' %>">
        <%= ws[ i ].notice ? ws[ i ].notice : '---' %>
      </td>
    </tr>
    <% }    %>
    </tbody>
  </table>
</div>
<hr />
<div class="row">
  <div class="col">
    <small>Alle Stundenangaben mit Industrieminuten, Pausenregelung nach §5 ARBZG: Bis 6 Stunden keine Pause, 6 bis 9 Stunden mind. 30 Minuten Pause, mehr als 9 Stunden mind. 45 Minuten Pause</small>
  </div>
</div>


<div class="modal inmodal fade"
     data-id="modal-kkspecial-edit-workshift"
     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">Arbeitszeiten</h4>
      </div>
      <div class="modal-body">
        <section data-id="section-workshift-form"
                 style="display: block">
          <form data-id="form-contract-master-data">
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Veranstaltung
              </label>
              <div class="col-sm-9" style="padding-top: 7px">
                <span data-id="appointment-subject"></span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Mitarbeiter
              </label>
              <div class="col-sm-9" style="padding-top: 7px">
                <span data-id="user-address"></span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Notiz
              </label>
              <div class="col-sm-9" style="padding-top: 7px">
                <span data-id="user-notice"></span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Stundenmax
              </label>
              <div class="col-sm-9" style="padding-top: 7px">
                <span data-id="user-hour-max"></span>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Aktueller Stundenlohn
              </label>
              <div class="col-sm-9" style="padding-top: 7px">
                <span data-id="user-hourly-rate"></span>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Stundenlohn
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-hourly-rate"
                         class="form-control"
                         value="0"/>
                  <div class="input-group-append">
                    <span class="input-group-addon">h</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Brutto Stunden
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-gross-hour"
                         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-3 col-form-label">
                Pausenzeit
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-pause-hour"
                         class="form-control"
                         value="0"/>
                  <div class="input-group-append">
                    <span class="input-group-addon">h</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Netto Stunden
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-net-hour"
                         class="form-control"
                         disabled
                         value="0"/>
                  <div class="input-group-append">
                    <span class="input-group-addon">h</span>
                  </div>
              </div>
            </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">
                Lohn
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-wage"
                         class="form-control"
                         disabled
                         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-3 col-form-label">
                Sonst.Vergütung
              </label>
              <div class="col-sm-9">
                <div class="input-group m-b">
                  <input type="number"
                         data-id="input-workshift-additional-pay"
                         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-3 col-form-label">
                Notiz
              </label>
              <div class="col-sm-9">
                <textarea data-id="input-workshift-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="btnSaveWorkshift"
                class="btn btn-primary">Speichern</button>
      </div>
    </div>
  </div>
</div>