<%= page_title "Screens" %>

<div class="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-h2 text-neutral-900">All Screens</h1>
    <p class="text-body text-neutral-700 mt-1">Manage your digital signage displays and their configurations</p>
  </div>
  <% if policy(Screen.new).new? %>
    <%= link_to new_screen_path, class: "btn-primary btn-md whitespace-nowrap" do %>
      <%= heroicon('plus', class: 'w-4 h-4 mr-2') %>
      New Screen
    <% end %>
  <% end %>
</div>

<div id="screens" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <% @screens.each do |screen| %>
    <%= link_to screen, class: "group block" do %>
      <div class="card hover:shadow-md transition-shadow duration-200">
        <div class="card-body text-center">
          <div class="mb-4">
            <%= heroicon('desktop-computer', class: 'w-16 h-16 mx-auto text-neutral-400 group-hover:text-brand transition-colors') %>
          </div>
          
          <h3 class="text-h4 text-neutral-900 group-hover:text-brand transition-colors mb-2">
            <%= screen.name %>
          </h3>
          
          <div class="space-y-2 text-caption text-neutral-500">
            <div class="flex items-center justify-center">
              <% if screen.online? %>
                <%= heroicon('check-circle', class: 'w-4 h-4 mr-1') %>
                <span class="text-success">Online</span>
              <% else %>
                <%= heroicon('x-circle', class: 'w-4 h-4 mr-1') %>
                <span class="text-neutral-500">Offline</span>
              <% end %>
            </div>

            <div>Last seen <%= screen.last_seen_at ? "#{time_ago_in_words(screen.last_seen_at)} ago" : "Never" %></div>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>
  
  <% if @screens.empty? %>
    <div class="col-span-full">
      <div class="text-center py-12">
        <%= heroicon('desktop-computer', class: 'mx-auto h-12 w-12 text-neutral-400') %>
        <h3 class="text-h3 text-neutral-900 mt-4">No screens yet</h3>
        <p class="text-body text-neutral-500 mt-2">Add your first digital signage display to get started.</p>
        <% if policy(Screen.new).new? %>
          <%= link_to new_screen_path, class: "btn-primary mt-4" do %>
            <%= heroicon('plus', class: 'w-4 h-4 mr-2') %>
            Add Screen
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
