{% load i18n %}

{# z-index important for trumbowyg, set higher if not enough #}
<div id="rawupdate_modal_presenter" class="w3-modal" style="height:100%; z-index:99;">
  <div class="w3-modal-content spkc-modal-content">
    <header class="w3-container w3-teal">
      <span onclick="close_rawupdate_qrmodal(event)"
      class="w3-button w3-black w3-display-topright">&times;</span>
      <h2>{% trans "Share" %}</h2>
    </header>
    <div style="margin-bottom:10px">
      <div class="w3-container w3-padding w3-mobile" id="rawupdate_placeholder">
      </div>
    </div>
    <div class="w3-container w3-text-black">
      <div class="" id="rawupdate_remotelink_wrapper"  style="word-break: break-all">
        {# escapejs is a weaker escape, don't use it #}
        <a type="text" rel="nofollow" href="{{rawupdatelink}}{{rawupdatelink_extra}}" id="rawupdate_remotelink"></a>
        <span style="margin-left:10px;padding:1px 10px;white-space: nowrap;word-break: normal;display:inline-block" id="rawupdate_copy_clipboard" class="w3-round w3-grey">
          <i class="fas fa-clipboard" aria-label="{% trans 'Clipboard' %}"></i>
        </span>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
let rawupdate_remotelink = document.getElementById('rawupdate_remotelink');
let rawupdate_placeholder = document.getElementById('rawupdate_placeholder');
let rawupdate_presenter = document.getElementById('rawupdate_modal_presenter');
let rawupdate_copy_clipboard = document.getElementById('rawupdate_copy_clipboard');

remotelink_link.href = "{{hostpart}}{{rawupdatelink}}";
remotelink_link.text = "{{hostpart}}{{rawupdatelink}}";
let qr = qrcode(0, 'H');
qr.addData("{{hostpart}}{{rawupdatelink}}");
qr.make();
rawupdate_placeholder.innerHTML = qr.createImgTag(4);

async function link_to_clipboard(event){
  await navigator.clipboard.writeText(rawupdate_remotelink.href);
  rawupdate_copy_clipboard.firstElementChild.classList.replace("fa-clipboard", "fa-clipboard-check");
  rawupdate_copy_clipboard.classList.replace("w3-grey", "w3-green");
  await new Promise((resolve) => setTimeout(resolve, 3000));
  rawupdate_copy_clipboard.classList.replace("w3-green", "w3-grey");
  rawupdate_copy_clipboard.firstElementChild.classList.replace("fa-clipboard-check", "fa-clipboard");
  return false;
}
rawupdate_copy_clipboard.addEventListener("click", link_to_clipboard);


function open_rawupdate_qrmodal(){
  if(event)
    event.preventDefault();
  rawupdate_presenter.style.display='block';
  return false;
}


function close_rawupdate_qrmodal(event){
  if(event)
    event.preventDefault()
  presenter.style.display='none';
}
</script>
