{{devices_local = (devices 0 true)}}
        {{dashboard = queries['dashboard']}}
        {{db=dashboard_ref dashboard}}
        {{dbs=dashboards_ref}}

{{if db.layout=='ROW_COL'}}
        <div class="popup">
        <div class="row ml-1 mr-1 grid-row-col {{if dbs.edit_mode}}edit-mode{{end}}" >
        {{widgets = widgets_for_dashboard dashboard}}
        {{for w in widgets}}
            {{wid = w.id}}
            <div class="grid-row-col-outer col-md-4 col-lg-4 col-xl-3 col-sm-6">
                {{style_css=style_css | string.append 'border: ' | string.append w.border_size | string.append 'px solid #999999; border-color: ' | string.append w.border_color | string.append '; border-radius: ' | string.append w.border_radius | string.append 'px; background: ' | string.append w.background_color | string.append ';'}}

                {{if w.stretch_background}}
                    {{stretch='background-size: cover;'}}
                {{else}}
                    {{stretch='background-position: center;'}}
                {{end}}
                <div class="grid-row-col-item p-1" {{if dbs.edit_mode}}onmouseenter="gridItemEnter('{{w.id}}');" onmouseleave="hideControls('{{ w.id }}');" {{end}} style="{{style_css}} {{if w.background_image != ''}}background-image: {{if w.background_opacity != ''}}linear-gradient(rgba(255,255,255,{{w.background_opacity}}), rgba(255,255,255,{{w.background_opacity}})),{{end}} url('{{w.background_image}}'); background-repeat: no-repeat; {{stretch}}{{opacity}}{{end}}" id="id_{{wid}}" wid="{{w.id}}">
                    {{if dbs.edit_mode}}
                        <div class='drag_handle_row_col' id="dragid_{{wid}}" onclick="showControls('{{ w.id }}');"></div>
                        <!-- center edit icon shown on hover in edit-mode -->
                        <div class="grid-item-hover-icon"><i class="fas fa-edit"></i></div>
                    {{end}}     
                    <div id="card_update_{{w.id}}">
                    {{if (w.type=='Device')}}
                        {{dialog_id='edit_device_card'}}
                        {{includefileraw Dashboards/Cards/Internal/card_device.html}}
                    {{else if w.type=='Thermostat'}}
                        {{dialog_id='edit_thermostat_card'}}
                        {{includefileraw Dashboards/Cards/Internal/card_thermostat.html}}
                    {{else if w.type=='Media'}}
                        {{dialog_id='edit_media_card'}}
                        {{includefileraw Dashboards/Cards/Internal/card_media.html}}
                    {{else if w.type=='Camera'}}
                        {{dialog_id='edit_camera_card'}}
                        {{includefileraw Dashboards/Cards/Internal/card_camera.html}}
                    {{else if w.type=='Custom'}}
                        {{dialog_id='edit_custom_card'}}
                        {{includefileraw Dashboards/Cards/Custom/card_custom.html}}
                    {{end}}                     
                    </div>
                </div>
                {{if dbs.edit_mode}}      
                <div id="edit_controls_{{w.id}}">
                    {{includefileraw includes/dashboard_card_edit_controls.html}}
                </div>                 
                {{end}}
             </div> 
            <div class="w-100 d-none d-xs-block"></div>   
        {{end}}
        </div>
        </div>
{{else}}        
        <div class="grid popup {{if dbs.edit_mode}}edit-mode{{end}}">  
            {{# ANY CHANGES TO THIS CODE NEEDS TO BE ADDED TO dashboard_grid_item.html TODO: Merge that file with this one }}
            {{widgets = widgets_for_dashboard dashboard}}
            {{if db.layout == 'FIXED_RESIZEABLE'}}
                {{screenwidth=string.to_int queries['screenwidth']}}
                {{auto_layout=true}}
                {{position_left=0}}
                {{position_top=110}}
                {{if db.hide_header}}{{position_top = position_top-40}}{{end}}
                {{if db.hide_navbar}}{{position_top = position_top-60}}{{end}}
                {{max_height=0}}
                {{for w in widgets}}
                    {{if w.left != -1}}{{auto_layout=false}}{{end}}
                {{end}}
            {{end}}

            {{dialog_id=''}}
            {{for w in widgets}}       
                {{wid = w.id}}
                {{style_css=''}}
                {{if db.layout == 'FIXED_RESIZEABLE' || db.layout == 'MASONRY_RESIZEABLE'}}                                        
                    {{swidth=''}}
                    {{sheight=''}}
                    {{if w.width>0}}
                        {{swidth='width:' | string.append w.width | string.append 'px;'}}
                    {{end}}
                    {{if w.height>0}}
                        {{h=w.height}}                        
                        {{sheight='height:' | string.append h | string.append 'px;'}}
                    {{end}}
                    {{if w.width>0 || w.height>0}}
                        {{style_css='overflow:hidden;' | string.append sheight | string.append swidth}}
                    {{end}}
                    {{if db.layout == 'FIXED_RESIZEABLE'}}
                        {{if auto_layout}}{{else}}{{position_left=w.left}}{{position_top=w.top}}{{end}}
                        {{style_css=style_css | string.append 'position:fixed;left: ' | string.append position_left | string.append 'px; top: ' | string.append position_top | string.append 'px;'}}
                        {{if auto_layout}}
                            {{w.left=position_left}}
                            {{w.top=position_top}}
                            {{wtemp=w.width}}
                            {{if wtemp==0}}{{wtemp=300}}{{end}}                        
                            {{position_left = position_left+wtemp+10}}
                            {{if w.height==0}}{{w.height=300}}{{end}}       {{if w.height > max_height}}{{max_height=w.height}}{{end}}
                            {{if position_left+300 > screenwidth}}{{position_top = position_top+max_height+10}}{{max_height=0}}{{position_left=0}}{{end}}
                        {{end}}
                    {{end}}
                {{end}}
                
                {{style_css=style_css | string.append 'border: ' | string.append w.border_size | string.append 'px solid #999999; border-color: ' | string.append w.border_color | string.append '; border-radius: ' | string.append w.border_radius | string.append 'px; background: ' | string.append w.background_color | string.append ';'}}
                
                {{if w.stretch_background}}
                    {{stretch='background-size: cover;'}}
                {{else}}
                    {{stretch='background-position: center;'}}
                {{end}}
                
                
                <div class="grid-item" {{if dbs.edit_mode}}onmouseenter="gridItemEnter('{{w.id}}');" onmouseleave="hideControls('{{ w.id }}');" {{end}} style="{{style_css}} {{if w.background_image != ''}}background-image: {{if w.background_opacity != ''}}linear-gradient(rgba(255,255,255,{{w.background_opacity}}), rgba(255,255,255,{{w.background_opacity}})),{{end}} url('{{w.background_image}}'); background-repeat: no-repeat; {{stretch}}{{opacity}}{{end}}" id="id_{{wid}}" wid="{{w.id}}">                      
                    {{if dbs.edit_mode}}                                            
                        <div class='drag_handle' id="dragid_{{wid}}" onclick="showControls('{{ w.id }}');"></div>
                        <!-- center edit icon shown on hover in edit-mode -->
                        <div class="grid-item-hover-icon"><i class="fas fa-edit"></i></div>
                    {{end}}
                    
                    <div id="card_update_{{w.id}}">                        
                        {{if (w.type=='Device')}}
                            {{dialog_id='edit_device_card'}}                       
                            {{includefileraw Dashboards/Cards/Internal/card_device.html}}
                        {{else if w.type=='Thermostat'}}
                            {{dialog_id='edit_thermostat_card'}}  
                            {{includefileraw Dashboards/Cards/Internal/card_thermostat.html}}
                        {{else if w.type=='Media'}}
                            {{dialog_id='edit_media_card'}}
                            {{includefileraw Dashboards/Cards/Internal/card_media.html}}
                        {{else if w.type=='Camera'}}
                            {{dialog_id='edit_camera_card'}}  
                            {{includefileraw Dashboards/Cards/Internal/card_camera.html}}
                        {{else if w.type=='Custom'}}
                            {{dialog_id='edit_custom_card'}}
                            {{cardfile='Dashboards/Cards/' | string.append w.card_file}}
                            {{includefileparms cardfile [w.id]}}
                        {{end}}
                    </div>
                    {{ if db.layout == 'MASONRY_RESIZEABLE' || db.layout == 'FIXED_RESIZEABLE' }}
                        {{if dbs.edit_mode}}                    
                            <div class="right-size-grip" id="rightid_{{wid}}"></div>
                            <div class="bottom-size-grip" id="bottomid_{{wid}}"></div>                          
                        {{end}}
                    {{end}}                                                      
                </div>
                {{if dbs.edit_mode}}      
                <div id="edit_controls_{{w.id}}">
                    {{includefileraw includes/dashboard_card_edit_controls.html}}
                </div>                 
                {{end}}
            {{end}}       
        </div>
{{end}}
        {{# add any dialogs needed for each card, we only need to include these if we are in edit mode}}
        {{# custom cards include their dialog with the card HTML}}
        {{if dbs.edit_mode}}
            {{for w in widgets}}
                {{if (w.type=='Device')}}
                    {{includefileraw Dashboards/Cards/Internal/card_device_dialogs.html}}
                {{else if w.type=='Thermostat'}}
                    {{includefileraw Dashboards/Cards/Internal/card_thermostat_dialogs.html}}
                {{else if w.type=='Media'}}
                    {{includefileraw Dashboards/Cards/Internal/card_media_dialogs.html}}
                {{else if w.type=='Camera'}}
                    {{includefileraw Dashboards/Cards/Internal/card_camera_dialogs.html}}            
                {{end}}
            {{end}}
        {{end}}