{{if w==null}}
	{{widget_id=queries['widget_id']}}
	{{w=widget_by_id widget_id}}
{{end}}
{{if db==null}}
	{{dashboard = queries['dashboard']}}
	{{db=dashboard_ref dashboard}}
{{end}}
{{if dbs==null}}
	{{dbs=dashboards_ref}}
{{end}}

{{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'}}        
        {{style_css=style_css | string.append 'position:fixed;left: ' | string.append position_left | string.append 'px; top: ' | string.append position_top | string.append 'px;'}}
    {{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_{{w.id}}" 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" onclick="showControls('{{ w.id }}');"><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_{{w.id}}"></div>
            <div class="bottom-size-grip" id="bottomid_{{w.id}}"></div>                          
        {{end}}
    {{end}}                                                      
</div>
{{if dbs.edit_mode}}      
<div id="edit_controls_{{w.id}}">
    {{includefileraw includes/dashboard_card_edit_controls.html}}
</div>                 
{{end}}
{{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}}