<div class="card">
  <div class="info">
    <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=65>
    <div class="text text-color">
      <p>FirstName LastName</p>
      <p class="darker">Last call: <%= Time.now %></p>
    </div>
  </div>
  <div class="call">
    <%= link_to "#", 'data-toggle':"modal", 'data-target':"#myModal" do  %>
      <i class="fas fa-phone"></i>
    <% end %>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content modal-color">
                <div class="modal-header">
                  <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do  %>
                    <i class="fas fa-times-circle"></i>
                  <% end %>
                  <div class="container">
                    <div class="modal-container">
                      <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=150>
                      <div class="modal-text">
                        <h4 class="modal-title" id="myModalLabel">Calling</h4>
                        <h4><strong>FirstName LastName</strong></h4>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
