<!-- ko if: chosenwo() -->
    <div class="modal fade bs-example-modal-lg"
         id="search-add-stock"
         tabindex="-1"
         role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <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">Stock search</h4>
                    <div class="container-fluid">
                        <div class="col-sm-3" style="padding-right: 0px;">
                            <input type="text" class="form-control for-desktop"
                                   id="stock-number-4-search"
                                   placeholder="Stock number"
                                   data-bind="value: chosenwo().stock4search,
                                             valueUpdate: 'input',
                                             enterkeypress: chosenwo().search_stock">
                        </div>
                        <div class="col-md-1" style="margin-left: 0px;">
                            <a class="btn btn-primary"
                               data-bind="click: chosenwo().search_stock">
                                Go <span class="glyphicon glyphicon-search"/>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="stockModalPreView" class="modal-body">
                    <div class="container-fluid"
                         style="padding: 0px;">
                        <div data-bind="attr:{class: chosenwo().new_stock() == null
                                                                            && chosenwo().found_stock() == null ?
                                                                            'col-xs-12 text-center' : 'col-xs-7 text-center'}">
                            <img class="img"
                                 data-bind="attr:{src: chosenwo().found_stock() != null ?
                                                                                chosenwo().found_stock().picture() != null ?  chosenwo().found_stock().picture() :
                                                                                '{{ asset('bundles/vgmwo/images/unknown-wo.png') }}' :
                                                                                '{{ asset('bundles/vgmwo/images/unknown-wo.png') }}'}"/>
                        </div>
                        <div class="col-xs-5" data-bind="visible: chosenwo().found_stock() != null">
                            <div id="stock_data" class="table-responsive" style="padding-left: 0px;"
                                 data-bind="with: chosenwo().found_stock">
                                <table class="table table-striped table-hover">
                                    <tbody class="stocks_list">
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Stock No:</strong>
                                            </td>
                                            <td id="data-stock" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: stock"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Serial No:</strong>
                                            </td>
                                            <td id="data-serial" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: serial"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Equipment:</strong>
                                            </td>
                                            <td id="data-serial" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: equipment() ? equipment().name : '- - -'"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Hours/Miles:</strong>
                                            </td>
                                            <td id="data-hour-time" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: hours_miles"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Make:</strong>
                                            </td>
                                            <td id="data-make" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: brand"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Model:</strong>
                                            </td>
                                            <td id="data-model" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: model"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Cap:</strong>
                                            </td>
                                            <td id="data-cap" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: cap"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Tran/Gen/Com:</strong>
                                            </td>
                                            <td id="data-tgc" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: tgc"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Engine:</strong>
                                            </td>
                                            <td id="data-engine" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: engine"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Year:</strong>
                                            </td>
                                            <td id="data-year" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: year"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Localization:</strong>
                                            </td>
                                            <td id="data-loc" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: loc"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Actual Condition:</strong>
                                            </td>
                                            <td id="data-acond" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: acond"/>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Work Order:</strong>
                                            </td>
                                            <td id="data-wo" class="col-md-7"
                                                style="padding: 0 2px;"
                                                data-bind="text: actual_workorder"/>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <strong>Condition: </strong>
                                                <pr data-bind="text: cond"/>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-xs-5" data-bind="visible: chosenwo().new_stock() != null">
                            <div id="stock_data" class="table-responsive" style="padding-left: 0px;"
                                 data-bind="with: chosenwo().new_stock">
                                <table class="table table-striped table-hover">
                                    <tbody class="stocks_list">
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Stock No:</strong>
                                            </td>
                                            <td id="data-stock" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: stock"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Serial No:</strong>
                                            </td>
                                            <td id="data-serial" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: serial"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Equipment:</strong>
                                            </td>
                                            <td id="data-serial" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <select class="form-control for-desktop"
                                                        tabindex="1"
                                                        data-bind="options: $root.equipments(),
                                                                   optionsCaption: 'Equipment',
                                                                   optionsText: 'name',
                                                                   value: equipment">
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Hours/Miles:</strong>
                                            </td>
                                            <td id="data-hour-time" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: hours_miles"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Make:</strong>
                                            </td>
                                            <td id="data-make" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: brand"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Model:</strong>
                                            </td>
                                            <td id="data-model" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: model"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Cap:</strong>
                                            </td>
                                            <td id="data-cap" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: cap"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Tran/Gen/Com:</strong>
                                            </td>
                                            <td id="data-tgc" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: tgc"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Engine:</strong>
                                            </td>
                                            <td id="data-engine" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: engine"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Year:</strong>
                                            </td>
                                            <td id="data-year" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: year"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Localization:</strong>
                                            </td>
                                            <td id="data-loc" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: loc"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Actual Condition:</strong>
                                            </td>
                                            <td id="data-acond" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: acond"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                                <strong>Work Order:</strong>
                                            </td>
                                            <td id="data-wo" class="col-md-7"
                                                style="padding: 0 2px;">
                                                <input class="form-control for-desktop" data-bind="value: actual_workorder"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <strong>Condition: </strong>
                                                <textarea class="form-control" data-bind="value: cond"></textarea>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    {% if is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_ADMIN') %}
                        <button id="stock-modal-accept-button" type="button"
                                class="btn btn-primary" data-dismiss="modal"
                                data-bind="click: chosenwo().addStock()">
                            Add
                        </button>
                    {% else %}
                        <!-- ko if: chosenwo().found_stock_real_status() != 3 && (chosenwo().found_stock_real_status() != 4 || chosenwo().equipment().multiple_wos) -->
                            <button id="stock-modal-accept-button" type="button"
                                    class="btn btn-primary" data-dismiss="modal"
                                    data-bind="click: chosenwo().addStock()">
                                Add
                            </button>
                        <!-- /ko -->
                    {% endif %}
                    <button id="stock-modal-cancel-button" type="button"
                            class="btn btn-default" data-dismiss="modal">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
<!-- /ko -->