<% @posts.each do |post| %>
  <div class="row">
    <div class="leftcolumn">
      <div class="card">
        <%# javascript_path 'custom/tr' %>
        <h2 lang="ru"><%= post.title %></h2>
        <p lang="ru"><%= post.body %></p>
        <button id="myBtn">Open Modal</button>

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

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p><%= post.translation %></p>
          </div>

        </div>
      </div>
    </div>
  </div>
<% end %>
<%= will_paginate class: "apple_pagination" %>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.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>