<div class="max-w-xl mr-5 p-6 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
  <div class="flex items-center">
    <% light_name = CGI.escape(light.name) %>

    <div class="relative">
      <div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-<%= color %>-100 rounded-full dark:bg-<%= color %>-600">
        <span class="font-medium text-<%= color %>-600 dark:text-<%= color %>-300"><%= color[0].upcase %></span>
      </div>

      <div class="absolute inline-flex w-4 h-4 bg-white dark:bg-gray-800 border-2 border-white rounded-full bottom-0 right-0 dark:border-gray-900">
        <svg class="w-3 h-3 text-<%=color %>-900 dark:text-<%=color %>-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <% if light.locked? %>
            <circle cx="12" cy="16" r="1"/>
            <rect x="3" y="10" width="18" height="12" rx="2"/>
            <path d="M7 10V7a5 5 0 0 1 10 0v3"/>
          <% else %>
            <circle cx="12" cy="16" r="1"/>
            <rect width="18" height="12" x="3" y="10" rx="2"/>
            <path d="M7 10V7a5 5 0 0 1 9.33-2.5"/>
          <% end %>
        </svg>
      </div>
    </div>

    <div class="flex-1 min-w-0 ms-4">
      <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
        <%= light.name %>
      </p>
      <span class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 truncate me-3">
        <span class="flex w-2.5 h-2.5 bg-<%= color %>-600 rounded-full me-1.5 shrink-0"></span>
        <% if light.color == "red" %>
          Open
        <% elsif light.color == "yellow" %>
          Half-Open
        <% else %>
          Closed
        <% end %>

        <% if light.color == "yellow" %>
          (Recovering)
        <% elsif light.locked? %>
          (Locked)
        <% end %>
      </span>
    </div>

    <button id="dropdownMenuIconHorizontalButton" data-dropdown-toggle="dropdownDotsHorizontal-<%= light.id %>" class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600" type="button">
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
        <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
      </svg>
    </button>

    <!-- Dropdown menu -->
    <div id="dropdownDotsHorizontal-<%= light.id %>" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconHorizontalButton">
        <li>
          <a href="<%= url("/unlock?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="flex w-4 h-4 me-1.5 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="16" r="1"/>
              <rect width="18" height="12" x="3" y="10" rx="2"/>
              <path d="M7 10V7a5 5 0 0 1 9.33-2.5"/>
            </svg>
            Unlock
          </a>
        </li>
        <li>
          <a href="<%= url("/red?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="flex w-4 h-4 me-1.5 text-red-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="16" r="1"/>
              <rect x="3" y="10" width="18" height="12" rx="2"/>
              <path d="M7 10V7a5 5 0 0 1 10 0v3"/>
            </svg>
            Lock Red
          </a>
        </li>
        <li>
          <a href="<%= url("/green?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="flex w-4 h-4 me-1.5 text-green-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="16" r="1"/>
              <rect x="3" y="10" width="18" height="12" rx="2"/>
              <path d="M7 10V7a5 5 0 0 1 10 0v3"/>
            </svg>
            Lock Green
          </a>
        </li>
        <li>
          <a href="<%= url("/remove?names=#{light_name}") %>" data-turbo-method="post" data-turbo-confirm="Are you sure you want to remove this light?" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="flex w-4 h-4 me-1.5 text-red-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="3 6 5 6 21 6"/>
              <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
              <path d="M10 11v6"/>
              <path d="M14 11v6"/>
              <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/>
            </svg>
            Remove
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="p-4 my-4 text-sm text-<%= color %>-800 rounded-lg bg-<%= color %>-50 dark:bg-gray-800 dark:text-<%= color %>-400">
    <div class="flex justify-between items-center">
      <div class="pr-4">
        <p class="font-semibold"><%= light.description_title %></p>
        <p class="font-medium"><%= light.description_message %></p>
        <p><%= light.description_comment %></p>
      </div>
      <% if light.latest_failure %>
        <div class="whitespace-nowrap text-center">
          <%= light.latest_failure.time.strftime("%F %T") %>
          <span class="text-gray-400 dark:text-gray-500 uppercase tracking-wide">
            UTC
          </span>
        </div>
      <% end %>
    </div>
  </div>

  <!-- Stats Row -->
  <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-3">
    <div>
      <span class="font-medium">Failures:</span> <%= light.failure_count %>
    </div>

    <% light.last_check.then do |last_check| %>
      <% if last_check %>
        <div>
          <span class="font-medium">Last Check:</span><%= time_ago_in_words(last_check) %>
        </div>
      <% end %>
    <% end %>
  </div>
</div>

