{% load cms_tags static %}
{% 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'>
    <div class='one-row inner-div-center'>
        <div class='two-column' style='width:15%'><img src="{% static 'img/pdf.png' %}" style='width: 100%;'></div>
        <div class='two-column' style='width:81%;text-align: left;'>
            <p style='color:#537B79' id="myHintOfModal"><u>Click here to download a RDF copy of this article</u></p>
            <p>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">
        <span class="close">&times;</span>
        <h2>Wait! Get a PDF copy of this article so you can read or use it later</h2>
      </div>
      <div class="modal-body">
        {% for actionForm in instance.child_plugin_instances %}
            
          {% render_plugin actionForm %}
          
            <!-- <p style='text-align: center;'>We'll email it to you straight away</p>
            
            {% if actionForm %}
                {% if actionForm.is_multipart %}
                    <form enctype="multipart/form-data" method="POST" action="{% url 'call_to_action_email' %}">
                {% else %}
                    <form method="POST" action="{% url 'call_to_action_email' %}">
                {% endif %}
              {% csrf_token %}
                    <p class="required">
                        <input type="hidden" name="callToActionId" value="{{ instance.id }}" />
                        <label class="required" for="id_email">Email:</label>
                        
                        {% RenderLandingIuput request %}
                        
                    </p>
                    {{ actionForm }}
                {{ actionForm.as_p }}
                    
                <input type="submit" />
              </form>
            {% else %}
              {{ obj }}
            {% endif %} -->
          
        {% 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>