<x-layouts.app :title="__('keywords.title').' — TrafficPumper'"><x-customer-shell>
<header class="tp-page-header"><div><p>{{__('customer.rank_tracking')}}</p><h1>{{__('keywords.title')}}</h1><span>{{__('keywords.description')}}</span></div><a class="btn btn-primary" href="{{route('keywords.create',['project'=>$projectUlid])}}">＋ {{__('keywords.add')}}</a></header>
@if(session('status'))<div class="alert alert-success">{{session('status')}}</div>@endif
<section class="tp-metric-grid tp-keyword-metrics"><x-metric-card :label="__('keywords.metrics.total')" :value="$summary['total']" icon="⌕"/><x-metric-card :label="__('keywords.metrics.active')" :value="$summary['active']" icon="●"/><x-metric-card :label="__('customer.top10')" :value="$summary['top10']" icon="↗"/><x-metric-card :label="__('customer.average_rank')" :value="$summary['average']" icon="◎"/><x-metric-card :label="__('customer.rising')" :value="$summary['winners']" icon="↑"/><x-metric-card :label="__('customer.falling')" :value="$summary['losers']" icon="↓"/></section>
<section class="tp-panel"><form method="GET" class="tp-keyword-filters"><input class="form-control" name="q" value="{{request('q')}}" placeholder="{{__('keywords.search')}}"><select class="form-select" name="project"><option value="">{{__('customer.all_projects')}}</option>@foreach($projects as $p)<option value="{{$p->ulid}}" @selected($projectUlid===$p->ulid)>{{$p->name}}</option>@endforeach</select><select class="form-select" name="status"><option value="" @selected(!request()->filled('status'))>{{__('keywords.view_all')}}</option><option value="active" @selected(request('status')==='active')>{{__('states.active')}}</option><option value="inactive" @selected(request('status')==='inactive')>{{__('states.inactive')}}</option><option value="archived" @selected(request('status')==='archived')>{{__('states.archived')}}</option></select><select class="form-select" name="country"><option value="">{{__('keywords.fields.country')}}</option>@foreach($countries as $v=>$l)<option value="{{$v}}" @selected(request('country')===$v)>{{$l}}</option>@endforeach</select><select class="form-select" name="device"><option value="">{{__('keywords.fields.device')}}</option>@foreach(\App\Enums\KeywordDevice::cases() as $v)<option value="{{$v->value}}" @selected(request('device')===$v->value)>{{$v->label()}}</option>@endforeach</select><button class="btn btn-outline-primary">{{__('keywords.filter')}}</button></form></section>
<section class="tp-panel"><div class="table-responsive"><table class="table tp-data-table"><thead><tr><th>{{__('keywords.keyword')}}</th><th>{{__('keywords.project')}}</th><th>{{__('keywords.current')}}</th><th>{{__('keywords.previous')}}</th><th>{{__('keywords.change')}}</th><th>{{__('keywords.target')}}</th><th>{{__('keywords.status')}}</th><th>{{__('keywords.last_check')}}</th><th>{{__('keywords.actions')}}</th></tr></thead><tbody>
@forelse($keywords as $keyword)<tr><td><a href="{{route('keywords.show',$keyword)}}">{{$keyword->phrase}}</a></td><td>{{$keyword->project->name}}</td><td>{{$keyword->current_rank?'#'.$keyword->current_rank:'—'}}</td><td>{{$keyword->previous_rank?'#'.$keyword->previous_rank:'—'}}</td><td>@if($keyword->movement==='winner')<span class="tp-rank-up" aria-label="{{__('keywords.winner')}}">↑ +{{$keyword->rank_change}}</span>@elseif($keyword->movement==='loser')<span class="tp-rank-down" aria-label="{{__('keywords.loser')}}">↓ {{$keyword->rank_change}}</span>@elseif($keyword->movement==='unchanged')<span>＝ {{__('customer.unchanged')}}</span>@else<span>{{__('customer.new')}}</span>@endif</td><td>{{$keyword->search_engine->label()}} · {{$keyword->country_code}}/{{$keyword->language_code}} · {{$keyword->device->label()}}</td>
<td>@if($keyword->status===\App\Enums\KeywordStatus::Archived)<span class="badge text-bg-secondary">{{__('states.archived')}}</span>@else<form method="POST" action="{{route('keywords.status',$keyword)}}" class="d-inline">@csrf @method('PATCH')<input type="hidden" name="status" value="{{$keyword->status===\App\Enums\KeywordStatus::Active?'inactive':'active'}}"><button class="btn btn-sm {{$keyword->status===\App\Enums\KeywordStatus::Active?'btn-success':'btn-outline-secondary'}}" aria-label="{{__('keywords.status')}}: {{$keyword->status->label()}}">{{$keyword->status===\App\Enums\KeywordStatus::Active?'●':'○'}} {{$keyword->status->label()}}</button></form>@endif</td>
<td>{{$keyword->last_checked_at?->diffForHumans()??__('keywords.not_checked')}}</td><td><div class="d-flex gap-1">@if($keyword->status!==\App\Enums\KeywordStatus::Archived)<a class="btn btn-sm btn-outline-secondary" href="{{route('keywords.edit',$keyword)}}">{{__('keywords.edit')}}</a><form method="POST" action="{{route('keywords.archive',$keyword)}}" onsubmit="return confirm('{{__('keywords.archive_confirm')}}')">@csrf<button class="btn btn-sm btn-outline-danger">{{__('keywords.archive')}}</button></form>@else<form method="POST" action="{{route('keywords.restore',$keyword)}}">@csrf<button class="btn btn-sm btn-outline-primary">{{__('keywords.restore')}}</button></form>@endif</div></td></tr>
@empty<tr><td colspan="9"><x-empty-state :title="__('keywords.empty')" :description="__('keywords.empty_help')"/></td></tr>@endforelse
</tbody></table></div><div class="mt-3">{{$keywords->links()}}</div></section>
</x-customer-shell></x-layouts.app>
