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

@section('content')
<x-iq.page-head title="Milestones">
  <x-slot:sub>Past-tense facts, newest first: "Reached 100 customers", "Launched InLynq".</x-slot:sub>
  <a class="iq-btn iq-btn-primary" href="{{ route('milestones.create') }}"><x-iq.icon name="plus" /> Add milestone</a>
</x-iq.page-head>

@if ($milestones->isEmpty())
  <x-iq.empty icon="flag" title="No milestones yet." action="Add a milestone" :href="route('milestones.create')">Launches, firsts and turning points. They appear as an editorial timeline.</x-iq.empty>
@else
  <div class="iq-card" style="padding:0 24px">
    <div class="iq-timeline">
      @foreach ($milestones as $m)
        <div class="iq-mile" style="{{ $loop->first ? 'border-top:0' : '' }}{{ $loop->last ? ';border-bottom:0' : '' }}">
          <div class="yr">{{ $m->date->format('Y') }}<span></span></div>
          <div class="iq-row" style="justify-content:space-between;align-items:flex-start;flex-wrap:nowrap">
            <div><h4>{{ $m->title }} @unless($m->is_public)<span class="iq-badge">Hidden</span>@endunless</h4>@if($m->description)<p>{{ $m->description }}</p>@endif</div>
            <span class="iq-row" style="flex-wrap:nowrap">
              <a class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" href="{{ route('milestones.edit', $m) }}" aria-label="Edit {{ $m->title }}"><x-iq.icon name="edit" /></a>
              <form method="POST" action="{{ route('milestones.destroy', $m) }}" data-confirm="Delete this milestone?" data-confirm-action="Delete">@csrf @method('DELETE')<button class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm" aria-label="Delete {{ $m->title }}"><x-iq.icon name="trash" /></button></form>
            </span>
          </div>
        </div>
      @endforeach
    </div>
  </div>
@endif
@endsection