<style>
    .container{ 
      width: 65%; 
      margin: 0 auto;
      padding: 2em;  
      background-color: #fff;
      font-size: 1.2rem;
    }
    .logo{
      display: flex;
      justify-content: center;
       margin-bottom: 1em;
    }

    .search-btn{
      display: flex;
      justify-content: center;
    }

    .search-btn a{
      color: #fff;
      background-color: #2c7be5;
      border-color: #2c7be5;
      border: 1px solid transparent;
      padding: 0.3125rem 1rem;
      line-height: 2.5;
      font-size: 1em;
      border-radius: 0.25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .row {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      row-gap: 1em;
      column-gap: 1em;
      margin-top: 2em;
    }
    .row > div{
      flex-grow: 1;
    }

    .row .photo{
      flex-grow: 1;
    }
    .row .details{
      flex-grow: 2;
    }
    .row .instruments{
      flex-grow: 2;
    }
     .row .links{
      flex-grow: 1;
    }
  </style>
<section class="container">
  <div class="logo">
    <img src="<%= image_url("JK_Logo_blue-2021.png", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="JamKazam Logo" />
  </div>
  <p>
    Hi <%= @user.first_name -%>,
  </p>
  <p>
    The following musicians have joined JamKazam within the last week and have low internet 
    latency to you that will support enjoyable sessions. If you'd like to make more musical connections, 
    we encourage you to use the links below to send these new users a welcome message and 
    perhaps arrange a session to play together.
  </p>
  <% 
    @musicians_data.each do | data | -%>
     <%
      musicians = data[:musicians]
      latencies = data[:latencies]
      musicians.each do |musician|
        latency = latencies.find{|l| l[:user_id] == musician.id }
    -%>
      <div class="row">
        <div class="photo">
          <%= image_tag musician.photo_url.blank?? "avatar.png" : musician.photo_url, height: '32', width: '32', host: APP_CONFIG.action_mailer.assets_host -%>
        </div>
        <div class="details">
          <div><strong><%= musician.first_name %> <%= musician.last_name %></strong></div>
          <div>Latency To You: <%= latency_info(latency) %></div>
          <% if musician.last_active_timestamp -%>
          <div>Last Active On: <%= time_ago_in_words(Time.at(musician.last_active_timestamp)) %> ago</div>
          <% end -%>
        </div>
        <div class="instruments">
          <% musician.musician_instruments.each do |mi| -%>
            <div>
              <%= mi.description %>:&nbsp;<%= @instrument_proficiencies[mi.proficiency_level.to_s.to_sym] %>
            </div>
          <% end -%>
        </div>
        <div class="links">
          <div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=details" target="_blank">View Profile</a></div>
          <div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=message" target="_blank">Send Message</a></div>
          <div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=connect" target="_blank">Send Friend Request</a></div>
        </div>
      </div>
    <% end -%>   
  <% end -%>
  <br />
  <p>
    To find great musical matches across the entire JamKazam commiunity and make new connections, use the button below to access our musician search feature.
    This let you filter JamKazammers by latency, instruments, skill level, genre interests, last active day and more.
  </p>
  <br />
  <div class="search-btn">
    <a class="button" href="<%= APP_CONFIG.spa_origin -%>/friends" target="_blank">Search JamKazam Musicians</a>
  </div>
</section>