{% load i18n static %}
<input type="hidden" name="{{ name }}" id="{{ attrs.id }}" value="{{ picture.name }}"/>
<input type="hidden" name="data_{{ name }}" id="data_{{ attrs.id }}" value="{{ picture.stream}}"/>
<img class="camera-preview" id="{{ attrs.id }}-image" width="{{ width }}" height="{{ height }}"/>
<script type="text/javascript">
    $(window).load(function () {
        var previous_data = $("#data_{{ attrs.id }}").attr('value');
        if (previous_data != "") {
            $("#{{ attrs.id }}-image").attr('src', 'data:image/jpeg;base64,' + previous_data);
        }
    });
    $(window).load(function () {
        SingleMonitor({swffile:"{% static 'webcam/jscam.swf' %}"});
    })
</script>
<br/>
{{ attrs.file }}
<input type="button" class="btn" value='{% trans 'Take a picture' %}'
       onclick="window.cameramonitor.show_monitor('{{ format }}', $('#data_{{ attrs.id }}'), $('#{{ attrs.id }}-image'))"/>
<input type="button" class="btn" value='{% trans 'Clear' %}'
       onclick="window.cameramonitor.clear($('#data_{{attrs.id}}'), $('#{{ attrs.id }}-image'))"/>