<div id="pos-key-wrapper" class="row" style="padding-top: 10px;">
    <form>
        <div class="col s4">
            <div class="input-field">
            <select id ="page-selector">
                <option value="" disabled>{Literal}Select a Choice Group{/Literal}</option>
                <% var count = 0 %>
                <% _.each(pages, function(page) { %>
                        <option value="<%= page %>"><%= page %></option>   
                    <% count++ %>
                <% }); %>
            </select>
            <label>{Literal}Choice Group{/Literal}</label>
        </div>
        </div>
        <div class="col s2">
            <div class="input-field">
            <select id ="individual-page-selector">
                <option value="" disabled>{Literal}Select a Page{/Literal}</option>
                    <option value="1">1</option>  
                    <option value="2">2</option>  
                    <option value="3">3</option>  
                    <option value="4">4</option>  
                    <option value="5">5</option>  
                    <option value="6">6</option>  
                    <option value="7">7</option>  
                    <option value="8">8</option>  
                    <option value="9">9</option>  
                    <option value="10">10</option>  
                    <option value="11">11</option>  
                    <option value="12">12</option>  
                    <option value="13">13</option>  
                    <option value="14">14</option>  
                    <option value="15">15</option>  
                    <option value="16">16</option>  
                    <option value="17">17</option>  
                    <option value="18">18</option>  
                    <option value="19">19</option>  
                        <option value="20">20</option>  
                    
            </select>
            <label>{Literal}Page{/Literal}</label>
            </div>
        </div>
        <div class="col s1">
            <div class="input-field">
                <input id="minRequired" type="number" class="validate">
                <label class="active" for="minRequired">Minimum</label>
            </div>
        </div>
        <div class="col s1">
        <div class="input-field">
            <input id="maxAllowed" type="number" class="validate">
            <label class="active" for="maxAllowed">Maximum</label>
        </div>
        </div>
        <div class="col s2">
            <div id="pos-key-save-button" class="save" style="padding-top: 20px; float: left;">
                <a href="javascript:void(0)" class="btn-large waves-effect waves-light green save-keys-button">{Literal}Save{/Literal}</a>
            </div>
        </div>
    </form>
    <div class="col s12 m2" style="margin: 0px;">

    </div>
    <div class="col s12" style="margin: 0px; padding: 0px;">
        <div id="grid-stack-container" style="width: 80%">
            <div class="grid-stack" id="gridStack2" data-gs-width="8" data-gs-height="11">
        
            </div>
        </div>
    </div>   
</div>

<div class="floating-menu z-depth-4">
    <div class="edited-button-name truncate"></div>
    <a class="btn waves-effect waves-light btn-small blue edit-modal-trigger" href="javascript:void(0)">{Literal}Edit{/Literal}</a>
    <a class="btn waves-effect waves-light btn-small red delete-modal-trigger" href="javascript:void(0)">{Literal}Delete{/Literal}</a>
</div>

