<div id="screen_4"
     class="col-lg-12"
     data-bind="visible: stage() == 4"
     style="height: 100%;">
    <div class="col-xs-11" style="height: 100%;">
        <div class="col-xs-12" style="height: 100%;"
             data-bind="visible: worker() != null, with: worker()">
            <div class="col-xs-12" style="font-size: 3vmin; padding-bottom: 5vh;">
                <strong data-bind="text: name"></strong>
                <strong style="padding-left: 2vw;" >(</strong>
                <strong class="text-muted"
                        data-bind="text: code"></strong>
                <strong>)</strong>
            </div>
            <!--<div class="col-xs-6"
                 style="height: 100%;"
                 data-bind="visible: loops().length > 0">
                <div style="font-size: 4vmin;
                                                    text-decoration: underline;">
                    <strong>Jobs to close</strong>
                </div>
                <div id="scrolled-area"
                     class="col-xs-12"
                     style="height: 90%;"
                     data-bind="foreach: loops">
                    <div class="col-xs-12 rounded-all"
                         style="margin-bottom: 0.2vh; width: 95%;
                                    border: #d43f3a 0.3vmin solid;">
                        <div style="width: 15%; height: 100%; float: left;"
                             data-bind="style:{backgroundColor: active() ? '' : '#eaeaea'}">
                            <div style="font-size: 2vmin;">
                                <strong data-bind="text: workorder"></strong>
                            </div>
                            <div style="font-size: 3vmin;">
                                <strong data-bind="text: as_no"></strong>
                            </div>
                        </div>
                        <div class="text-left"
                             style="width: 85%; height: 100%; float: left;
                                                            border-left: #d43f3a 0.3vmin solid; font-size: 2vmin;
                                                            padding-left: 0.5vw;"
                             data-bind="style:{backgroundColor: active() ? '' : '#eaeaea'}">
                            <div>
                                <strong class="text-muted">Started:</strong>
                                <strong data-bind="text: started"></strong>
                            </div>
                            <div>
                                <strong>Area:</strong>
                                <div class="text-muted"
                                     style="display: inline-block"
                                     data-bind="text: area"></div>
                            </div>
                            <div>
                                <strong>Work:</strong>
                                <div class="text-muted"
                                     style="display: inline-block"
                                     data-bind="text: work"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="col-xs-6"
                 style="height: 100%;"
                 data-bind="visible: loops2start().length > 0">
                <div style="font-size: 4vmin;
                                                    text-decoration: underline;">
                    <strong>Jobs to start</strong>
                </div>
                <div id="scrolled-area"
                     class="col-xs-12"
                     style="height: 90%;"
                     data-bind="foreach: loops2start">
                    <div class="col-xs-12 rounded-all"
                         style="margin-bottom: 0.2vh; width: 95%;
                                    border: #4cae4c 0.3vmin solid;">
                        <div style="width: 15%; height: 100%; float: left;"
                             data-bind="style:{backgroundColor: active() ? '' : '#eaeaea'}">
                            <div style="font-size: 2vmin;">
                                <strong data-bind="text: workorder"></strong>
                            </div>
                            <div style="font-size: 3vmin;">
                                <strong data-bind="text: as_no"></strong>
                            </div>
                        </div>
                        <div class="text-left"
                             style="width: 85%; height: 100%; float: left;
                                        border-left: #4cae4c 0.3vmin solid; font-size: 2vmin;
                                        padding-left: 0.5vw;"
                             data-bind="style:{backgroundColor: active() ? '' : '#eaeaea'}">
                            <div>
                                <strong class="text-muted">Started:</strong>
                                <strong>Now</strong>
                            </div>
                            <div>
                                <strong>Area:</strong>
                                <div class="text-muted"
                                     style="display: inline-block"
                                     data-bind="text: $root.areas_text()"></div>
                            </div>
                            <div>
                                <strong>Work:</strong>
                                <div class="text-muted"
                                     style="display: inline-block"
                                     data-bind="text: $root.works_text()"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6"
                 style="height: 100%;">
                <div style="font-size: 4vmin; text-decoration: underline;">
                    <strong>Date and time</strong>
                </div>
                <div class="col-lg-12 col-sm-12" style="font-size: 4vmin; padding-bottom: 2vh;">
                    <div class="col-lg-4 col-sm-4" style="text-align: right; margin-top: 5vh;">
                        <label for="input-date">Date:</label>
                    </div>
                    <div class="col-lg-8 col-sm-8" style="text-align: left;">
                        <input id="input-date" class="center-input"
                               style="font-size: 90px; width: 500px;"
                               data-bind="value: $root.date"
                               placeholder="Date"
                               data-date = ""
                               data-date-format="mm/dd/yyyy"
                               data-link-format="mm/dd/yyyy">
                    </div>
                </div>
                <div class="col-lg-12 col-sm-12" style="font-size: 4vmin; padding-bottom: 2vh;">
                    <div class="col-lg-4 col-sm-4" style="text-align: right; margin-top: 5vh;">
                        <label for="input-stime">Start Time:</label>
                    </div>
                    <div class="col-lg-8 col-sm-8" style="text-align: left;">
                        <input id="input-stime" class="center-input"
                               style="font-size: 90px; width: 500px;"
                               data-bind="value: $root.started"
                               placeholder="Start Time"
                               data-date=""
                               data-date-format="hh:ii"
                               data-link-format="hh:ii">
                    </div>
                </div>
                <div class="col-lg-12 col-sm-12" style="font-size: 4vmin; padding-bottom: 2vh;">
                    <div class="col-lg-4 col-sm-4" style="text-align: right; margin-top: 5vh;">
                        <label for="input-etime">End Time:</label>
                    </div>
                    <div class="col-lg-8 col-sm-8" style="text-align: left;">
                        <input id="input-etime" class="center-input"
                               style="font-size: 90px; width: 500px;"
                               data-bind="value: $root.finished"
                               placeholder="End Time"
                               data-date=""
                               data-date-format="hh:ii"
                               data-link-format="hh:ii">
                    </div>
                </div>
                <div class="col-lg-12 col-sm-12" style="font-size: 4vmin; padding-bottom: 2vh;">
                    <div class="col-lg-4 col-sm-4" style="text-align: right; margin-top: 5vh;">
                        <label for="text-rtime">Total Hours:</label>
                    </div>
                    <div class="col-lg-8 col-sm-8" style="text-align: left;">
                        <label id="text-rtime" data-bind="text: $root.hours()"
                               class="center-input"
                               style="font-size: 90px; width: 500px;"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1"
         style="position: relative; padding: 0 0.2%; height: 100%;">
        <div class="action-button full-width btn-success-touch rounded-all"
             data-bind="click: $root.date() != null && $root.started() != null && $root.finished() != null ? save_all : '',
             attr:{class: $root.date() != null && $root.started() != null && $root.finished() != null ?
                        'action-button full-width btn-success-touch rounded-all' :
                        'action-button full-width btn-disable-touch rounded-all'}">
            <span class="glyphicon glyphicon-play"></span>
            <div class="b-text">Save</div>
        </div>
        <div class="action-button full-width btn-danger-touch  rounded-all"
             data-bind="click: cancel_all">
            <span class="glyphicon glyphicon-remove"></span>
            <div class="b-text">Cancel</div>
        </div>
    </div>
</div>