<%= form_for(@match) do |f| %>
  <% if @match.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@match.errors.count, "error") %> prohibited this match from being saved:</h2>

      <ul>
      <% @match.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div data-controller="match-data" 
     data-match-data-tournament-id-value="<%= @match.tournament.id %>"
     data-match-data-bout-number-value="<%= @match.bout_number %>"
     data-match-data-match-id-value="<%= @match.id %>">
  
  <div id="cable-status-indicator" data-match-data-target="statusIndicator" class="alert alert-secondary" style="padding: 5px; margin-bottom: 10px; border-radius: 4px;"></div>
  <h4>Bout <strong><%= @match.bout_number %></strong></h4>
  <% if @mat %>
    <% queue_matches = @queue_matches || @mat.queue_matches %>
    <div style="margin-bottom: 10px;">
      <% queue_matches.each_with_index do |queue_match, index| %>
        <% queue_label = "Queue #{index + 1}" %>
        <% if queue_match %>
          <% button_class = queue_match.id == @match.id ? "btn btn-success btn-sm" : "btn btn-primary btn-sm" %>
          <%= link_to "#{queue_label}: Bout #{queue_match.bout_number}", mat_path(@mat, bout_number: queue_match.bout_number), class: button_class %>
        <% else %>
          <button type="button" class="btn btn-default btn-sm" disabled><%= "#{queue_label}: Not assigned" %></button>
        <% end %>
      <% end %>
    </div>
  <% end %>
  <h4>Bracket Position: <strong><%= @match.bracket_position %></strong></h4>
  
  <div data-controller="wrestler-color">
    <table class="table">
      <thead>
          <tr>
            <th>Name: <%= @wrestler1_name %> <select id="w1-color" data-wrestler-color-target="w1ColorSelect" data-action="change->wrestler-color#changeW1Color">
                <option value="green">Green</option>
                <option value="red">Red</option>
            </select>
            <br>School: <%= @wrestler1_school_name %>
            <br>Last Match: <%= @wrestler1_last_match && @wrestler1_last_match.finished_at ? time_ago_in_words(@wrestler1_last_match.finished_at) : "N/A" %></th>
            <th>Name: <%= @wrestler2_name %> <select id="w2-color" data-wrestler-color-target="w2ColorSelect" data-action="change->wrestler-color#changeW2Color">
                <option value="red">Red</option>
                <option value="green">Green</option>
            </select>
            <br>School: <%= @wrestler2_school_name %>
            <br>Last Match: <%= @wrestler2_last_match && @wrestler2_last_match.finished_at ? time_ago_in_words(@wrestler2_last_match.finished_at) : "N/A" %></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><%= @wrestler1_name %> Stats: <br><%= f.text_area :w1_stat, cols: "30", rows: "10", data: { match_data_target: "w1Stat" } %></td>
            <td><%= @wrestler2_name %> Stats: <br><%= f.text_area :w2_stat, cols: "30", rows: "10", data: { match_data_target: "w2Stat" } %></td>
          </tr>
          <tr>
            <td><%= @wrestler1_name %> Scoring <br><button id="w1-takedown" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Takedown" data-action="click->match-data#updateW1Stats" data-match-data-text="T3">T3</button>
            <button id="w1-escape" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Escape" data-action="click->match-data#updateW1Stats" data-match-data-text="E1">E1</button>
            <button id="w1-reversal" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Reversal" data-action="click->match-data#updateW1Stats" data-match-data-text="R2">R2</button>
            <button id="w1-nf2" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Nf2" data-action="click->match-data#updateW1Stats" data-match-data-text="N2">N2 </button>
            <button id="w1-nf3" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Nf3" data-action="click->match-data#updateW1Stats" data-match-data-text="N3">N3</button>
            <button id="w1-nf4" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Nf4" data-action="click->match-data#updateW1Stats" data-match-data-text="N4">N4</button>
            <button id="w1-nf5" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Nf5" data-action="click->match-data#updateW1Stats" data-match-data-text="N5">N5</button>
            <button id="w1-penalty" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Penalty" data-action="click->match-data#updateW1Stats" data-match-data-text="P1">P1</button>
            <button id="w1-penalty2" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Penalty2" data-action="click->match-data#updateW1Stats" data-match-data-text="P2">P2</button></td>
            <td><%= @wrestler2_name %> Scoring <br><button id="w2-takedown" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Takedown" data-action="click->match-data#updateW2Stats" data-match-data-text="T3">T3</button>
            <button id="w2-escape" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Escape" data-action="click->match-data#updateW2Stats" data-match-data-text="E1">E1</button>
            <button id="w2-reversal" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Reversal" data-action="click->match-data#updateW2Stats" data-match-data-text="R2">R2</button>
            <button id="w2-nf2" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Nf2" data-action="click->match-data#updateW2Stats" data-match-data-text="N2">N2</button>
            <button id="w2-nf3" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Nf3" data-action="click->match-data#updateW2Stats" data-match-data-text="N3">N3</button>
            <button id="w2-nf4" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Nf4" data-action="click->match-data#updateW2Stats" data-match-data-text="N4">N4</button>
            <button id="w2-nf5" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Nf5" data-action="click->match-data#updateW2Stats" data-match-data-text="N5">N5</button>
            <button id="w2-penalty" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Penalty" data-action="click->match-data#updateW2Stats" data-match-data-text="P1">P1</button>
            <button id="w2-penalty2" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Penalty2" data-action="click->match-data#updateW2Stats" data-match-data-text="P2">P2</button></td>
          </tr>
          <tr>
            <td><%= @wrestler1_name %> Choice <br><button id="w1-top" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Top" data-action="click->match-data#updateW1Stats" data-match-data-text="|Chose Top|">Chose Top</button>
            <button id="w1-bottom" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Bottom" data-action="click->match-data#updateW1Stats" data-match-data-text="|Chose Bottom|">Chose Bottom</button>
            <button id="w1-neutral" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Neutral" data-action="click->match-data#updateW1Stats" data-match-data-text="|Chose Neutral|">Chose Neutral</button>
            <button id="w1-defer" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Defer" data-action="click->match-data#updateW1Stats" data-match-data-text="|Deferred|">Deferred</button></td>
            <td><%= @wrestler2_name %> Choice <br><button id="w2-top" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Top" data-action="click->match-data#updateW2Stats" data-match-data-text="|Chose Top|">Chose Top</button>
            <button id="w2-bottom" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Bottom" data-action="click->match-data#updateW2Stats" data-match-data-text="|Chose Bottom|">Chose Bottom</button>
            <button id="w2-neutral" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Neutral" data-action="click->match-data#updateW2Stats" data-match-data-text="|Chose Neutral|">Chose Neutral</button>
            <button id="w2-defer" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Defer" data-action="click->match-data#updateW2Stats" data-match-data-text="|Deferred|">Deferred</button></td>
          </tr>
          <tr>
            <td><%= @wrestler1_name %> Warnings <br><button id="w1-stalling" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Stalling" data-action="click->match-data#updateW1Stats" data-match-data-text="S">Stalling</button>
            <button id="w1-caution" type="button" class="btn btn-success btn-sm" data-wrestler-color-target="w1Caution" data-action="click->match-data#updateW1Stats" data-match-data-text="C">Caution</button></td>
            <td><%= @wrestler2_name %> Warnings <br><button id="w2-stalling" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Stalling" data-action="click->match-data#updateW2Stats" data-match-data-text="S">Stalling</button>
            <button id="w2-caution" type="button" class="btn btn-danger btn-sm" data-wrestler-color-target="w2Caution" data-action="click->match-data#updateW2Stats" data-match-data-text="C">Caution</button></td>
          </tr>
          <tr>
            <td>Match Options <br><button type="button" class="btn btn-primary btn-sm" data-action="click->match-data#endPeriod">End Period</button></td>
            <td></td>
          </tr>
          <tr>
            <td>
              <h5><%= @wrestler1_name %> Timer Controls</h5>
              Injury Time (90 second max): <span id="w1-injury-time">0 sec</span>
              <button type="button" data-action="click->match-data#startW1InjuryTimer" class="btn btn-primary btn-sm">Start</button>
              <button type="button" data-action="click->match-data#stopW1InjuryTimer" class="btn btn-primary btn-sm">Stop</button>
              <button type="button" data-action="click->match-data#resetW1InjuryTimer" class="btn btn-primary btn-sm">Reset</button>
              <br><br>
              Blood Time (600 second max): <span id="w1-blood-time">0 sec</span>
              <button type="button" data-action="click->match-data#startW1BloodTimer" class="btn btn-primary btn-sm">Start</button>
              <button type="button" data-action="click->match-data#stopW1BloodTimer" class="btn btn-primary btn-sm">Stop</button>
              <button type="button" data-action="click->match-data#resetW1BloodTimer" class="btn btn-primary btn-sm">Reset</button>
            </td>
            <td>
              <h5><%= @wrestler2_name %> Timer Controls</h5>
              Injury Time (90 second max): <span id="w2-injury-time">0 sec</span>
              <button type="button" data-action="click->match-data#startW2InjuryTimer" class="btn btn-primary btn-sm">Start</button>
              <button type="button" data-action="click->match-data#stopW2InjuryTimer" class="btn btn-primary btn-sm">Stop</button>
              <button type="button" data-action="click->match-data#resetW2InjuryTimer" class="btn btn-primary btn-sm">Reset</button>
              <br><br>
              Blood Time (600 second max): <span id="w2-blood-time">0 sec</span>
              <button type="button" data-action="click->match-data#startW2BloodTimer" class="btn btn-primary btn-sm">Start</button>
              <button type="button" data-action="click->match-data#stopW2BloodTimer" class="btn btn-primary btn-sm">Stop</button>
              <button type="button" data-action="click->match-data#resetW2BloodTimer" class="btn btn-primary btn-sm">Reset</button>
            </td>
          </tr>
        </tbody>
    </table>
  </div><!-- End of wrestler-color controller div -->

  <br>
  <br>
  <br>
  <%= render "matches/match_results_fields", f: f, redirect_path: @match_results_redirect_path %>
</div><!-- End of match-data controller div -->
<% end %><!-- End of form_for -->
