<%= product_wordmark :direct_me, class: "small mb-3" %>

<div class="row">
  <div class="col-md-12">
    <div class="d-md-flex d-sm-flex flex-sm-column flex-md-row flex-md-wrap mb-3" data-project-id="<%= @project.id %>" data-broadcast-ids="[]">
      <% if policy(Broadcast).new? %>
        <%= link_to fa_icon("plus", text: t(".actions.new")), [:new, @project, :broadcast], class: "btn btn-primary mb-2" %>
      <% end %>
      
      <%= link_to "Multi-View", "javascript:void(0);", class: "btn btn-light border disabled ml-auto mr-2 mb-2", id: "multi_view_broadcasts" %>

      <%= bootstrap_form_with url: [@project, :broadcasts], method: :get, remote: true, layout: :inline, id: "search" do |form| %>
        <%= form.search_field :query, hide_label: true, placeholder: t("shared.search"), value: params[:query], prepend: form.button(fa_icon("search"), class: "btn btn-light border mb-2") %>
      <% end %>
    </div>
  </div>
</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></th>
        <th><%= t(".table_headers.broadcast_name") %></th>
        <th><%= t(".table_headers.broadcast_status") %></th>
        <th><%= t(".table_headers.broadcast_created_at") %></th>
        <th></th>
      </tr>
    </thead>
    <tbody id="broadcasts">
      <% if @broadcasts.any? %>
        <%= render @broadcasts %>
      <% else %>
        <tr>
          <td colspan="5" class="py-4 text-center text-muted"><%= t(".empty") %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<div id="broadcasts_pagination" class="mt-3">
  <%= will_paginate @broadcasts %>
</div>
