@extends('layouts.app')
@section('title', 'Products — InLynq')
@section('heading', 'Products')

@section('content')
<x-iq.page-head title="Products">
  <x-slot:sub>Things you've shipped: apps, tools, courses, physical products.</x-slot:sub>
  @include('dashboard.partials.limit-note', ['count' => $products->count()])
  @if ($canCreate)
    <a class="iq-btn iq-btn-primary" href="{{ route('products.create') }}"><x-iq.icon name="plus" /> Add a product</a>
  @else
    <a class="iq-btn iq-btn-primary" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade for more products</a>
  @endif
</x-iq.page-head>

@if ($products->isEmpty())
  <x-iq.empty icon="box" title="No products here yet." action="Add a product" :href="route('products.create')">Show what you've shipped: apps, tools, courses, physical products.</x-iq.empty>
@else
  <div class="iq-stack" style="gap:8px" data-reorder-url="{{ route('reorder', 'products') }}">
    @foreach ($products as $p)
      <div class="iq-dragrow {{ $p->is_visible ? '' : 'is-hidden' }}" data-id="{{ $p->id }}" style="height:auto;padding:12px 12px 12px 8px">
        <span class="grip"><x-iq.icon name="grip" /></span>
        <x-iq.tile :name="$p->name" :src="$p->logo_url" size="sm" />
        <span class="lbl"><a href="{{ route('products.edit', $p) }}" class="app-link-reset">{{ $p->name }}</a>
          <span class="iq-meta" style="display:flex">{{ collect([$p->category, $p->company?->name])->filter()->implode(' · ') ?: 'Independent' }}</span></span>
        <span class="acts"><x-iq.status :status="$p->status" /><a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route('products.edit', $p) }}" aria-label="Edit {{ $p->name }}"><x-iq.icon name="edit" /></a></span>
      </div>
    @endforeach
  </div>
@endif
@endsection