[#if CONFIGURED!="1"#]
<div class="alert alert-warning"><#LANG_IMOU_NOT_CONFIGURED_HINT#></div>
[#endif CONFIGURED#]

[#if CONFIGURED="1"#]
<h4><#LANG_IMOU_SNAPSHOT#></h4>
<div style="max-width:960px">
 <img id="imou_snapshot" src="[#SNAPSHOT_URL#]&t=0" alt="" style="max-width:100%;background:#eee;min-height:120px"
      onload="imouSnapshotLoaded(true)" onerror="imouSnapshotLoaded(false)">
</div>
<p style="margin-top:8px">
 <button type="button" class="btn btn-default btn-sm" onclick="return imouSnapshotRefresh();"><i class="glyphicon glyphicon-refresh"></i> <#LANG_IMOU_SNAPSHOT_REFRESH#></button>
 <label class="checkbox-inline"><input type="checkbox" id="imou_snapshot_auto" onchange="imouSnapshotRefresh()"> <#LANG_IMOU_SNAPSHOT_AUTO#></label>
 <a class="btn btn-link btn-sm" href="[#SNAPSHOT_URL#]" target="_blank"><#LANG_IMOU_OPEN_NEW_WINDOW#></a>
 <small class="text-muted" id="imou_snapshot_time"></small>
</p>
<p class="text-muted"><#LANG_IMOU_SNAPSHOT_HELP#></p>
[#endif CONFIGURED#]

<h4 style="margin-top:25px"><#LANG_IMOU_RTSP#></h4>
<p class="text-muted"><#LANG_IMOU_RTSP_HELP#> <b>[#LOGIN#]</b>.</p>
<table class="table table-condensed">
[#begin STREAMS#]
 <tr>
  <td style="white-space:nowrap">[#TITLE#]</td>
  <td><code id="imou_rtsp_[#KEY#]">[#URL#]</code></td>
  <td style="white-space:nowrap">
   <button type="button" class="btn btn-default btn-xs" onclick="return imouCopy('imou_rtsp_[#KEY#]');"><i class="glyphicon glyphicon-copy"></i> <#LANG_IMOU_COPY#></button>
   <span id="imou_rtsp_check_[#KEY#]"></span>
  </td>
 </tr>
[#end STREAMS#]
</table>
[#if CONFIGURED="1"#]
<button type="button" class="btn btn-default" onclick="return imouRtspCheck();"><i class="glyphicon glyphicon-check"></i> <#LANG_IMOU_RTSP_CHECK#></button>
<span class="help-block"><#LANG_IMOU_RTSP_CHECK_HELP#></span>
[#endif CONFIGURED#]

<script type="text/javascript">
 var imouSnapshotTimer = 0;
 var imouSnapshotBusy = false;
 function imouSnapshotRefresh() {
  clearTimeout(imouSnapshotTimer);
  var img = document.getElementById('imou_snapshot');
  if (!img || imouSnapshotBusy) { return false; }
  imouSnapshotBusy = true;
  img.src = img.src.replace(/&t=\d+$/, '') + '&t=' + Date.now();
  return false;
 }
 function imouSnapshotLoaded(ok) {
  imouSnapshotBusy = false;
  var d = new Date();
  $('#imou_snapshot_time').text(ok ? d.toLocaleTimeString() : '<#LANG_IMOU_SNAPSHOT_ERROR#>');
  // the next picture is requested only after the previous one arrived, so requests never pile up
  if ($('#imou_snapshot_auto').is(':checked') && !document.hidden) {
   imouSnapshotTimer = setTimeout(imouSnapshotRefresh, 2000);
  }
 }
 function imouCopy(id) {
  var text = $('#' + id).text();
  if (navigator.clipboard && window.isSecureContext) {
   navigator.clipboard.writeText(text);
  } else {
   var t = $('<textarea>').val(text).appendTo('body').select();
   try { document.execCommand('copy'); } catch (e) {}
   t.remove();
  }
  return false;
 }
 function imouRtspCheck() {
  $('[id^=imou_rtsp_check_]').html('<i class="glyphicon glyphicon-hourglass"></i>');
  $.post(imouAjaxUrl + 'rtsp', {action: 'imou_doorbell'}, function (r) {
   if (!r.ok) {
    $('[id^=imou_rtsp_check_]').html('<span class="text-danger">' + r.error + '</span>');
    return;
   }
   for (var i = 0; i < r.streams.length; i++) {
    var s = r.streams[i];
    $('#imou_rtsp_check_' + s.key).html('<span class="' + (s.ok ? 'text-success' : 'text-danger') + '">' + $('<div>').text(s.text).html() + '</span>');
   }
  }, 'json');
  return false;
 }
</script>