<div id="pos-key-edit-modal" class="modal edit-modal">
    <div class="modal-content">
        <div style="padding-bottom: 25px;">
            <h4>{Literal}Edit Choice Key{/Literal}</h4>
        </div>

        <div id="itemForm" style="display: none;">
            <div class="row">
                <div class="col s12">
                    <div class="col s6">
                        <div class="input-field">
                            <input id="itemButtonText" type="text"  value="" maxlength="50"></input>
                            <label class="active" for="itemButtonText">{Literal}Button Text{/Literal}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <div class="col s3">
                        <label>
                            <input type="checkbox" class="cr">
                            <span>{Literal}This Button is Final{/Literal}</span>
                        </label>
                    </div>
                    <div class="col s3">
                        <label>
                            <input type="checkbox" class="noRepeat" >
                            <span>{Literal}No Repeat{/Literal}</span>
                        </label>
                    </div>
                    <div class="col s3">
                        <label>
                            <input type="checkbox" class="lastChoice" >
                            <span>{Literal}This Button is the Last Choice{/Literal}</span>
                        </label>
                    </div>
                    <div class="col s1" style="display: none;">
                        <div class="input-field">
                            <input id="itemId" type="text"  value=""></input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <form action="#">   
                        <p>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemBlue" type="radio"/>
                                <span><span class="color-box" style="background-color: #97CAEB;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemGray" type="radio"/>
                                <span><span class="color-box" style="background-color: #E2E3E2;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemGreen" type="radio"/>
                                <span><span class="color-box" style="background-color: #A4D391;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemOrange" type="radio"/>
                                <span><span class="color-box" style="background-color: #252525;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemPink" type="radio"/>
                                <span><span class="color-box" style="background-color: #DEBEDB;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemPurple" type="radio"/>
                                <span><span class="color-box" style="background-color: #B4B3DF;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemRed" type="radio"/>
                                <span><span class="color-box" style="background-color: #F1AFAF;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemTeal" type="radio"/>
                                <span><span class="color-box" style="background-color: #4ABD98;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="itemRadio" id="itemYellow" type="radio"/>
                                <span><span class="color-box" style="background-color: #F6F3B0;"></span></span>
                            </label>
                        </p>
                    </form>
                </div>
            </div>
        </div>

        <div id="labelForm" style="display: none;">
            <div class="row">
                <div class="col s12">
                    <div class="col s6">
                        <div class="input-field">
                            <input id="labelButtonText" type="text"  value="" maxlength="50"></input>
                            <label class="active" for="labelButtonText">{Literal}Button Text{/Literal}</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col s12">
                    <div class="col s3">
                        <label>
                            <input type="checkbox" class="crLabel">
                            <span>{Literal}This Button is Final{/Literal}</span>
                        </label>
                    </div>
                    <div class="col s3">
                        <label>
                            <input type="checkbox" class="noRepeatLabel" >
                            <span>{Literal}No Repeat{/Literal}</span>
                        </label>
                    </div>
                    <div class="col s3">
                    <label>
                        <input type="checkbox" class="lastChoiceLabel" >
                        <span>{Literal}This Button is the Last Choice{/Literal}</span>
                    </label>
                </div>
                    <div class="col s1" style="display: none;">
                        <div class="input-field">
                            <input id="labelId" type="text"  value=""></input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12 m4 input-field">
                    <select id="pizzaType">
                        <option value="">{Literal}None{/Literal}</option>
                        <option value="#">{Literal}Round Quarters{/Literal}</option>
                        <option value="#3R#">{Literal}Round Thirds{/Literal}</option>
                        <option value="#3S#">{Literal}Rectangular Thirds{/Literal}</option>
                    </select>
                    <label>Pizza Type</label>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <form action="#">   
                        <p>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelBlue" type="radio"/>
                                <span><span class="color-box" style="background-color: #97CAEB;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelGray" type="radio"/>
                                <span><span class="color-box" style="background-color: #E2E3E2;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelGreen" type="radio"/>
                                <span><span class="color-box" style="background-color: #A4D391;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelOrange" type="radio"/>
                                <span><span class="color-box" style="background-color: #252525;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelPink" type="radio"/>
                                <span><span class="color-box" style="background-color: #DEBEDB;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelPurple" type="radio"/>
                                <span><span class="color-box" style="background-color: #B4B3DF;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelRed" type="radio"/>
                                <span><span class="color-box" style="background-color: #F1AFAF;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelTeal" type="radio"/>
                                <span><span class="color-box" style="background-color: #4ABD98;"></span></span>
                            </label>
                            <label style="padding-left: 40px;">
                                <input name="labelRadio" id="labelYellow" type="radio"/>
                                <span><span class="color-box" style="background-color: #F6F3B0;"></span></span>
                            </label>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect left waves-green btn green save-key-button">{Literal}Done{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect left waves-light btn-flat">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="pos-key-delete-modal" class="modal delete-modal">
    <div class="modal-content">
        <h4>{Literal}Delete Choice Key{/Literal}</h4>
        <p>{Literal}Are you sure that you would like to delete this Choice key?{/Literal}</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat">{Literal}Cancel{/Literal}</a>
        <a href="javascript:void(0)" id="deleteKey" class="modal-close waves-effect waves-green btn red">{Literal}Delete{/Literal}</a>
    </div>
</div>

<div class="fixed-action-btn">
    <a class="btn-floating btn-large ap-blue">
        <i class="large material-icons">format_line_spacing</i>
    </a>
    <ul>
        <li><a id="editPageName" class="btn-floating" style="background-color: #4B9CD6"><i class="material-icons tooltipped" data-position="left" data-tooltip="{Literal}Edit Page Name{/Literal}">mode_edit</i></a></li>
        <li><a id="addKeyButton" class="btn-floating addKeyButton" style="background-color: #A4D391"><i class="material-icons tooltipped"  data-position="left" data-tooltip="{Literal}Add Menu Key{/Literal}">add</i></a></li>
    </ul>
</div>
    
