<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-6">
    <%= link_to game_boards_path(@game), class: "text-gray-500 hover:text-gray-700" do %>
      <i class="fa-solid fa-arrow-left mr-1"></i> 掲示板一覧に戻る
    <% end %>
  </div>

  <div class="bg-white shadow overflow-hidden sm:rounded-lg border border-gray-200">
    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
      <h3 class="text-lg leading-6 font-medium text-gray-900">新しい交渉用掲示板を作成</h3>
      <p class="mt-1 text-sm text-gray-500">
        交渉したい相手（国）を選択してください。選択した相手とあなただけの秘密の掲示板が作成されます。
      </p>
    </div>
    
    <div class="px-4 py-5 sm:p-6">
      <%= form_with model: [@game, @board], local: true, class: "space-y-6" do |f| %>
        <% if @board.errors.any? %>
          <div class="rounded-md bg-red-50 p-4 mb-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <i class="fa-solid fa-circle-xmark text-red-400"></i>
              </div>
              <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">入力内容にエラーがあります</h3>
                <div class="mt-2 text-sm text-red-700">
                  <ul role="list" class="list-disc pl-5 space-y-1">
                    <% @board.errors.full_messages.each do |message| %>
                      <li><%= message %></li>
                    <% end %>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        <% end %>

        <div>
           <label class="text-base font-medium text-gray-900">招待するメンバー</label>
           <p class="text-sm text-gray-500 mb-3">少なくとも1人以上選択してください。</p>
           
           <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
             <% if @participants.empty? %>
               <p class="text-sm text-gray-500 italic">招待可能な他のプレイヤーがいません。</p>
             <% else %>
               <% @participants.each do |participant| %>
                 <div class="relative flex items-start py-2 border rounded p-3 hover:bg-gray-50 cursor-pointer">
                   <div class="min-w-0 flex-1 text-sm">
                     <label for="participant_<%= participant.id %>" class="font-medium text-gray-700 select-none cursor-pointer flex items-center">
                       <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold border border-gray-200 mr-2 <%= power_color_class(participant.power) %>">
                         <%= participant.power %>
                       </span>
                       <%= participant.user.username %>
                     </label>
                   </div>
                   <div class="ml-3 flex items-center h-5">
                     <input id="participant_<%= participant.id %>" name="invited_participant_ids[]" value="<%= participant.id %>" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                   </div>
                 </div>
               <% end %>
             <% end %>
           </div>
        </div>

        <div class="pt-5 border-t border-gray-200 flex justify-end">
          <%= link_to "キャンセル", game_boards_path(@game), class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-3" %>
          <%= f.submit "掲示板を作成", class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
