<%= 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 class="container-fluid py-3 border-bottom sticky-top bg-light">
    <div class="row align-items-center justify-content-center">
      <div class="col-4 text-center">
        <%= product_wordmark(:direct_me, class: 'navbar-brand') %>
      </div>
    </div>
  </header>
<% end %>

<div class="row">
  <div class="col-lg-8 col-md-12 mb-3">
    <div class="card shadow-sm">
      <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
          <h1 class="h3 m-0"><%= @broadcast.name %></h1>
          <div class="dropdown">
            <%= link_to "Switch View", "#", class: "btn btn-light border dropdown-toggle", role: "button", id: "dropdownMenuLink", data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } %>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
              <h5 class="dropdown-header">Live Streams</h5>
              <span class="dropdown-item active"><%= fa_icon("check", text: @broadcast.name.titleize) %></span>
              <% @multi_view_broadcasts.each do |broadcast| %>
                <% if broadcast.id != @broadcast.id %>
                  <%= link_to broadcast.name.titleize, broadcast.url, class: class_string("dropdown-item", "active" => @broadcast.id == broadcast.id) %>
                <% end %>
              <% end %>
              <h5 class="dropdown-header">Previous Sessions</h5>
              <div id="broadcast_recordings_nav">
                <% if @recordings.any? %>
                  <%= render partial: "broadcasts/broadcast_recording_nav", collection: @recordings, as: :broadcast_recording %>
                <% else %>
                  <p class="dropdown-item text-muted">Recordings will appear here</p>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body p-0">
        <div class="embed-responsive embed-responsive-16by9">
          <%= 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.stream_playback_url %>",
              width: '100%',
              height: '100%',
              mute: true,
              autoPlay: true,
              hlsMinimumDvrSize: 1
              });
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-12 mb-3">
    <div class="card shadow-sm mb-3">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <%= link_to "Home", "#home", class: class_string("nav-link", "active" => !params[:active_tab].present?), data: { toggle: "tab" } %>
          </li>
          <li class="nav-item">
            <%= link_to "Previous Sessions", "#recordings", class: class_string("nav-link", "active" => params[:active_tab] == "recordings"), data: { toggle: "tab" } %>
          </li>
        </ul>
      </div>
      <div class="card-body p-3">
        <div class="tab-content">
          <div class="<%= class_string("tab-pane fade show", "active" => !params[:active_tab].present?) %>" id="home">
            <div id="broadcast_updates">
              <%= render partial: 'broadcasts/broadcast_status', locals: { broadcast: @broadcast } %>
            </div>
            <% unless controller.class.module_parent.to_s == "Public" %>
              <hr>
              <div class="form-group">
                <label for="broadcast_share_url">To share the stream, copy the URL below. Anyone with the link can view the stream.</label>
                <div class="input-group">
                  <% if @multi_view_broadcasts.present? %>
                    <% tokens = @multi_view_broadcasts.map(&:token) %>
                    <input type="text" class="form-control" value="<%= broadcast_url(@broadcast.token, multi_view_tokens: tokens) %>" readonly>
                    <div class="input-group-append">
                      <button type="button" id="broadcast_share_url" class="btn btn-success" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token, multi_view_tokens: tokens) %>">
                        <i class="fa fa-clipboard"></i>
                        Copy URL
                      </button>
                    </div>
                  <% else %>
                    <input type="text" class="form-control" value="<%= broadcast_url(@broadcast.token) %>" readonly>
                    <div class="input-group-append">
                      <button type="button" id="broadcast_share_url" class="btn btn-success" data-behavior="clipboard" href="<%= broadcast_url(@broadcast.token) %>">
                        <i class="fa fa-clipboard"></i>
                        Copy URL
                      </button>
                    </div>
                  <% end %>
                </div>
              </div>
              <hr>
            <% end %>
            <p class="card-text">If you want to join the ZOOM meeting dedicated to this broadcast, follow the link below.</p>
            <%= link_to 'Video Conference', @conference_url, class: 'btn btn-primary btn-block', target: '_blank' %>
          </div>
          <div class="<%= class_string("tab-pane fade show", "active" => params[:active_tab] == 'recordings') %>" id="recordings">
            <div id="broadcast_recordings">
              <%= render partial: 'broadcasts/broadcast_recordings', locals: { recordings: @recordings, broadcast: @broadcast } %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- files section -->
    <div id="files" class="card shadow-sm mb-3">
      <div class="card-header">
        <h2 class="h5">Files</h2>
        <% if @multi_view_broadcasts %>
          <ul class="nav nav-tabs card-header-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>
        <% end %>
      </div>
      <div class="card-body p-3">
        <div class="tab-content">
          <% if @multi_view_broadcasts.present? %>
            <% @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 %>
          <% else %>
            <div class="tab-pane fade show active" id="files_broadcast_<%= @broadcast.id %>">
              <%= render partial: 'broadcasts/files_section', locals: { broadcast: @broadcast, files: @files } %>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
<div>
