<div id="<%= dom_id subscription %>" class="flex items-center justify-between p-3 bg-white border border-neutral-200 rounded-md hover:bg-neutral-50 transition-colors">
  <div class="flex items-center space-x-3 flex-1 min-w-0">
    <div class="flex-shrink-0">
      <div class="w-6 h-6 bg-brand-light rounded flex items-center justify-center">
        <svg class="w-3 h-3 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
      </div>
    </div>
    <div class="min-w-0 flex-1">
      <h4 class="text-sm font-medium text-neutral-900 truncate"><%= subscription.feed.name %></h4>
      <% if subscription.feed.description.present? %>
        <p class="text-xs text-neutral-500 truncate"><%= truncate(subscription.feed.description, length: 60) %></p>
      <% end %>
    </div>

    <% if policy(subscription).update? %>
      <%= form_with(model: [subscription.screen, subscription], data: { controller: "weight-slider" }, class: "flex-shrink-0 mr-2") do |form| %>
        <div class="w-48">
          <div class="flex items-center space-x-2">
            <span class="text-xs text-neutral-500">Low</span>
            <%= range_field_tag nil, nil,
                min: 1,
                max: 5,
                class: "flex-1 h-1.5 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-brand",
                data: {
                  weight_slider_target: "slider",
                  action: "input->weight-slider#handleSliderChange change->weight-slider#submitForm"
                } %>
            <span class="text-xs text-neutral-500">High</span>
          </div>
          <%= form.hidden_field :weight, value: subscription.weight, data: { weight_slider_target: "weightInput" } %>
          <p class="text-xs text-neutral-500 mt-0.5 text-center">
            <span data-weight-slider-target="label"></span>
          </p>
        </div>
      <% end %>
    <% end %>
  </div>

  <% if policy(subscription).destroy? %>
    <div class="flex-shrink-0 ml-2">
      <%= button_to [@screen, subscription],
          method: :delete,
          class: "text-neutral-400 hover:text-red-600 p-1 rounded transition-colors",
          form: {
            data: {
              turbo_confirm: "Remove this subscription?"
            },
            class: "inline-block"
          },
          title: "Remove subscription" do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      <% end %>
    </div>
  <% end %>
</div>
