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

@section('content')
<x-iq.page-head title="Projects">
  <x-slot:sub>Client work, launches, experiments and side projects.</x-slot:sub>
  @if ($canCreate)<a class="iq-btn iq-btn-primary" href="{{ route('projects.create') }}"><x-iq.icon name="plus" /> Add project</a>
  @else<a class="iq-btn iq-btn-primary" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade for more projects</a>@endif
</x-iq.page-head>

@if ($projects->isEmpty())
  <x-iq.empty icon="folder" title="No projects yet." action="Add a project" :href="route('projects.create')">Case studies, client work and experiments show what you can do.</x-iq.empty>
@else
  <div class="iq-stack" style="gap:8px" data-reorder-url="{{ route('reorder', 'projects') }}">
    @foreach ($projects as $p)
      <div class="iq-dragrow {{ $p->is_visible ? '' : 'is-hidden' }}" data-id="{{ $p->id }}">
        <span class="grip"><x-iq.icon name="grip" /></span>
        <span class="lbl"><a class="app-link-reset" href="{{ route('projects.edit', $p) }}">{{ $p->title }}</a></span>
        <span class="cnt">{{ collect([$p->category?->label(), $p->displayYear()])->filter()->implode(' · ') }}</span>
        <span class="acts"><a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route('projects.edit', $p) }}" aria-label="Edit {{ $p->title }}"><x-iq.icon name="edit" /></a></span>
      </div>
    @endforeach
  </div>
@endif
@endsection