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) %>

<div class="wrap">
  <h1>Dirette e partite in programma</h1>
  <p class="results-hint">
    Cerca la tua squadra: trovi le dirette attive e le partite già programmate dall’app.
  </p>

  <%= form_with url: public_live_index_path, method: :get, local: true, class: "search-form" do %>
    <input
      type="search"
      name="q"
      value="<%= @query %>"
      placeholder="Es. Tigers, Eagles, nome squadra…"
      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, class: "btn btn-secondary" %>
    <% end %>
  <% end %>

  <% if @query.present? %>
    <p class="results-hint">
      Risultati per «<%= h @query %>»:
      <%= @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">
          <h3><%= match.team.name %> vs <%= match.opponent_name %></h3>
          <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 == "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 dall’app: 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">
          <h3><%= match.team.name %> vs <%= match.opponent_name %></h3>
          <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>
    <% 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>