<h1>Spectating Match: Bout <%= @match.bout_number %></h1>
<h2><%= @match.weight.max %> lbs</h2>
<h3><%= @tournament.name %></h3>

<div data-controller="match-spectate"
     data-match-spectate-match-id-value="<%= @match.id %>">

  <div id="cable-status-indicator" 
       data-match-spectate-target="statusIndicator" 
       class="alert alert-secondary" 
       style="padding: 5px; margin-bottom: 10px; border-radius: 4px;"></div>

  <% unless @match.finished %>
    <div data-match-spectate-target="scoreboardContainer" style="margin-bottom: 20px;">
      <%= render "tournaments/live_score_card",
        source_mode: "websocket",
        show_mat_header: false,
        show_details: false,
        mat: @match.mat,
        match: @match,
        tournament: @tournament %>
    </div>
  <% end %>

  <div class="match-details">
    <div class="wrestler-info wrestler1">
      <h4><%= @wrestler1_name %> (<%= @wrestler1_school_name %>)</h4>
      <div class="stats">
        <strong>Stats:</strong>
        <pre data-match-spectate-target="w1Stats"><%= @match.w1_stat %></pre> 
      </div>
    </div>
    
    <div class="wrestler-info wrestler2">
      <h4><%= @wrestler2_name %> (<%= @wrestler2_school_name %>)</h4>
      <div class="stats">
        <strong>Stats:</strong>
        <pre data-match-spectate-target="w2Stats"><%= @match.w2_stat %></pre>
      </div>
    </div>
    
    <div class="match-result">
      <h4>Result</h4>
      <p><strong>Winner:</strong> <span data-match-spectate-target="winner"><%= @match.winner_id ? @match.winner.name : '-' %></span></p>
      <p><strong>Win Type:</strong> <span data-match-spectate-target="winType"><%= @match.win_type || '-' %></span></p>
      <p><strong>Score:</strong> <span data-match-spectate-target="score"><%= @match.score || '-' %></span></p>
      <p><strong>Finished:</strong> <span data-match-spectate-target="finished"><%= @match.finished ? 'Yes' : 'No' %></span></p>
    </div>
  </div>

</div>

<style>
  .match-details {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  .wrestler-info {
    border: 1px solid #ccc;
    padding: 15px;
    width: 40%;
  }
  .wrestler-info pre {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    padding: 10px;
    white-space: pre-wrap; /* Allow text wrapping */
    word-wrap: break-word; /* Break long words */
    max-height: 300px; /* Optional: limit height */
    overflow-y: auto; /* Optional: add scroll if needed */
  }
  .match-result {
    border: 1px solid #ccc;
    padding: 15px;
    width: 15%;
  }
  .match-result span {
    font-weight: normal;
  }
  /* REMOVE Status Indicator Background Styles 
  #cable-status-indicator {
    transition: background-color 0.5s ease, color 0.5s ease; 
  }
  #cable-status-indicator.status-connecting {
    background-color: #ffc107; 
    color: #333;
  }
  #cable-status-indicator.status-connected {
    background-color: #28a745; 
    color: white;
  }
  #cable-status-indicator.status-disconnected {
    background-color: #dc3545; 
    color: white;
  }
  */
</style> 
