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

<% content_for :title, t("team_pages.index.meta_title") %>
<% content_for :meta_description, t("team_pages.index.meta_description") %>
<% content_for :canonical_url, seo_absolute_url(public_team_pages_path(filter_params_for_canonical)) %>

<div class="wrap team-directory">
  <h1><%= t("team_pages.index.heading") %></h1>
  <p class="results-hint">
    <%= t("team_pages.index.hint") %>
  </p>

  <%= form_with url: public_team_pages_path, method: :get, local: true, class: "team-directory-filters" do %>
    <div class="search-form team-directory-filters__search">
      <input
        type="search"
        name="q"
        value="<%= @query %>"
        placeholder="<%= t("team_pages.index.search_placeholder") %>"
        aria-label="<%= t("team_pages.index.search_aria_label") %>"
        autocomplete="off"
      />
      <button type="submit" class="btn btn-primary"><%= t("team_pages.index.search_button") %></button>
    </div>

    <div class="team-directory-filters__row">
      <div class="team-directory-filters__field">
        <label for="sport" class="team-directory-filters__label"><%= t("team_pages.index.sport_label") %></label>
        <select name="sport" id="sport" class="team-directory-filters__select" onchange="this.form.requestSubmit()">
          <option value=""><%= t("team_pages.index.sport_all") %></option>
          <% @sport_options.each do |sport| %>
            <option value="<%= sport[:key] %>"<%= " selected" if @sport == sport[:key] %>><%= sport[:label] %></option>
          <% end %>
        </select>
      </div>

      <div class="team-directory-filters__field team-directory-filters__field--chips">
        <span class="team-directory-filters__label" id="team-filter-chips-label"><%= t("team_pages.index.chips_label") %></span>
        <div class="team-directory-chips" role="group" aria-labelledby="team-filter-chips-label">
          <label class="filter-chip<%= " is-active" if @live_filter %>">
            <%= check_box_tag :live, "1", @live_filter, id: "filter_live", class: "filter-chip__input", onchange: "this.form.requestSubmit()" %>
            <span class="filter-chip__face" aria-hidden="true">
              <span class="filter-chip__dot filter-chip__dot--live"></span>
              <%= t("team_pages.index.chip_live") %>
            </span>
          </label>
          <label class="filter-chip<%= " is-active" if @replays_filter %>">
            <%= check_box_tag :replays, "1", @replays_filter, id: "filter_replays", class: "filter-chip__input", onchange: "this.form.requestSubmit()" %>
            <span class="filter-chip__face" aria-hidden="true">
              <span class="filter-chip__icon">▶</span>
              <%= t("team_pages.index.chip_replays") %>
            </span>
          </label>
        </div>
      </div>

      <% if @query.present? || @sport.present? || @live_filter || @replays_filter %>
        <div class="team-directory-filters__actions">
          <span class="team-directory-filters__label team-directory-filters__label--spacer" aria-hidden="true">&nbsp;</span>
          <%= link_to t("team_pages.index.reset_link"), public_team_pages_path, class: "btn btn-secondary team-directory-filters__reset" %>
        </div>
      <% end %>
    </div>
  <% end %>

  <% if @query.present? || @sport.present? || @live_filter || @replays_filter %>
    <p class="results-hint">
      <%= t("team_pages.index.results_found", count: @entries.size) %>
      <% if @query.present? %><%= t("team_pages.index.results_query_suffix", query: @query) %><% end %>
      <% if @sport.present? %><%= t("team_pages.index.results_sport_suffix", sport: Sports::Catalog.find_optional(@sport)&.dig(:label) || @sport) %><% end %>
    </p>
  <% else %>
    <p class="results-hint"><%= t("team_pages.index.results_active", count: @entries.size) %></p>
  <% end %>

  <% if @entries.any? %>
    <div class="team-directory-grid">
      <% @entries.each do |entry| %>
        <% team = entry.team %>
        <% club = team.club %>
        <% logo = team.effective_logo_url.presence || club.effective_logo_url %>
        <%= link_to public_team_page_path(team.slug), class: "team-directory-card" do %>
          <div class="team-directory-card__media">
            <% if team.team_photo_url.present? %>
              <%= image_tag team.team_photo_url, alt: "", class: "team-directory-card__photo", loading: "lazy" %>
            <% elsif logo.present? %>
              <%= image_tag logo, alt: "", class: "team-directory-card__photo team-directory-card__photo--logo", loading: "lazy" %>
            <% else %>
              <div class="team-directory-card__photo team-directory-card__photo--fallback" aria-hidden="true">
                <%= team.name.first(2).upcase %>
              </div>
            <% end %>
          </div>
          <div class="team-directory-card__body">
            <p class="team-directory-card__club"><%= club.name %></p>
            <h2 class="team-directory-card__name"><%= team.name %></h2>
            <p class="team-directory-card__meta"><%= team.sport_label %></p>
            <div class="team-directory-card__badges">
              <% if entry.live_now %>
                <span class="badge badge-on-air"><%= t("team_pages.index.badge_live") %></span>
              <% end %>
              <% if entry.upcoming_count.positive? %>
                <span class="badge badge-scheduled"><%= t("team_pages.index.badge_upcoming", count: entry.upcoming_count) %></span>
              <% end %>
              <% if entry.replay_count.positive? %>
                <span class="badge badge-wait"><%= t("team_pages.index.badge_replay", count: entry.replay_count) %></span>
              <% end %>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
  <% else %>
    <div class="empty-state">
      <% if @query.present? || @sport.present? || @live_filter || @replays_filter %>
        <p><strong><%= t("team_pages.index.empty_filtered_title") %></strong><%= t("team_pages.index.empty_filtered_suffix") %></p>
        <p><%= link_to t("team_pages.index.empty_filtered_show_all"), public_team_pages_path, class: "btn btn-secondary" %></p>
      <% else %>
        <p><strong><%= t("team_pages.index.empty_default_title") %></strong></p>
        <p><%= t("team_pages.index.empty_default_body") %></p>
        <%= link_to t("team_pages.index.empty_default_live_link"), public_live_index_path, class: "btn btn-secondary", style: "margin-top:12px;display:inline-block" %>
      <% end %>
    </div>
  <% end %>

  <p class="team-directory-footer muted">
    <%= link_to t("team_pages.index.footer_live_link"), public_live_index_path %> ·
    <%= link_to t("team_pages.index.footer_replay_link"), public_replay_index_path %>
  </p>
</div>