{% load cms_tags static i18n %}
{% load RenderLandingIuput %}
<style>
.outer-div-parent {
width: 100%; 
text-align: center;
}
.inner-div-center {
display: inline-block; 
margin: 0 auto;
padding: 2%;
border-style: solid;
border-color:#537B79;
background-color: #D3EDEE;
width: 60%;
}
/* Create two equal columns that floats next to each other */
.two-column {
  float: left;
  padding: 1%;
}

/* Clear floats after the columns */
.one-row:after {
  content: "";
  display: table;
  clear: both;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

</style>
<div class='outer-div-parent call-to-action-div'>
    <div class='one-row inner-div-center'>
        <div class='two-column' style='width:15%'><img src="{% static 'images/pdf.png' %}" style='width: 100%;'></div>
        <div class='two-column' style='width:81%;text-align: left;'>
            <p style='color:#537B79' id="myHintOfModal"><u>{% trans 'Click here to download a PDF copy of this article' %}</u></p>
            <p>{% trans 'Save it to read later, or share with a colleague' %}</p>
        </div>
        <br style="clear:both;"/>
    </div>
</div>
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header" style='padding: 1%'>
        
        <h3>{% trans 'Wait! Get a PDF copy of this article so you can read or use it later' %}</h3>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body" style='padding: 3%'>
        {% for actionForm in instance.child_plugin_instances %}
            
          {% render_plugin actionForm %}
          
      
          
        {% endfor %}
      </div>
     
    </div>
  
  </div>
  
  <script>
  // Get the modal
  var modal = document.getElementById("myModal");
  
  // Get the button that opens the modal
  var hintOfModal = document.getElementById("myHintOfModal");
  
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal 
  hintOfModal.onclick = function() {
    modal.style.display = "block";
  }
  
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>