MatchLiveTv/backend/app/views/public/live/index.html.erb

<% content_for :title, t("live.index.meta_title") %>
<% content_for :meta_description, t("live.index.meta_description") %>
<% content_for :canonical_url, seo_absolute_url(public_live_index_path) %>

<% live_index_params = @club ? { club_id: @club.id } : {} %>
<div class="wrap">
  <% if @club %>
    <p class="results-hint" style="margin-bottom:8px">
      <%= link_to t("live.index.club_back_link", name: @club.name), public_club_path(@club), class: "back-link" %>
    </p>
    <h1><%= t("live.index.club_title", name: @club.name) %></h1>
    <p class="results-hint">
      <%= t("live.index.club_hint") %>
    </p>
    <div class="live-actions" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
      <%= link_to t("live.index.club_replay_link", name: @club.name), public_replay_index_path(club_id: @club.id), class: "btn btn-secondary" %>
    </div>
  <% else %>
    <h1><%= t("live.index.default_title") %></h1>
    <p class="results-hint">
      <%= t("live.index.default_hint") %>
    </p>
    <div class="live-actions" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px">
      <%= link_to t("live.index.replay_archive_link"), public_replay_index_path, class: "btn btn-secondary" %>
    </div>
  <% end %>

  <% if @club && @can_schedule_match %>
    <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
      <%= link_to t("live.index.schedule_match_link"), public_new_club_match_path(@club), class: "btn btn-primary" %>
    </div>
  <% end %>

  <%= form_with url: public_live_index_path, method: :get, local: true, class: "search-form" do %>
    <% if @club %>
      <%= hidden_field_tag :club_id, @club.id %>
    <% end %>
    <input
      type="search"
      name="q"
      value="<%= @query %>"
      placeholder="<%= @club ? t("live.index.search_placeholder_club") : t("live.index.search_placeholder_default") %>"
      aria-label="<%= t("live.index.search_aria_label") %>"
      autocomplete="off"
    />
    <button type="submit" class="btn btn-primary"><%= t("live.index.search_button") %></button>
    <% if @query.present? %>
      <%= link_to t("live.index.reset_link"), public_live_index_path(live_index_params), class: "btn btn-secondary" %>
    <% end %>
  <% end %>

  <% if @query.present? %>
    <% club_suffix = @club ? t("live.index.results_hint_club_suffix", name: @club.name) : "" %>
    <p class="results-hint">
      <%= t("live.index.results_hint", query: @query, club_suffix: club_suffix, live_count: @sessions.size, upcoming_count: @upcoming_matches.size) %>
    </p>
  <% end %>

  <% if @sessions.any? %>
    <h2 class="section-heading"><%= t("live.index.section_live_now") %></h2>
    <div class="live-grid">
      <% @sessions.each do |session| %>
        <% match = session.match %>
        <% on_air = @online_paths.include?(session.mediamtx_path_name) %>
        <article class="live-card">
          <%= live_match_card_heading(match) %>
          <p class="meta">
            <% if match.location.present? %><%= match.location %> · <% end %>
            <%= session.platform == "matchlivetv" ? "Match Live TV" : session.platform.capitalize %>
          </p>
          <% if session.score_state %>
            <p class="card-score">
              <span class="card-sets"><%= live_score_sets_label(session.score_state) %></span>
              <% if live_score_partials_label(session.score_state).present? %>
                <span class="card-partials"><%= t("score.partials_prefix", value: live_score_partials_label(session.score_state)) %></span>
              <% end %>
              <span class="card-points"><%= session.score_state.home_points %> - <%= session.score_state.away_points %></span>
            </p>
          <% end %>
          <div class="badges">
            <% if on_air %>
              <span class="badge badge-on-air"><%= t("live.index.badge_on_air") %></span>
            <% elsif session.status == "live" %>
              <span class="badge badge-live"><%= t("live.index.badge_live") %></span>
            <% elsif session.status == "paused" %>
              <span class="badge badge-connecting"><%= t("live.index.badge_paused") %></span>
            <% elsif session.status == "reconnecting" %>
              <span class="badge badge-connecting"><%= t("live.index.badge_reconnecting") %></span>
            <% else %>
              <span class="badge badge-wait"><%= t("live.index.badge_starting") %></span>
            <% end %>
          </div>
          <%= link_to t("live.index.watch_link"), public_live_path(session), class: "btn-watch" %>
        </article>
      <% end %>
    </div>
  <% end %>

  <% if @upcoming_matches.any? %>
    <h2 class="section-heading<%= ' section-heading--spaced' if @sessions.any? %>"><%= t("live.index.section_upcoming") %></h2>
    <p class="results-hint"><%= t("live.index.upcoming_hint") %></p>
    <div class="live-grid upcoming-grid">
      <% @upcoming_matches.each do |match| %>
        <article class="live-card live-card--upcoming">
          <%= live_match_card_heading(match) %>
          <p class="meta">
            <% if match.location.present? %><%= match.location %> · <% end %>
            <%= match.category.presence || match.sport&.capitalize %>
          </p>
          <p class="upcoming-when">
            <%= live_scheduled_relative(match.scheduled_at) %>
          </p>
          <div class="badges">
            <span class="badge badge-scheduled"><%= t("live.index.badge_scheduled") %></span>
          </div>
        </article>
      <% end %>
    </div>
  <% end %>

  <% if @sessions.empty? %>
    <% if @upcoming_matches.any? %>
      <div class="empty-state empty-state--soft">
        <p><strong><%= t("live.index.empty_soft_title") %></strong></p>
        <p><%= t("live.index.empty_soft_body") %></p>
      </div>
    <% elsif @club %>
      <div class="empty-state">
        <p><strong><%= t("live.index.empty_club_title", name: @club.name) %></strong></p>
        <p>
          <% if @can_schedule_match %>
            <%= link_to t("live.index.empty_club_schedule_link"), public_new_club_match_path(@club), class: "btn btn-primary" %>
            <%= t("live.index.empty_club_schedule_suffix") %>
          <% elsif @club.teams.any? %>
            <%= t("live.index.empty_club_ask_staff") %>
          <% else %>
            <%= raw t(
              "live.index.empty_club_add_team_html",
              club_link: link_to(t("live.index.empty_club_page_link"), public_club_path(@club))
            ) %>
          <% end %>
        </p>
        <p style="margin-top:16px">
          <%= link_to t("live.index.empty_club_back_link"), public_club_path(@club), class: "btn btn-secondary" %>
        </p>
      </div>
    <% else %>
      <div class="empty-hero">
        <div class="empty-hero-copy">
          <h2><%= t("live.index.empty_hero_title") %></h2>
          <p>
            <%= t("live.index.empty_hero_body") %>
          </p>
          <ul class="empty-hero-list">
            <li><%= t("live.index.empty_hero_list_item1") %></li>
            <li><%= t("live.index.empty_hero_list_item2") %></li>
            <li><%= t("live.index.empty_hero_list_item3") %></li>
          </ul>
          <p class="empty-hero-cta">
            <%= link_to t("live.index.empty_hero_cta_signup"), public_signup_path, class: "btn btn-primary" %>
            <%= link_to t("live.index.empty_hero_cta_features"), public_features_path, class: "btn btn-secondary" %>
          </p>
        </div>
        <aside class="demo-live-card" aria-label="<%= t("live.index.demo_aria_label") %>">
          <p class="demo-label"><%= t("live.index.demo_label") %></p>
          <article class="live-card live-card--demo">
            <h3>Tigers Volley vs ASD Eagles</h3>
            <p class="meta"><%= t("live.index.demo_meta") %></p>
            <p class="card-score">
              <span class="card-sets"><%= t("live.index.demo_sets") %></span>
              <span class="card-points">18 - 16</span>
            </p>
            <div class="badges">
              <span class="badge badge-on-air"><%= t("live.index.badge_on_air") %></span>
            </div>
            <span class="btn-watch btn-watch--demo"><%= t("live.index.watch_link") %></span>
          </article>
        </aside>
      </div>
    <% end %>
  <% end %>
</div>