<div class="modal" id="<%= dom_id(releasable, "notes") %>" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Notes for <%= releasable.name %></h5>
        <%= button_tag type: "button", class: "close", data: { dismiss: "modal" }, aria: { label: "Close" } do %>
          <span aria-hidden="true">&times;</span>
        <% end %>
      </div>
      <div class="modal-body">
        <div class="list-group overflow-auto" style="height: 50vh">
          <% notes.each do |note| %>
            <div class="list-group-item">
              <p class="mb-1"><%= note.content %></p>
              <div class="d-flex w-100 justify-content-between">
                <small><%= mail_to note.email %></small>
                <small><%= time_ago_in_words note.created_at %> ago</small>
              </div>
            </div>
          <% end %>
        </div>
      </div>
      <div class="modal-footer">
        <%= button_tag "Close", class: "btn btn-secondary", type: "button", data: { dismiss: "modal" } %>
      </div>
    </div>
  </div>
</div>

