<div id="screen_0"
     class="col-lg-12"
     data-bind="visible: stage() == 0"
     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-4" style="height: 100%;">
                <div class="col-xs-12"
                     style="height: 50%; display: table;">
                    <div style="height: 50%; display: table-cell; vertical-align: middle;">
                        <img class="img img-worker"
                             data-bind="attr:{src: picture != null ? picture :
                                                    '{{ asset('bundles/vgmwo/images/unknown-user.png') }}'}"/>
                    </div>
                </div>
                <div class="col-xs-12" style="display: table-cell">
                    <div class="col-xs-12 text-left"
                         style="font-size: 30px;"
                            {#data-bind="visible: worker() != null,
                                   with: worker"#}>
                        <strong>Nombre: </strong>
                        <p style="padding-left: 2vw;" data-bind="text: name"></p>

                        <strong>Department: </strong>
                        <p style="padding-left: 2vw;" data-bind="text: department"></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-8"
                 style="height: 100%; display: table"
                 data-bind="visible: loops().length == 0">
                <div style="height: 100%; display: table-cell;
                                                    vertical-align: middle;
                                                    text-align: center; font-size: 7vh;">
                    <strong>No active labors</strong>
                </div>
            </div>
            <div class="col-xs-8"
                 style="height: 100%;"
                 data-bind="visible: loops().length > 0">
                <div style="font-size: 4vmin;
                                                    text-decoration: underline;">
                    <strong>Current jobs</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: #ccc 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;
                                        font-size: 2vmin; padding-left: 0.5vw;
                                        border-left: #ccc 0.3vmin solid;"
                             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>

        <div class="col-xs-12" style="height: 100%;"
             data-bind="visible: worker() == null">
            <div class="col-lg-12" style="display: table; border-bottom: 0; height: 50%;">
                <div style="display: table-cell; vertical-align: middle;">
                    <p>
                        <strong class="sign">Enter your employee number!</strong>
                    </p>
                    <input id="worker_code_input" class="center-input"
                           data-bind="visible: worker() == null">
                </div>
            </div>
            <div class="col-lg-12"
                 style="height: 50%; display: table;"
                 data-bind="visible: worker() == null">
                <div style="display: table-cell;
                                                    text-align: center;
                                                    height: 100%;
                                                    width: 100%;
                                                    position: absolute;">
                    <div id="worker-virtual-Keyboard"
                         style="height: 100%; width: 50%;  display: inline-block;"></div>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="col-xs-5">
        <button class="btn btn-lg btn-success"
                data-bind="visible: worker() != null,
                    click: next_stage">
            OK <span class="glyphicon glyphicon-ok"></span>
        </button>
        <button class="btn btn-lg btn-danger"
                data-bind="visible: worker() != null,
                    click: clear_worker">
            Cancel
        </button>
    </div>-->
    <div class="col-xs-1"
         style="position: relative; padding: 0 0.2%; height: 100%;">
        <div data-bind="click: next_stage,
                                                attr:{class: worker() != null ?
                                                    'action-button full-width btn-success-touch rounded-all' :
                                                    'action-button full-width btn-disable-touch rounded-all'}">
            <span class="glyphicon glyphicon-ok"></span>
            <div class="b-text">Go</div>
        </div>
        <!--<div data-bind="attr:{class: workorder() != null ?
                            'action-button full-width btn-success-touch' :
                            'action-button full-width btn-disable-touch'},
                        click: workorder() != null ? workorder().add_me_to_list : null">
            <span class="glyphicon glyphicon-plus"></span>
            <div class="b-text">Add</div>
        </div>-->
        <div data-bind="click: worker() != null ? new_worker_search : null,
                                                attr:{class: worker() != null ?
                                                    'action-button full-width btn-info-touch  rounded-all' :
                                                    'action-button full-width btn-disable-touch rounded-all'}">
            <span class="glyphicon glyphicon-search"></span>
            <div class="b-text">New search</div>
        </div>
        <div data-bind="click: worker() != null ? save_all : null,
                                                attr:{class: worker() != null && worker().loops().length > 0 ?
                                                    'action-button full-width btn-warning-touch  rounded-all' :
                                                    'action-button full-width btn-disable-touch rounded-all'}">
            <span class="glyphicon glyphicon-stop"></span>
            <div class="b-text">Stop jobs</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>