{% load fullurl %}
{% load tags %}
{% load static %}
{% load compress %}
{% load email_obfuscator %}


    <!-- Trigger/Open The Modal -->
    <span id="ShareButton" onclick="(function () { document.getElementById('ShareModal').style.display = 'block'; })(); return false;" class="cursor-pointer"><i class="fas fa-share"></i> Teilen </span>

    <!-- The Modal -->
    <div class="" id="modal-container">
      <modal></modal>
    </div>

    {% compress js  %}
    <script>
        Vue.component('modal', {
          props: ['title', 'link'],
          delimiters: ['<%', '%>'],
          template: `
          <div id="ShareModal" class="modal" onclick="function hide(e){ e.style.display='None'; } hide(this);" >
            <!-- Modal content -->
            <div class="modal-content" onclick="event.stopPropagation(); return;">
              <span id="ShareClose" onclick = "(function() { document.getElementById('ShareModal').style.display = 'none'; } )(); return false;" class="close">&times;</span>

              <div class=""> &nbsp; </div>
              <i class="fas fa-share"></i>
              <h3>Teilen</h3>
              <p>Informiere andere über dieses Projekt!</p>
              <div class=""> &nbsp; </div>
              <div class=""> &nbsp; </div>

              <div class="row">
                <div class="col-sm-4">
                  <div class="cursor-pointer" onclick="">
                    <a href="mailto:{{ object.email | obfuscate }}?subject={{  object.name  }}&body=Guten%20Tag!%0D%0A%0D%0AIch%20finde%20das%20folgende%20Projekt%20sehr%20interesant!%0D%0A%0D%0A{% fullurl 'product-detail-embed' pk=object.pk %}"><i class="fas fa-envelope"></i> <br>E-Mail versenden</a>
                  </div>
                </div>
                <div class="col-sm-4">
                </div>
                <div class="col-sm-4">
                </div>
              </div>

              <div class=""> &nbsp; </div>
              <div class=""> &nbsp; </div>

              <input type="text" value="&lt;iframe src=&quot;{% fullurl 'product-detail-type-embed' pk=object.pk type=object.type %}&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;myiFrame&quot; scrolling=&quot;yes&quot; frameborder=&quot;0&quot; marginheight=&quot;0px&quot; marginwidth=&quot;0px&quot; height=&quot;400px&quot; width=&quot;600px&quot; allowfullscreen&gt;&lt;/iframe&gt;" id="iframecode">
              <div class="cursor-pointer" onclick = "function copyiframecode() {
                    var copyText = document.getElementById('iframecode');
                    copyText.select();
                    copyText.setSelectionRange(0, 99999)
                    document.execCommand('copy');
                    alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
                  }; copyiframecode();" >

                <i class="fas fa-code"></i>
                <span>Code Kopieren</span>
              </div>
              <div class=""> &nbsp; </div>
              <div class=""> <span>Link</span> </div>

              <input type="text" value="{% fullurl 'product-detail-type-embed' pk=object.pk type=object.type %}" id="embedlink">
              <div class="cursor-pointer"  onclick = "function copyembedlinkcode() {
                    var copyText = document.getElementById('embedlink');
                    copyText.select();
                    copyText.setSelectionRange(0, 99999)
                    document.execCommand('copy');
                    alert('Der Text wurde in der Zwischenablage kopiert: ' + copyText.value);
                  }; copyembedlinkcode();" >

                <i class="fas fa-code"></i>
                <span>Code Kopieren</span>
              </div>
              <div class=""> &nbsp; </div><div class=""> &nbsp; </div>
            </div>
          </div>
          `
        })

        new Vue({

          el: '#modal-container',
          delimiters: ['<%', '%>'],

        })


    </script>
    {% endcompress %}
