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

<% content_for :title, "Dirette live partite giovanili in corso — Match Live TV" %>
<% content_for :meta_description, "Guarda le dirette live delle partite giovanili ora in corso e le prossime gare programmate. Cerca la tua squadra e apri il link senza installare app." %>
<% 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 "← #{@club.name}", public_club_path(@club), class: "back-link" %>
    </p>
    <h1>Dirette e partite — <%= @club.name %></h1>
    <p class="results-hint">
      Solo le squadre di questa società: dirette in corso e partite programmate da app o sito.
    </p>
    <div class="live-actions" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
      <%= link_to "Replay di #{@club.name}", public_replay_index_path(club_id: @club.id), class: "btn btn-secondary" %>
    </div>
  <% else %>
    <h1>Dirette e partite in programma</h1>
    <p class="results-hint">
      Cerca per società, squadra, avversario o luogo: trovi le dirette attive e le partite programmate.
    </p>
    <div class="live-actions" style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px">
      <%= link_to "Live passate — archivio replay", 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 "Programma partita", 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 ? "Cerca società, squadra, avversario o luogo…" : "Es. Crazy Volley, Serie D, avversario…" %>"
      aria-label="Cerca squadra"
      autocomplete="off"
    />
    <button type="submit" class="btn btn-primary">Cerca</button>
    <% if @query.present? %>
      <%= link_to "Azzera", public_live_index_path(live_index_params), class: "btn btn-secondary" %>
    <% end %>
  <% end %>

  <% if @query.present? %>
    <p class="results-hint">
      Risultati per «<%= h @query %>»<%= @club ? " in #{@club.name}" : "" %>:
      <%= @sessions.size %> in diretta · <%= @upcoming_matches.size %> in programma
    </p>
  <% end %>

  <% if @sessions.any? %>
    <h2 class="section-heading">In diretta adesso</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">Parziali: <%= 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">In onda</span>
            <% elsif session.status == "live" %>
              <span class="badge badge-live">Live</span>
            <% elsif session.status == "paused" %>
              <span class="badge badge-connecting">In pausa</span>
            <% elsif session.status == "reconnecting" %>
              <span class="badge badge-connecting">Riconnessione</span>
            <% else %>
              <span class="badge badge-wait">In avvio</span>
            <% end %>
          </div>
          <%= link_to "Guarda diretta →", 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? %>">Prossime partite</h2>
    <p class="results-hint">Programmate da app o sito: la diretta partirà quando lo staff avvierà la trasmissione.</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">In programma</span>
          </div>
        </article>
      <% end %>
    </div>
  <% end %>

  <% if @sessions.empty? %>
    <% if @upcoming_matches.any? %>
      <div class="empty-state empty-state--soft">
        <p><strong>Nessuna diretta in questo momento.</strong></p>
        <p>Torna all’orario indicato: quando la squadra avvierà lo streaming, la partita comparirà in «In diretta adesso».</p>
      </div>
    <% elsif @club %>
      <div class="empty-state">
        <p><strong>Nessuna diretta o partita in programma per <%= @club.name %>.</strong></p>
        <p>
          <% if @can_schedule_match %>
            <%= link_to "Programma la prima partita", public_new_club_match_path(@club), class: "btn btn-primary" %>
            oppure dall’app Match Live TV.
          <% elsif @club.teams.any? %>
            Chiedi al titolare della società o a un responsabile trasmissione di programmare una gara.
          <% else %>
            Aggiungi una squadra dalla
            <%= link_to "pagina società", public_club_path(@club) %>
            e programma la prima partita.
          <% end %>
        </p>
        <p style="margin-top:16px">
          <%= link_to "← Torna alla società", public_club_path(@club), class: "btn btn-secondary" %>
        </p>
      </div>
    <% else %>
      <div class="empty-hero">
        <div class="empty-hero-copy">
          <h2>Nessuna diretta adesso — ma puoi già organizzarti</h2>
          <p>
            Se la tua squadra usa Match Live TV, dal telefono si programma la partita con data e ora.
            Genitori e parenti trovano qui la diretta quando il fischio d’inizio è vicino.
          </p>
          <ul class="empty-hero-list">
            <li>Programma la gara dall’app (senza avviare subito la diretta)</li>
            <li>La partita compare in «Prossime partite» con orario e campo</li>
            <li>Lo streaming parte solo quando premi avvio in palestra</li>
          </ul>
          <p class="empty-hero-cta">
            <%= link_to "Registra la tua squadra", public_signup_path, class: "btn btn-primary" %>
            <%= link_to "Scopri come funziona", public_features_path, class: "btn btn-secondary" %>
          </p>
        </div>
        <aside class="demo-live-card" aria-label="Esempio di diretta attiva">
          <p class="demo-label">Esempio — così appare una diretta attiva</p>
          <article class="live-card live-card--demo">
            <h3>Tigers Volley vs ASD Eagles</h3>
            <p class="meta">PalaTigers · Match Live TV</p>
            <p class="card-score">
              <span class="card-sets">Set 2 · Set vinti 1-0</span>
              <span class="card-points">18 - 16</span>
            </p>
            <div class="badges">
              <span class="badge badge-on-air">In onda</span>
            </div>
            <span class="btn-watch btn-watch--demo">Guarda diretta →</span>
          </article>
        </aside>
      </div>
    <% end %>
  <% end %>
</div>