{% load i18n %}


{# z-index important for trumbowyg, set higher if not enough #}
<div id="qrpresenter" class="w3-modal" style="height:100%; z-index:100;">
  <div class="w3-modal-content">
    <header class="w3-container w3-teal">
      <span onclick="close_qrmodal(); return false;"
      class="w3-button w3-black w3-display-topright">&times;</span>
      <h2>{% trans "QR/Export-Mode" %}</h2>
    </header>
    <div style="margin-bottom:10px">
      <div class="w3-container w3-cell w3-mobile">
        <canvas id="qrcanvas"></canvas>
      </div>
      <div id="use_access_token_wrapper" style="display:none" class="w3-container w3-cell w3-text-red w3-mobile">
        <label class="w3-left">
          <input type="checkbox" id="use_access_token" onchange="open_qrmodal()"{% if not request.is_owner %} checked="checked"{% endif %}/>
          {% trans "With access token" %}
        </label>
      </div>
    </div>
    <div class="w3-container w3-text-black">
      <div class="" id="remotelink_wrapper"  style="word-break: break-all">
        {# important for href check, elsewise same url #}
        {% trans "Link"%}: <a type="text" href="#" id="remotelink"></a>
      </div>
      <div id="rawlink_wrapper"  style="word-break: break-all">
        {# important for href check, elsewise same url #}
        <a href="#" id="rawlink">{% trans "Raw" %}</a>
      </div>
      <a style="display:none; word-break: break-all" id="exportlink" href="">{% trans 'Export' %}</a>
    </div>
    <div class="w3-container">
      <br/>
    </div>
  </div>
</div>

<script type="text/javascript">
var remotelink = "{{remotelink|escapejs}}";
var exportlink = "{{exportlink|escapejs}}";
var auth_token = "{{auth_token|default:''|escapejs}}";
function open_qrmodal(){
  let _qrcanvas = document.getElementById('qrcanvas');
  let remotelink_link = document.getElementById('remotelink');
  let use_access_token = document.getElementById('use_access_token');
  let use_access_token_wrapper = document.getElementById('use_access_token_wrapper');
  let rawlink_link = document.getElementById('rawlink');
  let rawlink_wrapper = document.getElementById('rawlink_wrapper');
  let exportlink_link = document.getElementById('exportlink');
  rawlink_wrapper.style.display = "block";
  let _remotelink = remotelink.slice();
  if (auth_token==""){
    use_access_token_wrapper.style.display = "none";
  } else {
    use_access_token_wrapper.style.display = "table-cell";
  }
  if (auth_token != "" && use_access_token.checked){
    if (_remotelink.slice(-1)=="?"){
      _remotelink = `${_remotelink}token=${auth_token}`;
    } else {
      _remotelink = `${_remotelink}&token=${auth_token}`;
    }
  }
  if (_remotelink.slice(-1)=="?"){
    rawlink_link.href = `${_remotelink}raw=true`;
  } else {
    rawlink_link.href = `${_remotelink}&raw=true`;
  }
  remotelink_link.href = _remotelink;
  remotelink_link.text = _remotelink;
  QRCode.toCanvas(
    _qrcanvas, _remotelink, { errorCorrectionLevel: 'H' },
    function (error) {
      if (error)
        console.error(error)
    }
  )
  if (exportlink != "" && exportlink_link.href != exportlink){
    exportlink_link.href = exportlink;
    exportlink_link.style.display = "block";
  } else {
    exportlink_link.href = "#";
    exportlink_link.style.display = "none";
  }
  document.getElementById('qrpresenter').style.display='block';
}


function close_qrmodal(){
  document.getElementById('qrpresenter').style.display='none'
}
</script>
