<div id="follow-on-form-modal" class="modal modal-fixed-footer" style="max-height: 100%" <%= (App.rtl ? 'style="direction:rtl"' : '') %>></div>
    <div class="modal-content">
        <div id="follow-on-form-content">
            <div style="padding-bottom: 50px">
                <h4>{Literal}Follow On Details{/Literal}</h4>
            </div>
            <form>
                <div>
                    <div class="row">
                        <div class="col s1" style="display:none;">
                            <div class="input-field">
                                <input id="id" type="text" value="<%= followOn.id %>" >
                            </div>
                        </div>

                        <div class="col s1" style="display:none;">
                            <div class="input-field">
                                <input id="type" type="text" value="<%= followOn.type %>" >
                            </div>
                        </div>

                        <div class="col s12 m6">
                            <div class="input-field">
                                <input id="code" type="text" value="<%= followOn.code %>" class="validate" disabled>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col s12 m6" style="margin-top:25px; margin-bottom: 25px;">
                        <label>
                            <input type="checkbox" class="ask filled-in" data-type="followOn.ask" <%= followOn.ask ? 'checked': '' %>>
                            <span>{Literal}Ask Before{/Literal}</span>
                        </label>
                    </div>

                    <!-- <div class="col s12 m6" style="margin-top:25px; margin-bottom: 25px;">
                        <label>
                            <input type="checkbox" class="isItem filled-in" data-type="followOn.isItem" <%= followOn.isItem ? 'checked': '' %>>
                            <span>{Literal}By Item{/Literal}</span>
                        </label>
                    </div> -->
                    <div class=" col s12 m3" style="margin-top:27px">
                        <label>
                            <!-- {Literal}By Item{/Literal} -->
                            <input class="filled-in" disabled="" id="isByTypeSwitch" type="checkbox" data-type="followOn.isItem" <%= !followOn.isItem ? 'checked': '' %>>
                            <span class="">{Literal}By Type{/Literal}</span>
                            
                        </label>
                      </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 m12" style="max-height: 400px; overflow: auto">
                        <table class="table highlight" id="itemTable">
                            <thead>
                                <tr>
                                    <th>{Literal}Id{/Literal}</th>
                                    <th>{Literal}Description{/Literal}</th>
                                    <th>{Literal}Qty{/Literal}</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 center">
                        <a id="addItems" href="#select-item-modal" class="waves-effect waves-light ap-blue btn-large modal-trigger select-item ">{Literal}Add Items{/Literal}</a>
                    </div>
                </div>
            </form>
        </div>     
    </div>
</div>

<div class="modal-footer">
    <a href="#delete-follow-on-modal" class="waves-effect waves-light btn-flat red-text right modal-trigger delete-follow-on-button">{Literal}Delete{/Literal}</a>
    <a href="javascript:void(0)" class="waves-effect waves-green btn green left save-button">{Literal}Save{/Literal}</a>
    <a href="javascript:void(0)" class="modal-close waves-effect waves-light left btn-flat">{Literal}Cancel{/Literal}</a>
</div>
    

<div id="delete-follow-on-modal" class="modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Confirm Deletion{/Literal}</h6>
        </div>
        <p>{Literal}Are you sure that you would like to remove this Follow On item{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-follow-on-confirm" class="modal-close waves-effect waves-green btn red left" data-follow-on-id="<%= followOn.id %>">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="delete-follow-on-id" />
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="select-item-modal" class="modal fixed-footer">
    <div class="modal-content">
        <h4>{Literal}Select Item{/Literal}</h4>
        <div class="row" style="padding-top: 50px">
            <div class="col s12 m6 offset-m3">
                <div class="input-field" >
                    <input type="text" id="itemSearch" class="autocomplete">
                    <label for="itemSearch"><i class="material-icons left">filter_list</i>{Literal}Search Item{/Literal}</label>  
                </div>
            </div>
            <div id="isByTypeSwitchModalContainer" class=" col s12 m3" style="margin-top:27px;">
                <label>
                    <!-- {Literal}By Item{/Literal} -->
                    <input class="filled-in" id="isByTypeSwitchModal" type="checkbox">
                    <span class="">{Literal}By Type{/Literal}</span>
                    
                </label>
              </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light btn-flat cancel-item-trigger left">{Literal}Cancel{/Literal}</a>
        <input type="hidden" id="item-id" />
    </div>
</div>