<div class="modal fade bs-example-modal-lg"
     id="task-updater"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     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">Cancel</span>
                </button>
                <h4 id="stock-data-header"
                    class="modal-title"
                    data-bind="text: task_updater_title"></h4>
            </div>
            <div id="stockModalPreView" class="modal-body">
                <div id="task-data"
                     class="container-fluid"
                     style="padding: 0px;"
                     data-bind="with: task_4_updater">
                    <div class="col-md-6">
                        <!-- Task starts on -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Starts on: </label>
                        <input id="start_date_picker"
                               name="start_date"
                               data-bind="value: starts"
                               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"/>
                        <!-- Task ends on -->
                        <label style="margin-bottom: 0px; margin-top: 10px;">Ends on: </label>
                        <input id="end_date_picker"
                               name="end_date"
                               data-bind="value: ends"
                               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-md-6">
                        <div class="col-md-12">
                            <label id="description_label"
                               style="margin-bottom: 0px; margin-top: 10px; ">Work orders: </label>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group">
                                <div class="input-group-addon" style="cursor: pointer;"
                                     data-bind="click: add_workorder">
                                    <a style="color: #428bca; font-size: 1.6vmin;">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </a>
                                </div>
                                <input type="number"
                                       class="form-control for-desktop"
                                       id="new_workorder_input"
                                       placeholder="----"
                                       data-bind="value: new_workorder"
                                       tabindex="3"/>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="input-group">
                                <div class="input-group-addon" style="cursor: pointer;"
                                     data-bind="click: add_workorder">
                                    <a style="color: #428bca; font-size: 1.6vmin;">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </a>
                                </div>
                                <select class="form-control for-desktop select-toggle"
                                        tabindex="13"
                                        multiple="true"
                                        data-bind="options: workorders,
                                               selectedOptions: selected_workorders">

                                </select>
                            </div>


                            {#<textarea id="description_input"
                                      class="form-control"
                                      rows="3"
                                      disabled
                                      data-bind="value: show_workorders()"
                                      placeholder="Work Orders"></textarea>#}
                        </div>
                    </div>
                    <!-- Task status -->
                    {#<div class="col-md-3">
                        <label id="status_label"
                               style="margin-bottom: 0px;  margin-top: 10px;">Status: </label>
                        <input type="text" class="form-control for-desktop"
                               id="status_input"
                               placeholder="Status"
                               data-bind="value: status"
                               tabindex="4"/>
                    </div>#}
                    <!-- Task -->
                    <div class="col-md-12">
                        <label id="task_label"
                               style="margin-bottom: 0px; margin-top: 10px; ">*Task: </label>
                               <input type="text" class="form-control for-desktop"
                               id="task_input"
                               placeholder="Task"
                               data-bind="value: description1"
                               tabindex="1"/>
                    </div>
                    <!-- Task Full Description-->
                    <div class="col-md-12">
                        <label id="description_label"
                               style="margin-bottom: 0px; margin-top: 10px; ">Description: </label>
                        <textarea id="description"
                                  class="form-control"
                                  rows="6"
                                  data-bind="value: description2"
                                  placeholder="Full Description"></textarea>
                    </div>

                    <!-- Task last update
                    <div class="col-md-12">
                        <label style="margin-bottom: 0px; margin-top: 10px;">Ends on: </label>
                        <input id="updated_date_picker"
                               name="updated_date"
                               data-bind="value: last_update"
                               tabindex="6"
                               data-date = ""
                               data-date-format="mm/dd/yyyy"
                               data-link-field="updated_date_picker"
                               data-link-format="mm/dd/yyyy"
                               class="form-control for-desktop datepicker"/>
                    </div>-->
                </div>
            </div>
            <div class="modal-footer">
                <button id="stock-modal-cancel-button"
                        type="button"
                        class="btn btn-primary"
                        data-dismiss="modal"
                        data-bind="visible: task_4_updater.id == null, click: updater_create">
                    Add Task</button>
                <button id="stock-modal-cancel-button"
                        type="button"
                        class="btn btn-primary"
                        data-dismiss="modal"
                        data-bind="visible: task_4_updater.id != null, click: updater_create">
                    Update Task</button>
                <button id="stock-modal-cancel-button"
                        type="button"
                        class="btn btn-warning"
                        data-dismiss="modal"
                        data-bind="click: updater_cancel">
                    Cancel</button>
            </div>
        </div>
    </div>
</div>