<div id="delete-page-modal" class="modal modal-fixed-footer" style="z-index: 100000;">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Confirm Deletion{/Literal}</h6>
        </div>
        <p>{Literal}Are you sure you want to delete this Choice Group and its contents{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-page-button" class="modal-close waves-effect waves-green btn red left">{Literal}Delete{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="edit-page-name-modal" class="modal modal-fixed-footer edit-page-name-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content">
        <h4>{Literal}Change Choice Group Name{/Literal}</h4> 
        <div class="row">
            <div class="col s12 m6 offset-m3" style="padding-top: 50px;">
                <div class="input-field">
                    <input id="pageName" type="text" value="" maxlength="10">
                    <label class="active" for="pageName">{Literal}Choice Group Name{/Literal}: </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="waves-effect waves-light left green btn-flat save-page-name-button">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)" class="modal-close waves-effect left waves-light btn-flat">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="pos-key-form-modal" class="modal modal-fixed-footer" style="min-height: 25%; min-width: 50%; z-index: 100000;">
    <div class="modal-content" <%= (App.rtl ? 'style="direction:rtl"' : '') %>
        <form id="selectButton">
            <h4>{Literal}Select Button Type{/Literal}</h4> 
            <div class="ap-card-title-text">
                {Literal}Page 1 of 2{/Literal}
            </div>
            <div class="row" style="padding-top: 50px;">
                <div id="itemCard">
                    <div class="col s12 m3 xl2">
                        <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #3970b7; max-height: 150px" >
                            <div>
                                <div class="row description" style="position: relative; right: 13px; bottom: 8px; height: 30px;">
                                    &nbsp;&nbsp;{Literal}Item{/Literal}
                                </div>
                                <div class="row">
                                    {Literal}Add attached item to your invoice{/Literal}.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="labelCard">
                    <div class="col s12 m3 xl2">
                        <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #3970b7; max-height: 150px" >
                            <div>
                                <div class="row description" style="position: relative; right: 13px; bottom: 8px; height: 30px;">
                                    &nbsp;&nbsp;{Literal}Text{/Literal}
                                </div>
                                <div class="row">
                                    {Literal}Add specfic text to a choice group{/Literal}.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                {Literal}{/Literal} <hr size=2>
                <div id="addPageButton">
                    <div class="col s12 m3 xl2">
                        <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable white-text waves-effect waves-light" style="background-color: #3970b7; max-height: 150px" >
                            <div>
                                <div class="row description" style="position: relative; right: 13px; bottom: 8px; height: 30px;">
                                    &nbsp;&nbsp;{Literal}Add New Choice Group{/Literal}
                                </div>
                                <div class="row">
                                    {Literal}Create a new Choice Page to attach your choice keys to{/Literal}.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div id="new-page-form-modal" class="modal modal-fixed-footer new-page-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
        <div class="modal-content">
            <h4>{Literal}Create New Choice Group{/Literal}</h4> 
            <div class="row">
                <div class="col s12 m6 offset-m3" style="padding-top: 50px;">
                    <div class="input-field">
                        <input id="newPageName" type="text" value="" maxlength="10">
                        <label class="active" for="newPageName">{Literal}New Choice Group Name:{/Literal} </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light left green btn-flat save-new-page-button">{Literal}Save{/Literal}</a>
            <a href="javascript:void(0)" class="waves-effect waves-light left btn-flat cancel-new-page-button">{Literal}Cancel{/Literal}</a>
        </div>
    </div>
        
    <div id="item-form-modal" class="modal modal-fixed-footer item-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
        <div class="modal-content">
            <h4>{Literal}Select Item{/Literal}</h4> 
            <div class="ap-card-title-text">
                {Literal}Page 2 of 2{/Literal}
            </div>
            <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 by Item Code or Description{/Literal}</label>  
                    </div>
                </div>
            </div>
            <div class="row" style="padding-top: 50px;">
                <div class="col s12 m6 offset-m3">
                    <div class="input-field" >
                        <input type="text" id="itemText" maxlength="50">
                        <label for="itemText" class="active">{Literal}Button Text{/Literal}</label>  
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light green btn-flat save-item-button left">{Literal}Save{/Literal}</a>
            <a href="javascript:void(0)" class="waves-effect waves-light btn-flat cancel-items-button left">{Literal}Cancel{/Literal}</a>
        </div>
    </div>

    <div id="label-form-modal" class="modal modal-fixed-footer label-form-modal" style="min-height: 25%; min-width: 50%; z-index: 100000;">
        <div class="modal-content">
            <h4>{Literal}Create Text{/Literal}</h4> 
            <div class="ap-card-title-text">
                {Literal}Page 2 of 2{/Literal}
            </div>
            <div class="row" style="padding-top: 50px;">
                <div id ="labelCards">
                    <div class="col s12 m6 offset-m3">
                        <div class="input-field">
                            <input id="label" type="text" maxlength="50">
                            <label class="active" for="label">{Literal}Button Text{/Literal}: </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light green btn-flat save-label-button left">{Literal}Save{/Literal}</a>
            <a href="javascript:void(0)" class="waves-effect waves-light btn-flat cancel-label-button left">{Literal}Cancel{/Literal}</a>
        </div>
    </div>

    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>