<div id="choice-keys-wrapper" class="row">
    <form class="row">
        <div class="col m3 s6">
            <div class="input-field">
                <select id="group-selector">
                    <% var currentGroup=document.getElementById('group-selector')?.value; %>
                        <% _.each(groupNames, function(group) { %>
                            <option <%=currentGroup==group ? 'selected' : '' %> value="<%= group %>"><%= group %>
                            </option>
                            <% }); %>
                </select>
                <label>{Literal}Choice Group{/Literal}</label>
            </div>
        </div>
        
        <div class="col l3 m3 s3">
            <div id="pos-key-save-button" class="input-field">
                <a href="javascript:void(0)"
                    class="btn-large waves-effect waves-light green save-keys-button">{Literal}Save{/Literal}</a>
            </div>
        </div>
        <div class="col l3 m3 s3">
            <div class="input-field center">
                <!-- <label>{Literal}Expand/Collapse{/Literal}</label> -->
                <a href="javascript:void(0)" data-tooltip="{Literal}Collapse to change page order{/Literal}"
                    class="btn-floating tooltipped waves-effect waves-light blue lighten-1 expand-collapse">
                    <i class="material-icons">unfold_more</i>
                </a>
                <span class="helper-text">{Literal}Expand/Collapse{/Literal}</span>
            </div>
        </div>
    </form>

    <div class="row">
        <div>
            <div class="mobile-pos-grid" style="margin: 0px; padding: 0px;">
                <div id="grid-stack-container">
                        
                    <% _.each(choiceKeysPages, function(pageChoices, pageIndex) { %>
                        
                        <% var pageType = getPageType(pageChoices[0].text) %>
                        <div data-page="<%=pageIndex%>" class="page-type choice-key-group-card draggable">
                            <div class="collapse-page" data-collapsed="false">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
                            </div>
                            <div>
                                <div style="display: inline-block;width: 100%;">
                                    <div class="input-field col l4 m6 s12" style="margin: 0;">
                                        <input data-id="<%= pageChoices[0].id %>"  style="font-size: large; font-weight: 400;" type="text" name="page-title" id="page-title" value="<%= removeTypeFromDescriptionKey(pageChoices[0].text) %>">
                                        <span class="helper-text">{Literal}Description{/Literal}</span>
                                    </div>
                                    <div class="input-field col l3 m6 s12 hide-mobile" style="margin-top: 0;">
                                        <select name="pageType" id="pageType">
                                            <option <%= pageType == '*'? 'selected': '' %> value="*">{Literal}Regular{/Literal}</option>
                                            <option <%= pageType == '#'? 'selected': '' %> value="#">{Literal}Pizza{/Literal}</option>
                                            <option <%= pageType == '#3R#'? 'selected': '' %> value="#3R#">{Literal}3 Pieces Pizza{/Literal}</option>
                                            <option <%= pageType == '#3S#'? 'selected': '' %> value="#3S#">{Literal}Rectangular Pizza{/Literal}</option>
                                        </select>
                                        <span class="helper-text">{Literal}Type{/Literal}</span>
                                    </div>
                                    <div class="input-field col m1 s6 hide-mobile">
                                        <% var minRequired = pageChoices[1]?.minRequired %>
                                        <% var maxAllowed = pageChoices[1]?.maxAllowed %>
                                        <input draggable="true" value="<%= minRequired ? minRequired : 0 %>" name="minRequired" type="number" class="validate" style="height: 30px;">
                                        <span class="helper-text">{Literal}Min{/Literal}</span>
                                    </div>
                                    <div class="input-field col m1 s6 hide-mobile">
                                        <input draggable="true" value="<%= maxAllowed ? maxAllowed : 0 %>" name="maxAllowed" type="number" class="validate" style="height: 30px;">
                                        <span class="helper-text">{Literal}Max{/Literal}</span>
                                    </div>
                                    
                                    <div class="input-field col m1 s12 hide-mobile">
                                        <button class="btn red deletePageBtn">{Literal}Delete{/Literal}</button>
                                    </div>
                                </div>
                                <div class="choice-keys">
                                <% _.each(pageChoices, function(choiceKey, index) { %>
                                    <% if(index == 0) return true; %>
                                    
                                    <% if(pageType == '*' || pageType == '') { %>

                                    <div data-page="<%=pageIndex%>" class="choice-type choice-key-card draggable" draggable="true" data-index="<%=index%>"
                                        data-id="<%= choiceKey.id %>" data-id2="<%= choiceKey?.id2 %>" data-itemid="<%= choiceKey?.item?.id %>" data-text="<%=choiceKey.text%>" data-cr="<%=choiceKey.cr%>" data-noepeat="<%=choiceKey.noRepeat%>">
                                        <div class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-light edit-modal-trigger">
                                            <div class="description center">
                                                <%= choiceKey.text %>
                                            </div>
                                            <div data-itemid="<%= choiceKey?.item?.id %>" class="choice-key-price" <%=choiceKey?.item ? '': 'style="display:none"' %> >
                                                <%=choiceKey?.item?.price.toCurrency(2)%>
                                            </div>
                        
                                        </div>
                                    </div>

                                    <% } else if(pageType == '#') {%>
                                        <div data-page="<%=pageIndex%>"  class="choice-type choice-key-card draggable pizza-container" draggable="true" data-index="<%=index%>" data-id2="<%= choiceKey?.id2 %>"
                                            data-id="<%= choiceKey.id %>" data-itemid="<%= choiceKey?.item?.id %>" data-text="<%=choiceKey.text%>" data-cr="<%=choiceKey.cr%>" data-norepeat="<%=choiceKey.noRepeat%>">
                                            <div style="width: 490px;" class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-light edit-modal-trigger">
                                                <div class="description center">
                                                    <%= choiceKey.text %>
                                                </div>
                                                <div  class="choice-key-price" <%=choiceKey?.item ? '': 'style="display:none"' %> >
                                                    <%=choiceKey?.item?.price.toCurrency(2)%>
                                                </div>
                                                <div style="border-left: black 1px solid; height: 100%;"></div>
                                                <div style="align-self: center;">
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#aeaeae"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#ffffff"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#ffffff"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#ffffff"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#ffffff"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#aeaeae"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#ffffff"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#ffffff"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#ffffff"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#ffffff"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#ffffff"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#ffffff"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#aeaeae"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#ffffff"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#ffffff"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#ffffff"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                      <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#ffffff"/>
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#ffffff"/>
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#ffffff"/>
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#aeaeae"/>
                                                          <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                      </svg>
                                                </div>
                                            </div>
                                        </div>
                                    <% } else if(pageType == '#3S#') {%>
                                        <div data-page="<%=pageIndex%>"  class="choice-type choice-key-card draggable pizza-container" draggable="true" data-index="<%=index%>" data-id2="<%= choiceKey?.id2 %>"
                                            data-id="<%= choiceKey.id %>" data-itemid="<%= choiceKey?.item?.id %>" data-text="<%=choiceKey.text%>" data-cr="<%=choiceKey.cr%>" data-norepeat="<%=choiceKey.noRepeat%>">
                                            <div style="width: 490px;" class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-light edit-modal-trigger">
                                                <div class="description center">
                                                    <%= choiceKey.text %>
                                                </div>
                                                <div  class="choice-key-price" <%=choiceKey?.item ? '': 'style="display:none"' %> >
                                                    <%=choiceKey?.item?.price.toCurrency(2)%>
                                                </div>
                                                <div style="border-left: black 1px solid; height: 100%;"></div>
                                                <div style="align-self: center;">
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="#aeaeae" stroke="black" stroke-width="2" />
                                                    </svg>
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <!-- Define a linear gradient -->
                                                        <defs>
                                                            <linearGradient id="halfGradientLeft" x1="0%" y1="0%" x2="100%" y2="0%">
                                                                <stop offset="0%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="50%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="50%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
                                                            </linearGradient>
                                                        </defs>
                                                        <!-- Draw the rectangle -->
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="url(#halfGradientLeft)" stroke="black" stroke-width="2" />
                                                    </svg>
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <!-- Define a linear gradient -->
                                                        <defs>
                                                            <linearGradient id="halfGradientRight" x1="0%" y1="0%" x2="100%" y2="0%">
                                                                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="50%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="50%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="100%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                            </linearGradient>
                                                        </defs>
                                                        <!-- Draw the rectangle -->
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="url(#halfGradientRight)" stroke="black" stroke-width="2" />
                                                    </svg>
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <!-- Define a linear gradient -->
                                                        <defs>
                                                            <linearGradient id="third1" x1="0%" y1="0%" x2="100%" y2="0%">
                                                                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="66%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="66%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="100%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                            </linearGradient>
                                                        </defs>
                                                        <!-- Draw the rectangle -->
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="url(#third1)" stroke="black" stroke-width="2" />
                                                    </svg>
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <!-- Define a linear gradient -->
                                                        <defs>
                                                            <linearGradient id="third2" x1="0%" y1="0%" x2="100%" y2="0%">
                                                                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="33%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="33%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="66%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="66%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
                                                            </linearGradient>
                                                        </defs>
                                                        <!-- Draw the rectangle -->
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="url(#third2)" stroke="black" stroke-width="2" />
                                                    </svg>
                                                    <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 85">
                                                        <!-- Define a linear gradient -->
                                                        <defs>
                                                            <linearGradient id="third3" x1="0%" y1="0%" x2="100%" y2="0%">
                                                                <stop offset="0%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="33%" style="stop-color:#aeaeae;stop-opacity:1" />
                                                                <stop offset="33%" style="stop-color:#ffffff;stop-opacity:1" />
                                                                <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
                                                            </linearGradient>
                                                        </defs>
                                                        <!-- Draw the rectangle -->
                                                        <rect x="0" y="0" rx="10" ry="10" width="115" height="80" fill="url(#third3)" stroke="black" stroke-width="2" />
                                                    </svg>
                                                   
                                                </div>
                                            </div>
                                        </div>
                                    <% } else if(pageType == '#3R#') {%>
                                        <div data-page="<%=pageIndex%>"  class="choice-type choice-key-card draggable pizza-container" draggable="true" data-index="<%=index%>" data-id2="<%= choiceKey?.id2 %>"
                                            data-id="<%= choiceKey.id %>" data-itemid="<%= choiceKey?.item?.id %>" data-text="<%=choiceKey.text%>" data-cr="<%=choiceKey.cr%>" data-norepeat="<%=choiceKey.noRepeat%>">
                                            <div style="width: 490px;" class="card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-light edit-modal-trigger">
                                                <div class="description center">
                                                    <%= choiceKey.text %>
                                                </div>
                                                <div  class="choice-key-price" <%=choiceKey?.item ? '': 'style="display:none"' %> >
                                                    <%=choiceKey?.item?.price.toCurrency(2)%>
                                                </div>
                                                <div style="border-left: black 1px solid; height: 100%;"></div>
                                                <div style="align-self: center;">
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#aeaeae" />
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#aeaeae" />
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#aeaeae" />
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#aeaeae" />
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#ffffff" />
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#aeaeae" />
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#aeaeae" />
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#ffffff" />
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Quarter 1 (top-right) -->
                                                        <path d="M100,100 L200,100 A100,100 0 0,0 100,0 Z" fill="#aeaeae" />
                                                        <!-- Quarter 2 (top-left) -->
                                                        <path d="M100,100 L100,0 A100,100 0 0,0 0,100 Z" fill="#ffffff" />
                                                        <!-- Quarter 3 (bottom-left) -->
                                                        <path d="M100,100 L0,100 A100,100 0 0,0 100,200 Z" fill="#ffffff" />
                                                        <!-- Quarter 4 (bottom-right) -->
                                                        <path d="M100,100 L100,200 A100,100 0 0,0 200,100 Z" fill="#aeaeae" />
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Create a clip path using the circle -->
                                                        <defs><clipPath id="circleClip"><circle cx="100" cy="100" r="100" /></clipPath></defs>
                                                    
                                                        <!-- Color sections with clip path applied -->
                                                        <g clip-path="url(#circleClip)">
                                                            <path d="M 100 100 L 100 0 A 100 100 0 0 1 170 170 Z" 
                                                                  fill="#ffffff"/>
                                                            <path d="M 100 100 L 170 170 A 100 100 0 0 1 30 170 Z" 
                                                                  fill="#aeaeae"/>
                                                            <path d="M 100 100 L 30 170 A 100 100 0 0 1 100 0 Z" 
                                                                  fill="#ffffff"/>
                                                        </g>
                                                    
                                                        <!-- Circle outline on top -->
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Create a clip path using the circle -->
                                                        <defs><clipPath id="circleClip"><circle cx="100" cy="100" r="100" /></clipPath></defs>
                                                    
                                                        <!-- Color sections with clip path applied -->
                                                        <g clip-path="url(#circleClip)">
                                                            <path d="M 100 100 L 100 0 A 100 100 0 0 1 170 170 Z" 
                                                                  fill="#aeaeae"/>
                                                            <path d="M 100 100 L 170 170 A 100 100 0 0 1 30 170 Z" 
                                                                  fill="#ffffff"/>
                                                            <path d="M 100 100 L 30 170 A 100 100 0 0 1 100 0 Z" 
                                                                  fill="#ffffff"/>
                                                        </g>
                                                    
                                                        <!-- Circle outline on top -->
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                    <svg width="35" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                        <!-- Create a clip path using the circle -->
                                                        <defs><clipPath id="circleClip"><circle cx="100" cy="100" r="100" /></clipPath></defs>
                                                    
                                                        <!-- Color sections with clip path applied -->
                                                        <g clip-path="url(#circleClip)">
                                                            <path d="M 100 100 L 100 0 A 100 100 0 0 1 170 170 Z" 
                                                                  fill="#ffffff"/>
                                                            <path d="M 100 100 L 170 170 A 100 100 0 0 1 30 170 Z" 
                                                                  fill="#ffffff"/>
                                                            <path d="M 100 100 L 30 170 A 100 100 0 0 1 100 0 Z" 
                                                                  fill="#aeaeae"/>
                                                        </g>
                                                    
                                                        <!-- Circle outline on top -->
                                                        <circle cx="100" cy="100" r="100" fill="none" stroke="black" stroke-width="4" />
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    <% } %>
                                <% }); %>

                                    <div name="add-new-choice-btn" class="choice-key-card">
                                        <div class="add-new-choice-btn card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-light btn-large waves-effect waves-light green" style="border-radius: 5px;justify-content: center;">
                                            <i class="material-icons">control_point</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% }); %>
                    
                </div>
            </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="choice-key-edit-modal" class="modal modal-fixed-footer edit-modal bottom-sheet side-sheet no-overlay modal-side-slide">
    
    <div class="modal-content">
        <div style="padding-bottom: 25px;">
            <h4>{Literal}Edit Choice Key{/Literal}</h4>
        </div>
        <br>
        <div class="row">
            <div class="col s12">
                <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 class="col s12">
                <div class="row">
                    <div class="input-field col s11">
                            <input id="itemId" class="text" disabled>
                        <label for="itemId" class="active">{Literal}Item Id{/Literal}</label>
                    </div>
                    <!-- <button class="btn-floating btn-large waves-effect waves-light red col s1" onclick="(() => {document.getElementById('itemId').value = ''; App.choiceKeysMobileView.updateChoiceItem();} )()"><i class="material-icons">clear</i></button> -->
                     <div class="col s1">
                         <a class="btn btn-large waves-effect waves-light red" style="padding-left: 5px;padding-right: 5px;"
                             onclick="(() => {document.getElementById('itemId').value = ''; App.choiceKeysMobileView.updateChoiceItem();} )()"
                             >
                            <i class="material-icons"
                            >clear</i></a>
                        </div>
                </div>
            </div>
            <div class="col s12">
                <div class="input-field">
                    <input type="text" id="itemSearch" class="autocomplete">
                    <label for="itemSearch" class="active"><i class="material-icons left">filter_list</i>{Literal}Search by Item
                        Code or Description{/Literal}</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <div class="col s12">
                    <label>
                        <input id="cr" type="checkbox" class="cr">
                        <span>{Literal}This Button is Final{/Literal}</span>
                    </label>
                </div>
                <!-- <div class="col s12">
                    <label>
                        <input id="noRepeat" type="checkbox" class="noRepeat">
                        <span>{Literal}No Repeat{/Literal}</span>
                    </label>
                </div> -->
                <!-- <div class="col s12">
                    <label>
                        <input type="checkbox" class="lastChoice">
                        <span>{Literal}This Button is the Last Choice{/Literal}</span>
                    </label>
                </div> -->
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)"
            class="modal-close waves-effect right waves-green btn red delete-choice-key">{Literal}delete{/Literal}</a>
        <a href="javascript:void(0)"
            class="modal-close waves-effect left waves-light btn-flat">{Literal}Close{/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>
        <%var dataPosition = App.rtl? "right" : "left"%>
        <li><a id="editChoiceGroupBtn" class="btn-floating" style="background-color: #4B9CD6"><i
                    class="material-icons tooltipped" data-position="<%=dataPosition%>"
                    data-tooltip="{Literal}Edit Choice Group{/Literal}">mode_edit</i></a></li>
        <li><a id="addChoiceGroupBtn" class="btn-floating addKeyButton" style="background-color: #A4D391"><i
                    class="material-icons tooltipped" data-position="<%=dataPosition%>"
                    data-tooltip="{Literal}Add Choice Group{/Literal}">add</i></a></li>
        <li><a id="addPageBtn" class="btn-floating addKeyButton lime"><i
                    class="material-icons tooltipped" data-position="<%=dataPosition%>"
                    data-tooltip="{Literal}Add Page{/Literal}">add</i></a></li>
    </ul>
</div>

<div id="unsaved-changes-modal" class="modal modal-fixed-footer message-modal">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Changes not saved{/Literal}</h6>
        </div>
        <div style="display: flex;align-items: center;justify-content: center">
            <i class="material-icons red-text medium">error_outline</i>{Literal}Changes in this Choice Group will be lost. Are you sure{/Literal}?
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="discard-changes"
            class="modal-close waves-effect waves-green btn red left">{Literal}Discard Changes{/Literal}</a>
        <a href="javascript:void(0)" id="cancel-discard-changes"
            class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>

<div id="edit-choice-group-name-modal" class="modal modal-fixed-footer"
    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="choiceGroupEdit" type="text" value="" maxlength="10">
                    <label class="active" for="choiceGroupEdit">{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-choice-group-name-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="new-choice-group-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="newChoiceGroup" type="text" value="" maxlength="10">
                        <label class="active" for="newChoiceGroup">{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 add-new-choice-group-button">{Literal}Add{/Literal}</a>
            <a href="javascript:void(0)"
                class="modal-close waves-effect waves-light left btn-flat cancel-new-page-button">{Literal}Cancel{/Literal}</a>
        </div>
    </div>