{{if w==null}}
{{widget_id=queries['widget_id']}}
{{w=widget_by_id widget_id}}
{{end}}
{{num_widgets = widget_count w.id}}
{{dbs=dashboards_ref}}

<div class="p-2" id="card_width_{{w.id}}">
        <div class=" mb-2 mr-2 ml-2">
            {{if w.show_name}}
            <div class="row justify-content-center align-items-center">
                
                    {{ camera_id_to_name w.camera_id }}
                
            </div>
            {{end}}
            <div class="row mr-1 ml-1 mb-1 justify-content-center align-items-center" id='camrow'>
                <a href="cameras.html?camera_id={{w.camera_id}}">
                <div >
                    {{if (camera_id_to_model w.camera_id)=='REOLINKDUO'}}
                    <canvas id="{{w.camera_id}}_0">
                    </canvas>
                    <canvas id="{{w.camera_id}}_1">
                    </canvas>
                    {{else}}
                    <canvas id="{{w.camera_id}}">
                    </canvas>
                    {{end}}        
                </div>
                </a>
            </div>
            <div class="row mr-1 ml-1 mb-1 justify-content-center align-items-center" id='camrow'>
                <button class="btn btn-danger" camid="{{w.camera_id}}" action="record"><i class="fas fa-video fa-lg"></i></button>
            </div>
                 

                
        </div>
</div>

<script type="text/javascript">
    
    {{camid = string.replace w.camera_id "-" ""}}
    $(document).ready(function () {
        {{if (camera_id_to_model w.camera_id) == 'REOLINKDUO'}}
            refresh_0{{camid}}();
            refresh_1{{camid}}();
        {{else}}
            refresh{{camid}}();
        {{end}}
    });

    function refresh{{camid}}()
    {       
        var w = document.getElementById('card_width_{{w.id}}').offsetWidth-20; 
        AjaxPostcam{{camid}}('action=updatecam&camid={{w.camera_id}}', 'cameras.html?camera_id="{{w.camera_id}}"&width='+w,"");           
    }

    function refresh_0{{camid}}()
    {
        var w = document.getElementById('card_width_{{w.id}}').offsetWidth-20;
        AjaxPostcam{{camid}}('action=updatecam&camid={{w.camera_id}}_0', 'cameras.html?camera_id={{w.camera_id}}&channel=0&width='+w,"_0");
    }

    function refresh_1{{camid}}()
    {                    
        var w = document.getElementById('card_width_{{w.id}}').offsetWidth-20;
        AjaxPostcam{{camid}}('action=updatecam&camid={{w.camera_id}}_1', 'cameras.html?camera_id={{w.camera_id}}&channel=1&width='+w,"_1");
    }

    function AjaxPostcam{{camid}}(data,page,channel){
        $.ajax({
            type: "POST",
            async: "true",
            url: '/'+page,
            cache:false,
            data: data,
            success: function (response) {        
                var img = new Image();
                img.onload = function () {   
                    var canvas = document.getElementById('{{w.camera_id}}'+channel);
                    var context = canvas.getContext("2d");
                    var w = img.width;
                    var h = img.height;       
                    canvas.setAttribute("width", w)
                    canvas.setAttribute("height", h)
                    context.drawImage(img, 0, 0);
                    //$grid.packery();    /* the image may resize the card so we need to force a layout of all cards so they do not overlap */      
                };  
           	    img.src = '/snapshots/'+'{{w.camera_id}}'+channel+'.jpg' + "?t=" + new Date().getTime();  
                $("#message").html("");
                if (channel == '') {
                     setTimeout('refresh{{camid}}()',500);
                }
                else if (channel == '_0') {
                    setTimeout('refresh_0{{camid}}()',500);
                }
                else {
                    setTimeout('refresh_1{{camid}}()',500);
                }                        
            },
            error: function(){
                //alert("Error");
            }
        });
    }

</script>