<% is_me = post.participant == current_participant %>
<div class="flex <%= is_me ? 'justify-end' : 'justify-start' %> mb-4 message-item" id="post_<%= post.id %>">
  <% unless is_me %>
    <div class="flex-shrink-0 mr-3">
      <!-- アバター代わりの国名バッジ -->
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-full text-xs font-bold border border-gray-300 bg-white text-gray-700 shadow-sm" title="<%= post.participant.power %>">
        <%= post.participant.power ? post.participant.power[0..1] : '?' %>
      </span>
    </div>
  <% end %>

  <div class="max-w-lg <%= is_me ? 'order-1' : 'order-2' %>">
    <div class="flex items-baseline space-x-2 mb-1 <%= is_me ? 'justify-end' : 'justify-start' %>">
      <% unless is_me %>
        <span class="text-xs font-bold text-gray-900"><%= post.participant.power %></span>
      <% end %>
      <span class="text-xs text-gray-500"><%= l post.created_at, format: :short %></span>
      <% if post.phase.present? %>
        <span class="text-xs bg-gray-100 px-1 rounded text-gray-600 border border-gray-200"><%= post.phase %></span>
      <% end %>
    </div>
    
    <div class="px-4 py-2 rounded-lg shadow-sm text-sm <%= is_me ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-white border border-gray-200 text-gray-900 rounded-bl-none' %>">
      <%= simple_format(h(post.body), {}, wrapper_tag: "div") %>
    </div>
  </div>
</div>
