<%= content_for :meta do %>
  <% if @project %>
    <meta name="project-id" content="<%= @project.id %>">
  <% end %>
  <% if @broadcast %>
    <meta name="broadcast-token" current="true" content="<%= @broadcast.token %>">
  <% end %>
  <% # Subscribe to Action Cable for every broadcast including those in multi-view %>
  <% @multi_view_broadcasts.each do |multi_view_broadcast| %>
    <% if multi_view_broadcast.token != @broadcast.token %>
      <meta name="broadcast-token" current="false" content="<%= multi_view_broadcast.token %>">
    <% end %>
  <% end %>
<% end %>

<% content_for :header do %>
  <header></header>
<% end %>

<div class="row no-gutters m-n3">
  <div class="col-lg-8 col-md-12 bg-black">
    <div class="d-flex justify-content-start align-items-center flex-row p-3 mb-5 bg-dark">
      <%= product_wordmark(:direct_me, class: 'navbar-brand text-white') %>
      <div class="ml-4 dropdown">
        <%= link_to "#", class: "btn btn-light dropdown-toggle text-white bg-black border-0 override-dropdown-show-state", role: "button", id: "dropdownMenuLink", data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } do %>
          <i class="fa fa-video-camera text-primary" aria-hidden="true"></i><span class="ml-2" id="selected_stream"><%= @broadcast.name %></span>
        <% end %>
        <div class="dropdown-menu bg-black" aria-labelledby="dropdownMenuLink">
          <h5 class="dropdown-header">Live Streams</h5>
          <%= link_to fa_icon("check", text: @broadcast.name.titleize), "#", data: { behavior: "play_stream"}, class: "dropdown-item active" %>
          <% @multi_view_broadcasts.each do |broadcast| %>
            <% if broadcast.id != @broadcast.id %>
              <% if params[:director_mode] %>
                <% if controller.class.module_parent.to_s == "Public" %>
                  <%= link_to broadcast.name.titleize, url_for(params.permit!.merge(director_mode: true, token: broadcast.token)), data: { behavior: "play_stream"}, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
                <% else %>
                  <%= link_to broadcast.name.titleize, url_for(params.permit!.merge(director_mode: true, id: broadcast.id)), data: { behavior: "play_stream"}, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
                <% end %>
              <% else %>
                <% if controller.class.module_parent.to_s == "Public" %>
                  <%= link_to broadcast.name.titleize, url_for(params.permit!.merge(token: broadcast.token).except(:director_mode)), data: { behavior: "play_stream"}, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
                <% else %>
                  <%= link_to broadcast.name.titleize, url_for(params.permit!.merge(id: broadcast.id).except(:director_mode)), data: { behavior: "play_stream"}, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        </div>
      </div>
      <% if @broadcast.director_mode_video_embed.present? %>
        <% if params[:director_mode] %>
          <div class="custom-control custom-switch ml-auto">
            <input type="checkbox" name="director_mode" value="true" class="custom-control-input" id="director_mode_switch" checked="checked" />
            <label class="custom-control-label text-white override-custom-control-label" for="director_mode_switch">Director Mode</label>
          </div>
          <%= link_to "Disable Director Mode", url_for(params.permit!.except(:director_mode)), class: "d-none", id: "director_mode_link" %>
        <% else %>
          <div class="custom-control custom-switch ml-auto">
            <input type="checkbox" name="director_mode" value="true" class="custom-control-input" id="director_mode_switch" />
            <label class="custom-control-label text-white override-custom-control-label" for="director_mode_switch">Director Mode</label>
          </div>
          <%= link_to "Enable Director Mode", url_for(params.permit!.merge(director_mode: true)), class: "d-none", id: "director_mode_link" %>
        <% end %>
      <% end %>
    </div>
    <div class="embed-responsive embed-responsive-16by9" id="video_content">
      <%= render partial: 'broadcasts/video', locals: { broadcast: @broadcast } %>
      <% if @broadcast.streamer_recording? && @broadcast.active? %>
        <%= javascript_tag nonce: true do %>
          new Clappr.Player({
          parentId: '#broadcast_video',
          source: "<%= @broadcast.full_live_stream_playback_url %>",
          width: '100%',
          height: '100%',
          mute: true,
          autoPlay: true,
          hlsMinimumDvrSize: 1
          });
        <% end %>
      <% end %>
    </div>
  </div>
  <div class="col-lg-4 col-md-12 bg-white p-3 min-vh-100 overflow-auto">
    <% unless controller.class.module_parent.to_s == "Public" %>
      <% if @multi_view_broadcasts.present? %>
        <% tokens = @multi_view_broadcasts.map(&:token) %>
        <div class="btn-group">
          <button type="button" class="btn btn-primary" id="broadcast_share_url" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token, multi_view_tokens: tokens) %>">Share URL</button>
          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <div class="dropdown-menu">
            <%= link_to t('.actions.reset_url'), [@project, @broadcast], method: :patch, class: "dropdown-item" %>
          </div>
        </div>
      <% else %>
        <div class="btn-group">
          <button type="button" class="btn btn-primary" id="broadcast_share_url" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token) %>">Share URL</button>
          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <div class="dropdown-menu">
            <%= link_to t('.actions.reset_url'), [@project, @broadcast], method: :patch, class: "dropdown-item" %>
          </div>
        </div>
      <% end %>
    <% end %>
    <%= link_to 'Video Conference', @conference_url, class: 'btn btn-primary', target: '_blank' %>
    <hr/>
    <ul class="nav nav-tabs override-nav-tabs mb-3">
      <li class="nav-item">
        <%= link_to "Takes", "#recordings", class: class_string("nav-link", "active" => !params[:active_tab].present?), data: { toggle: "tab" } %>
      </li>
      <li class="nav-item">
        <%= link_to "Files", "#files", class: class_string("nav-link", "active" => params[:active_tab] == "files"), data: { toggle: "tab" } %>
      </li>
    </ul>
    <div class="tab-content">
      <div class="<%= class_string("tab-pane fade show", "active" => !params[:active_tab].present?) %>" id="recordings">
        <div id="live_take">
          <%= render partial: 'broadcasts/live_take', locals: { broadcast: @broadcast } %>
        </div>
        <div id="broadcast_recordings">
          <%= render partial: 'broadcasts/broadcast_recordings', locals: { recordings: @recordings, broadcast: @broadcast } %>
        </div>
      </div>
      <div class="<%= class_string("tab-pane fade show", "active" => params[:active_tab] == "files") %>" id="files">
        <% if @multi_view_broadcasts.present? %>
          <ul class="nav nav-tabs">
            <% @multi_view_broadcasts.each_with_index do |mvb, index| %>
              <li class="nav-item">
                <%= link_to mvb.name, "#files_broadcast_#{mvb.token}", class: class_string("nav-link", "active" => (params[:active_files_tab] == mvb.token || (params[:active_files_tab].nil? && index == 0))), data: { toggle: "tab" } %>
              </li>
            <% end %>
          </ul>
          <div class="tab-content pt-4">
            <% @multi_view_broadcasts.each_with_index do |mvb, index| %>
              <div class="<%= class_string("tab-pane fade show", "active" => (params[:active_files_tab] == mvb.token || (params[:active_files_tab].nil? && index == 0))) %>" id="files_broadcast_<%= mvb.token %>">
                <%= render partial: 'broadcasts/files_section', locals: { broadcast: mvb, files: mvb.files } %>
              </div>
            <% end %>  
          </div>
        <% else %>
          <%= render partial: 'broadcasts/files_section', locals: { broadcast: @broadcast, files: @files } %>
        <% end %>
      </div>
    </div>
  </div>
</div>
