<div class="col-lg-12" style="margin-top: 10px;">
    <div class="col-lg-12">
        <strong style="text-decoration: underline; font-size: 2vmin;">Stocks</strong>
        <!-- ko if: editable() -->
            <a href="#"
               style="padding: 0px; font-size: 2.5vmin; margin-left: 1vmin;"
               data-bind="click: show_stock_search_modal">
                <span class="glyphicon glyphicon-plus"></span>
            </a>
        <!-- /ko -->
    </div>
    <div class="table-responsive col-lg-12" style="padding-left: 0px; padding-right: 0px;">
        <!-- ko if: editable() -->
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th class="col-xs-05" style="padding: 0px;">No</th>
                    <th class="col-xs-1" style="padding: 0px;">Stock</th>
                    <th class="col-xs-1" style="padding: 0px;">Equipment</th>
                    <th class="col-md-2" style="padding: 0px;">Make</th>
                    <th class="col-md-2" style="padding: 0px;">Model</th>
                    <th class="col-md-3" style="padding: 0px;">Client</th>
                    <th class="col-md-2" style="padding: 0px;">Status</th>
                    <th class="col-xs-05" colspan="2" style="padding: 0px;">Actions</th>
                </tr>
                </thead>
                <tbody data-bind="foreach: stocks">
                    <tr style="cursor: pointer" class="locked">
                        <td>
                            <input class="form-control for-desktop" placeholder="No"
                                   data-bind="value: number,
                                              attr:{id: 'stock-number-' + $index()}"/>
                        </td>
                        <td>
                            <div data-bind="text: stock ? stock : 'Pending'"/>
                        </td>
                        <td>
                            <select class="form-control for-desktop"
                                    tabindex="1"
                                    data-bind="options: $root.equipments(),
                                               optionsCaption: 'Equipment',
                                               optionsText: 'code',
                                               value: equipment">
                            </select>
                        </td>
                        <td>
                            <div data-bind="text: brand ? brand : '- - -'"/>
                        </td>
                        <td>
                            <div data-bind="text: model ? model : '- - -'"/>
                        </td>
                        <td>
                           <select class="form-control for-desktop"
                                    tabindex="1"
                                    data-bind="options: $root.clients(),
                                               optionsCaption: 'Client',
                                               optionsText: 'name',
                                               value: client">
                            </select>
                        </td>
                        <td>
                            <select class="form-control for-desktop"
                                    tabindex="1"
                                    data-bind="options: $root.stocks_status(),
                                               optionsCaption: 'Status',
                                               value: status">
                            </select>
                        </td>
                        <td>
                            <span class="glyphicon glyphicon-eye-open"
                                  style="color: #428bca; cursor: pointer; width: 100%; height: 100%;
                                  display: inline;"
                                  title="Shoe stock data"
                                  data-bind="click: show_me"></span>
                            <span class="glyphicon glyphicon-trash"
                                  style="color: #d43f3a; cursor: pointer; width: 100%; height: 100%;
                                  display: inline;"
                                  title="Delete stock from this Wrok Order"
                                  data-bind="click: delete_me"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        <!-- /ko -->
        <!-- ko if: !editable() -->
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="col-xs-05" style="padding: 0px;">No</th>
                        <th class="col-xs-1" style="padding: 0px;">Stock</th>
                        <th class="col-xs-1" style="padding: 0px;">Equipment</th>
                        <th class="col-md-2" style="padding: 0px;">Make</th>
                        <th class="col-md-2" style="padding: 0px;">Model</th>
                        <th class="col-md-4" style="padding: 0px;">Client</th>
                        <th class="col-md-1" style="padding: 0px;">Status</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: stocks">
                    <tr style="cursor: pointer" class="locked">
                        <td>
                            <div data-bind="text: number"/>
                        </td>
                        <td>
                            <div data-bind="text: stock ? stock : 'Pending'"/>
                        </td>
                        <td>
                            <div data-bind="text: equipment() ? equipment().code : '- - -'"/>
                        </td>
                        <td>
                            <div data-bind="text: brand ? brand : '- - -'"/>
                        </td>
                        <td>
                            <div data-bind="text: model ? model : '- - -'"/>
                        </td>
                        <td>
                            <div data-bind="text: client() ? client().name : '- - -'"/>
                        </td>
                        <td>
                            <div data-bind="text: status"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        <!-- /ko -->
        <div>
            <div  class="col-xs-1" style="padding-left: 0px;">
                <label style="margin-bottom: 0px; margin-top: 0px;">Quantity:</label>
            </div>
            <div  class="col-xs-1" style="padding-left: 0px;">
                <!-- ko if: editable() -->
                    <input id="stocks-qty"
                           <select class="form-control for-desktop s-qty"
                           data-bind="value: stocks_qty"/>
                <!-- /ko -->
                <!-- ko if: !editable() -->
                <input class="form-control for-desktop s-qty"
                           data-bind="value: stocks_qty"
                           disabled/>
                <!-- /ko -->
            </div>
            <!-- ko if: editable() -->
                <div class="col-lg-10" style="padding-right: 0px;">
                    <a class="pull-right btn btn-xs btn-info"
                       style="padding: 0px;"
                       data-bind="click: show_stock_search_modal">
                        Add stock <span class="glyphicon glyphicon-plus-sign"></span>
                    </a>
                </div>
            <!-- /ko -->
        </div>
    </div>
</div>