<div class="modal fade bs-example-modal-lg"
     id="modal-task"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-bind="with: task_4_update">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Cancel</span>
                </button>
                <!-- ko if: own_id() == null-->
                    <h4 id="task-data-header"
                        class="modal-title">
                        Creating task
                    </h4>
                <!-- /ko -->
                <!-- ko if: own_id() != null-->
                    <div>
                        <!-- Created at date -->
                        <strong>Created at: </strong>
                        <span data-bind="text: created_at"></span>
                        <div class="vertical-divider"></div>
                        <!-- Created by -->
                        <strong>Created By: </strong>
                        <span data-bind="text: created_by() != null ? created_by().name : '- - -'"></span>
                        <div class="vertical-divider"></div>
                        <strong>Status: </strong>
                        <select class="form-control for-desktop"
                            style="display: inline-block; width: 90px;"
                            tabindex="7"
                            data-bind="options: $root.task_status,
                                       value: status">
                        </select>
                    </div>
                <!-- /ko -->
            </div>
            <div id="task-data-view" class="modal-body">
                <div id="task-data"
                     class="container-fluid"
                     style="padding: 0px;">
                    <div class="col-xs-6">
                        <!-- Task starts on -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Start date: </label>
                        <input id="start_date_picker"
                               name="start_date"
                               data-bind="value: start_date"
                               tabindex="1"
                               data-date = ""
                               data-date-format="mm/dd/yyyy"
                               data-link-field="start_date_picker"
                               data-link-format="mm/dd/yyyy"
                               class="form-control for-desktop datepicker"/>
                    </div>
                    <div class="col-xs-6">
                        <!-- Estimated time -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Estimated Time: </label>
                        <div class="input-group">
                            <div class="input-group-addon">hr</div>
                            <input type="text"
                                   class="form-control for-desktop"
                                   placeholder="Estimated Time"
                                   data-bind="value: etime"
                                   tabindex="10"/>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <!-- Due date -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Due date: </label>
                        <input id="end_date_picker"
                               name="end_date"
                               data-bind="value: death_line"
                               tabindex="2"
                               data-date = ""
                               data-date-format="mm/dd/yyyy"
                               data-link-field="end_date_picker"
                               data-link-format="mm/dd/yyyy"
                               class="form-control for-desktop datepicker"/>
                    </div>
                    <div class="col-xs-6">
                        <!-- Real time -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Real Time: </label>
                        <div class="input-group">
                            <div class="input-group-addon">hr</div>
                            <input type="text"
                                   class="form-control for-desktop"
                                   placeholder="Real Time"
                                   data-bind="value: rtime"
                                   tabindex="10"/>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <!-- Unit -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Entity: </label>
                        <select class="form-control for-desktop"
                                tabindex="7"
                                data-bind="options: $root.units,
                                           optionsText: 'name',
                                           value: unit">
                        </select>
                    </div>
                    <div class="col-xs-6">
                        <!-- Supevisor -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Supervisor:</label>
                        <select class="form-control for-desktop"
                                tabindex="7"
                                data-bind="options: $root.supervisors,
                                           optionsText: 'name',
                                           value: supervisor">
                        </select>
                    </div>
                    {#<div class="col-xs-4">
                        <!-- Ended at -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Ended at: </label>
                        <input id="end_date_picker"
                               name="end_date"
                               data-bind="value: ended"
                               tabindex="2"
                               data-date = ""
                               data-date-format="mm/dd/yyyy"
                               data-link-field="end_date_picker"
                               data-link-format="mm/dd/yyyy"
                               class="form-control for-desktop datepicker"/>
                    </div>#}
                    <div class="col-xs-4">
                        <!-- Area -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Area: </label>
                        <input type="text"
                               class="form-control for-desktop"
                               placeholder="Task"
                               data-bind="value: area"
                               tabindex="1"/>
                    </div>
                    <div class="col-xs-8">
                        <!-- Task -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Work: </label>
                        <input type="text"
                               class="form-control for-desktop"
                               placeholder="Work"
                               data-bind="value: description"
                               tabindex="1"/>
                    </div>
                    <div class="col-xs-12">
                        <label style="margin-bottom: 0px; margin-top: 0px;">Observations: </label>
                        <textarea class="form-control"
                                  data-bind="value: obs"
                                  tabindex="9"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- ko if: is_new() -->
                    <button id="stock-modal-cancel-button"
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal"
                            data-bind="click: create">
                        Add Task</button>
                    <button id="stock-modal-cancel-button"
                            type="button"
                            class="btn btn-warning"
                            data-dismiss="modal"
                            data-bind="click: delete_js">
                        Cancel</button>
                <!-- /ko -->
                <!-- ko if: !is_new() -->
                    <button id="stock-modal-cancel-button"
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal"
                            data-bind="click: update">
                        Ok</button>

                    <button id="stock-modal-cancel-button"
                            type="button"
                            class="btn btn-warning"
                            data-dismiss="modal"
                            data-bind="click: delete_js">
                        Delete</button>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>