<%= content_for :meta do %>
  <meta name="project-id" content="<%= @video.project_id %>">
<% end %>

<main class="p-3" style="flex:2">
  <div class="text-right">
    <div>
      <% if @video.report_published? %>
        <%= link_to fa_icon("file-text", text: "Unpublish"), [@video, :report_publications], method: :delete, class: "btn btn-danger btn-sm" %>
      <% else %>
        <%= link_to fa_icon("file-text", text: "Publish"), [@video, :report_publications], method: :post, class: "btn btn-primary btn-sm" %>
      <% end %>
      <%= button_to_release_report @video, content: fa_icon("print", text: t(".actions.create_release_report")) %>
    </div>
  </div>
  <% if @video_analysis_presenter.stale? %>
    <div class="alert alert-warning">
      <%= fa_icon "warning" %> Contracts have been added or imported since this video file has been uploaded. You
      must <%= link_to "re-analyze this video", [@video, :video_analyses], method: :post %> otherwise the new contracts
      will not be included in the analysis.
    </div>
  <% end %>

  <div class="row no-gutters">
    <div class="col-lg-6 mb-2">
      <div class="card col-lg-12 p-0">
        <div class="card-header d-flex flex-row justify-content-between align-items-center">
          <h5 class="d-inline-block"> <%= @video.name ? @video.name : @video.filename  %> (<%= @video.project.name %>)</h5>
          <div class="btn-group">
            <%= button_tag fa_icon("download", text: "EDLs"), class: "btn btn-primary btn-sm dropdown-toggle border", data: { toggle: "dropdown", boundary: "window" }, aria: { haspopup: true, expanded: false } %>
            <div class="dropdown-menu dropdown-menu-right">
              <%= link_to_edl_file_download @video %>
              <%= link_to_graphics_only_edl_file_download @video %>
              <%= link_to_audio_only_edl_file_download @video %>
            </div>
          </div>
        </div>
        <div class="card-body">
          <%= video_tag @video_analysis_presenter.video_url, data: { behavior: "video-player-with-analysis", video_id: @video.id } %>
          <div class="mt-2">
            <%= render "video_analyses/actions", video: @video %>
            <%= render "video_analyses/keyboard_shortcuts" %>
          </div>
        </div>
      </div>
      <div class="card col-lg-12 p-0">
        <div class="card-header">
          <div>
            <h5>EDL Events</h5>
          </div>
        </div>
        <div class="d-flex justify-content-end p-3">
          <div class="input-group w-25">
            <%= text_field_tag "go_to", "", id: "go_to", class: "form-control form-control-sm", placeholder: "00:00:00:00" %>
            <div class="input-group-append">
              <%= button_tag "Go", id: "go_button", class: "btn btn-primary btn-sm" %>
            </div>
          </div>
        </div>
        <div class="table-responsive" style="height: 250px;">
          <table id="edl_events_list" class="table-striped table-sm w-100" style="table-layout: fixed;">
            <thead>
            <tr>
              <th>Channel</th>
              <th>Source</th>
              <th>Clip</th>
              <th>TC In</th>
              <th>TC Out</th>
            </tr>
            </thead>
            <tbody>
            <% @video_analysis_presenter.all_tracks_edl_events.each do |edl_event| %>
              <tr>
                <td><%= edl_event.channel %></td>
                <td><%= edl_event.source_file_name %></td>
                <td><%= edl_event.clip_name %></td>
                <td data-timecode-in="<%= edl_event.timecode_in %>"><%= edl_event.timecode_in %></td>
                <td><%= edl_event.timecode_out %></td>
              </tr>
            <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-lg-6 mb-2">
      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <%= link_to "Video", "#video_tab", class: "nav-link active", data: { toggle: "tab" } %>
        </li>
        <li class="nav-item">
          <%= link_to "Graphics", "#graphics_tab", class: "nav-link", data: { toggle: "tab" } %>
        </li>
        <li class="nav-item">
          <%= link_to "Audio", "#audio_tab", class: "nav-link", data: { toggle: "tab" } %>
        </li>
        <li class="nav-item">
          <%= link_to "Issues & Concerns", "#issues_and_concerns_tab", class: "nav-link", data: { toggle: "tab" } %>
        </li>
        <li class="nav-item">
          <%= link_to "Notes", "#notes", class: "nav-link", data: { toggle: "tab" } %>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane show active" id="video_tab" role="tabpanel" aria-labelledby="video-tab">
          <div class="row no-gutters">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>AI Matches</h5>
                </div>
                <div class="card-body overflow-auto p-0" style="height: 340px;">
                  <div class="table-responsive">
                    <table class="table-striped table-sm w-100" style="table-layout: fixed;">
                      <thead>
                      <tr>
                        <th style="width: 5%;"></th>
                        <th style="">EDL #</th>
                        <th style="">EDL TC</th>
                        <th style="">VID TC</th>
                        <th style="">Name</th>
                        <th style="">Photo</th>
                        <th style="width: 15%;"></th>
                      </tr>
                      </thead>
                      <tbody id="suggested_matches">
                        <% @video_analysis_presenter.chronological_appearances.each do |match| %>
                          <% if match.respond_to?(:file_info) && match.file_info.present? %>
                            <tr class="releasable-match" data-confirmed="<%=@video.has_confirmed_release?(match) && @video.video_release_confirmations.any? { |video_release_confirmation| video_release_confirmation.file_info_id == match.file_info.id } %>" data-time="<%= match.elapsed_time_until_appearance %>">
                              <td><%= fa_icon("check-circle", style: "font-size:24px;color:green", "data-ujs-target" => "match-confirmed-check") %></td>
                              <td></td>
                              <td><%= match.timecode_in %></td>
                              <td><a data-behavior="seekable-timecode"><%= match.appears_at_timecode %></a></td>
                              <td></td>
                              <td></td>
                              <td>
                                <%= button_to_video_release_confirmation @video, match, additional_video_release_params: { file_info_id: match.file_info.id }, classes: "btn btn-success btn-sm" do %>
                                    <%= fa_icon "plus" %>
                                <% end %>
                              </td>
                            </tr>
                          <% elsif match.photo.attached? %>
                            <tr class="releasable-match" id="<%= dom_id(match) %>" data-confirmed="<%= @video.has_confirmed_release?(match) %>" data-time="<%= match.elapsed_time_until_appearance %>">
                              <td><%= fa_icon("check-circle", style: "font-size:24px;color:green", "data-ujs-target" => "match-confirmed-check") %></td>
                              <td> </td>
                              <td>N/A</td>
                              <td><a data-behavior="seekable-timecode"><%= match.appears_at_timecode %></a></td>
                              <td><%= match.name %></td>
                              <td><%= image_tag thumbnail_variant(match.photo), class: "img-fluid figure-img" %></td>
                              <td>
                                <%= button_to_video_release_confirmation @video, match, classes: "btn btn-success btn-sm" do %>
                                  <%= fa_icon "plus" %>
                                <% end %>
                              </td>
                            </tr>
                          <% end %>
                        <% end %>
                      </tbody>
                    </table>
                  </div>
                  <div data-ujs-target="video-analysis-msg">
                    <% # Init the video player and the recommendations %>
                    <%= javascript_tag nonce: true do %>
                      $(document).ready(function() {
                        var bookmarks = <%= raw @video_analysis_presenter.bookmarks.to_json %>;
                        var player = $("[data-behavior=video-player-with-analysis]");
                        App.VideoAnalysis.initPlayerWithAnalysis(player, bookmarks);
                      });
                    <% end %>
                    <% if @video.analysis_pending? %>
                      <div class="p-3 text-center text-muted">
                        <%= fa_icon "cog spin" %> Video is still being analyzed
                      </div>
                    <% elsif @video.analysis_not_started? %>
                      <div class="text-center">
                        <%= link_to "Analyze Video", "#", class: "btn btn-primary btn-sm", method: :post %>
                      </div>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>Added to Report</h5>
                </div>
                <div class="overflow-auto" id="video_release_confirmations" style="height: 400px;">
                  <%= render "video_analyses/video_release_confirmations", video_release_confirmations: @video_release_confirmations %>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="graphics_tab" role="tabpanel" aria-labelledby="graphics-tab">
          <div class="row no-gutters">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>AI Matches</h5>
                </div>

                <div class="card-body overflow-auto p-0" style="height: 340px;">
                  <div class="table-responsive">
                    <table class="table-striped table-sm w-100" style="table-layout: fixed;">
                      <thead>
                      <tr>
                        <th style="width: 5%;"></th>
                        <th style="">EDL #</th>
                        <th style="">EDL TC</th>
                        <th style="">VID TC</th>
                        <th style="">Filename</th>
                        <th style="width: 15%;"></th>
                      </tr>
                      </thead>
                      <tbody id="graphics_elements_matches">
                      <% @video_analysis_presenter.chronological_graphics_matches.each do |match| %>
                        <tr class="graphics-match" data-confirmed="<%= match.confirmed %>" data-time="<%= match.elapsed_time_until_appearance %>">
                          <td><%= fa_icon("check-circle", style: "font-size:24px;color:green", "data-ujs-target" => "graphics-confirmed-check") %></td>
                          <td></td>
                          <td><%= match.timecode_in %></td>
                          <td><a data-behavior="seekable-timecode"><%= match.appears_at_timecode %></a></td>
                          <td><%= match.filename %></td>
                          <td>
                            <%= button_to new_video_video_analyses_graphics_element_path(@video),
                                class: "btn btn-success btn-sm",
                                form: { data: { ujs_target: "graphics-element-form" } },
                                params: { graphics_element: { text: "", time_elapsed: match.start_time, edl_type: "graphics" }, matched_file_name: match.filename },
                                method: :get,
                                form_class: "text-center",
                                remote: true do %>
                                <%= fa_icon "plus" %>
                            <% end %>
                          </td>
                        </tr>
                      <% end %>
                      </tbody>
                    </table>
                  </div>

                  <div data-ujs-target="video-analysis-msg">
                    <% if @video.analysis_pending? %>
                      <div class="p-3 text-center text-muted">
                        <%= fa_icon "cog spin" %> Video is still being analyzed
                      </div>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>Added to Report</h5>
                </div>
                <div class="overflow-auto" id="graphics_elements_list" style="height: 400px;">
                  <%= render "video_analyses/graphics_elements", graphics_elements: @graphics_elements_data.graphics_elements %>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="audio_tab" role="tabpanel" aria-labelledby="audio-tab">
          <div class="row no-gutters">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>AI Matches</h5>
                </div>

                <div class="overflow-auto" style="height: 340px;">
                  <div class="table-responsive">
                    <table class="table-striped table-sm w-100" style="table-layout: fixed;">
                      <thead>
                      <tr>
                        <th style="width: 5%;"></th>
                        <th style="">EDL #</th>
                        <th style="">EDL TC</th>
                        <th style="">VID TC</th>
                        <th style="">Filename</th>
                        <th style="width: 10%;"></th>
                      </tr>
                      </thead>
                      <tbody id="audio_matches">
                      <% @video_analysis_presenter.chronological_audio_matches.each do |match| %>
                        <tr class="releasable-match" data-confirmed="<%= match.confirmed %>" data-time="<%= match.elapsed_time_until_appearance %>">
                          <td><%= fa_icon("check-circle", style: "font-size:24px;color:green", "data-ujs-target" => "match-confirmed-check") %></td>
                          <td></td>
                          <td><%= match.timecode_in %></td>
                          <td><a data-behavior="seekable-timecode"><%= match.appears_at_timecode %></a></td>
                          <td><%= match.presented_filename %></td>
                          <td>
                            <%= button_to new_video_video_analyses_audio_confirmation_path(@video),
                                class: "btn btn-success btn-sm",
                                form: { data: { ujs_target: "audio-confirmation-form" } },
                                params: { audio_confirmation: { confirmation_type: match.confirmation_type, time_elapsed: match.start_time, composer_info: match.composer_info, publisher_info: match.publisher_info, catalog: match.catalog, title: match.title, edl_type: match.edl_type }, matched_file_name: match.filename },
                                method: :get,
                                remote: true,
                                data: { disable_with: t("shared.disable_with") } do %>
                                <%= fa_icon "plus" %>
                            <% end %>
                          </td>
                        </tr>
                      <% end %>
                      </tbody>
                    </table>
                  </div>

                  <div data-ujs-target="video-analysis-msg">
                    <% if @video.analysis_pending? %>
                      <div class="p-3 text-center text-muted">
                        <%= fa_icon "cog spin" %> Video is still being analyzed
                      </div>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <h5>Added to Report</h5>
                </div>
                <div class="overflow-auto" id="audio_confirmations" style="height: 400px;">
                  <%= render "video_analyses/audio_confirmations", audio_confirmations: @audio_confirmations %>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="issues_and_concerns_tab" role="tabpanel" aria-labelledby="issues-and-concerns-tab">
          <div>
            <div class="card">
              <div class="card-header">
                <h5>Added to Report</h5>
              </div>
              <div class="overflow-auto" id="issues_and_concerns_list" style="height: 660px;">
                <%= render "video_analyses/unreleased_appearances", unreleased_appearances: @unreleased_appearances_data.unreleased_appearances %>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="notes" role="tabpanel" aria-labelledby="notes">
          <div>
            <div class="card">
              <div class="card-header">
                <h5>Notes</h5>
              </div>
              <div class="border bg-white rounded shadow-sm pb-3 table-responsive">
                <table class="table table-striped tr-px-4 align-all-middle">
                  <thead class="thead-light">
                    <tr>
                      <th><%= Bookmark.human_attribute_name(:category) %></th>
                      <th>Text</th>
                      <th>Video TC</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody id="video_bookmarks">
                    <% if @bookmarks.any? %>
                      <%= render partial: "bookmarks/bookmark", collection: @bookmarks %>
                    <% else %>
                      <%= render partial: "bookmarks/empty_bookmarks" %>
                    <% end %>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <% project_feature @video.project, :talent_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#talent_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Talent Releases
            </h5>
          </div>
          <div class="collapse show" id="talent_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: video_video_analyses_talent_releases_path(@video), layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), video_video_analyses_talent_releases_path(@video), class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="talent_releases">
                <%= render "releasables", releasables: @talent_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <% project_feature @video.project, :appearance_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#appearance_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Appearance Releases
            </h5>
          </div>
          <div class="collapse show" id="appearance_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: video_video_analyses_appearance_releases_path(@video), layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), video_video_analyses_appearance_releases_path(@video), class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="appearance_releases">
                <%= render "releasables", releasables: @appearance_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <% project_feature @video.project, :location_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#location_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Location Releases
            </h5>
          </div>
          <div class="collapse show" id="location_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: video_video_analyses_location_releases_path(@video), layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), video_video_analyses_location_releases_path(@video), class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="location_releases">
                <%= render "releasables", releasables: @location_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <% project_feature @video.project, :acquired_media_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#acquired_media_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Acquired Media Releases (Footage & Stills)
            </h5>
          </div>
          <div class="collapse show" id="acquired_media_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: video_video_analyses_acquired_media_releases_path(@video), layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), video_video_analyses_acquired_media_releases_path(@video), class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="acquired_media_releases">
                <%= render "releasables", releasables: @acquired_media_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <% project_feature @video.project, :music_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#music_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Music Releases (Original Music Release)
            </h5>
          </div>
          <div class="collapse show" id="music_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: [@video, :video_analyses, :music_releases], layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), [@video, :video_analyses, :music_releases], class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="music_releases">
                <%= render "releasables", releasables: @music_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <% project_feature @video.project, :material_release do %>
    <div class="row mb-2">
      <div class="col-12">
        <div class="card">
          <div class="card-header" data-target="#material_releases_section" data-toggle="collapse">
            <h5>
              <span class="collapse-indicator"></span>
              Material Releases (Products / Logos)
            </h5>
          </div>
          <div class="collapse show" id="material_releases_section">
            <div class="card-body">
              <div class="mb-3">
                <%= bootstrap_form_tag url: video_video_analyses_material_releases_path(@video), layout: :inline, method: :get, remote: true do |form| %>
                  <%= form.search_field :query, class: "mt-1 mt-sm-0", hide_label: true, wrapper: false, placeholder: "Search...", value: params[:query] %>
                  <%= form.button fa_icon("search", text: "Search"), class: "btn btn-primary mt-1 mt-sm-0 ml-sm-1", data: { disable_with: fa_icon("spinner spin", text: "Searching") } %>
                  <%= link_to fa_icon("eraser", text: "Clear"), video_video_analyses_material_releases_path(@video), class: "btn btn-danger mt-1 mt-sm-0 ml-1", data: { disable_with: fa_icon("spinner spin", text: "Clearing") }, remote: true %>
                <% end %>
              </div>

              <ul class="list-inline overflow-auto text-nowrap" id="material_releases">
                <%= render "releasables", releasables: @material_releases, video: @video %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</main>
