<x-layouts.app :title="__('earn_portal.api_keys').' — TrafficPumper'">
<main class="container py-4 py-md-5 tp-api-keys">
<header class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4"><div><a href="{{route('earn.dashboard')}}" class="small">← {{__('earn_portal.dashboard')}}</a><h1 class="h2 mt-2 mb-1">{{__('earn_portal.api_keys')}}</h1><p class="text-body-secondary mb-0">{{__('earn_portal.api_keys_description')}}</p><p class="small text-body-secondary mt-2 mb-0">{{__('earn_portal.key_usage',['used'=>$tokens->count(),'max'=>$maxTotal])}}</p></div><button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createApiKey" @disabled($tokens->count() >= $maxTotal)>{{__('earn_portal.new_key')}}</button></header>
@error('api_key')<div class="alert alert-danger" role="alert">{{$message}}</div>@enderror
@if($tokens->count() >= $maxTotal)<div class="alert alert-warning">{{__('earn_portal.total_limit_reached')}}</div>@endif
@if(session('new_api_key')) @php($newRecord=$tokens->first())<section class="alert alert-success tp-api-key-created"><h2 class="h5">{{__('earn_portal.created_title')}}</h2><p>{{__('earn_portal.created_warning')}}</p><div class="input-group mb-3"><input id="newApiKeyValue" class="form-control font-monospace" type="password" readonly value="{{session('new_api_key')}}" aria-label="{{__('earn_portal.api_key')}}"><button class="btn btn-outline-secondary" type="button" data-token-toggle data-show="{{__('earn_portal.show')}}" data-hide="{{__('earn_portal.hide')}}">{{__('earn_portal.show')}}</button><button class="btn btn-outline-secondary" type="button" data-token-copy data-copied="{{__('earn_portal.copied')}}">{{__('earn_portal.copy')}}</button></div><dl class="tp-key-meta"><div><dt>{{__('earn_portal.device_name')}}</dt><dd>{{$newRecord?->name}}</dd></div><div><dt>{{__('earn_portal.ability')}}</dt><dd><code>tasks:read</code></dd></div><div><dt>{{__('earn_portal.expires_at')}}</dt><dd>{{$newRecord?->expires_at?->translatedFormat('j F Y H:i') ?? __('earn_portal.no_expiration')}}</dd></div></dl><a href="{{route('earn.api-keys.index')}}" class="btn btn-success">{{__('earn_portal.done')}}</a></section>@endif
@if($tokens->isEmpty())<section class="card text-center tp-api-empty"><div class="card-body"><div class="tp-key-icon" aria-hidden="true">⌁</div><h2 class="h4">{{__('earn_portal.empty_title')}}</h2><p class="text-body-secondary">{{__('earn_portal.empty_description')}}</p><button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createApiKey">{{__('earn_portal.first_key')}}</button></div></section>
@else<section class="card"><div class="card-body"><p class="small text-body-secondary">{{__('earn_portal.lifecycle_help')}}</p><div class="table-responsive"><table class="table align-middle mb-0 tp-api-table"><thead><tr><th>{{__('earn_portal.device_name')}}</th><th>{{__('earn_portal.key_preview')}}</th><th>{{__('earn_portal.device_binding')}}</th><th>{{__('earn_portal.device_id_preview')}}</th><th>{{__('earn_portal.first_connection')}}</th><th>{{__('earn_portal.last_seen')}}</th><th>{{__('earn_portal.first_ip')}}</th><th>{{__('earn_portal.last_ip')}}</th><th>{{__('earn_portal.expires_at')}}</th><th>{{__('earn_portal.status')}}</th><th>{{__('earn_portal.actions')}}</th></tr></thead><tbody>
@foreach($tokens as $token) @php($state=$token->status()->value)<tr><td data-label="{{__('earn_portal.device_name')}}">{{$token->name}}</td><td data-label="{{__('earn_portal.key_preview')}}"><code>tpe_••••••••{{str($token->token_hint)->after('tpe_')}}</code></td><td data-label="{{__('earn_portal.device_binding')}}">{{__($token->device_id_hash ? ($token->device_mismatch_seen ? 'earn_portal.device_mismatch_seen' : 'earn_portal.device_bound') : 'earn_portal.device_unbound')}}</td><td data-label="{{__('earn_portal.device_id_preview')}}"><code>{{$token->device_id_preview ?? '—'}}</code></td><td data-label="{{__('earn_portal.first_connection')}}">{{$token->device_bound_at?->translatedFormat('j F Y H:i') ?? '—'}}</td><td data-label="{{__('earn_portal.last_seen')}}">{{$token->last_seen_at?->translatedFormat('j F Y H:i') ?? __('earn_portal.never_used')}}</td><td data-label="{{__('earn_portal.first_ip')}}">{{$token->first_ip ?? '—'}}</td><td data-label="{{__('earn_portal.last_ip')}}">{{$token->last_ip ?? '—'}}</td><td data-label="{{__('earn_portal.expires_at')}}">{{$token->expires_at?->translatedFormat('j F Y H:i') ?? __('earn_portal.no_expiration')}}</td><td data-label="{{__('earn_portal.status')}}">
@if(in_array($state,['active','inactive']))<form method="POST" action="{{route('earn.api-keys.status',$token->id)}}" class="tp-status-switch">@csrf @method('PATCH')<input type="hidden" name="is_active" value="{{$state==='active'?'0':'1'}}"><span>{{__('earn_portal.status_'.$state)}}</span><button type="submit" class="form-check-input" role="switch" aria-checked="{{$state==='active'?'true':'false'}}" aria-label="{{__($state==='active'?'earn_portal.deactivate':'earn_portal.activate')}}" data-status-switch></button></form>@else<span class="badge text-bg-{{$state==='expired'?'warning':'secondary'}}">{{__('earn_portal.status_'.$state)}}</span>@endif</td>
<td data-label="{{__('earn_portal.actions')}}"><div class="dropdown"><button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{__('earn_portal.actions')}}">⋮</button><ul class="dropdown-menu dropdown-menu-end">@if(in_array($state,['active','inactive']))<li><form method="POST" action="{{route('earn.api-keys.status',$token->id)}}">@csrf @method('PATCH')<input type="hidden" name="is_active" value="{{$state==='active'?'0':'1'}}"><button class="dropdown-item">{{__($state==='active'?'earn_portal.deactivate':'earn_portal.activate')}}</button></form></li><li><button class="dropdown-item text-warning" data-action-key data-kind="revoke" data-url="{{route('earn.api-keys.revoke',$token->id)}}" data-name="{{$token->name}}" data-bs-toggle="modal" data-bs-target="#keyActionModal">{{__('earn_portal.permanent_revoke')}}</button></li>@endif<li><button class="dropdown-item text-danger" data-action-key data-kind="delete" data-url="{{route('earn.api-keys.destroy',$token->id)}}" data-name="{{$token->name}}" data-bs-toggle="modal" data-bs-target="#keyActionModal">{{__('earn_portal.delete')}}</button></li></ul></div></td></tr>@endforeach
</tbody></table></div></div></section>@endif
<section class="card mt-4"><div class="card-body"><h2 class="h5">{{__('earn_portal.example_title')}}</h2><pre class="tp-code-example"><code>curl -X GET "{{$tasksUrl}}" \
  -H "Accept: application/json" \
  -H "Authorization: Bearer {{__('earn_portal.placeholder_key')}}" \
  -H "X-Device-ID: 5c9f63d12166490bb6a6459af51e8b83"</code></pre></div></section></main>
<div class="modal fade" id="createApiKey" tabindex="-1" aria-labelledby="createApiKeyTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form method="POST" action="{{route('earn.api-keys.store')}}">@csrf<div class="modal-header"><h2 class="modal-title fs-5" id="createApiKeyTitle">{{__('earn_portal.new_key')}}</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{__('earn_portal.cancel')}}"></button></div><div class="modal-body"><label class="form-label" for="keyName">{{__('earn_portal.device_name')}}</label><input id="keyName" class="form-control" name="name" value="{{old('name')}}" minlength="3" maxlength="80" required autocomplete="off"><div class="form-text">{{__('earn_portal.device_help')}}</div><label class="form-label mt-3" for="duration">{{__('earn_portal.expiration')}}</label><select id="duration" class="form-select" name="duration" required>@foreach($durations as $duration)<option value="{{$duration}}" @selected(old('duration',$defaultDuration)===$duration)>{{__('earn_portal.duration_'.$duration)}}</option>@endforeach</select><p class="form-text">{{__('earn_portal.unlimited_warning')}}</p><p class="form-text mb-0">{{__('earn_portal.fixed_ability')}} <code>tasks:read</code></p></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{__('earn_portal.cancel')}}</button><button class="btn btn-primary">{{__('earn_portal.create_key')}}</button></div></form></div></div></div>
<div class="modal fade" id="keyActionModal" tabindex="-1" aria-labelledby="keyActionTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form method="POST" data-action-form>@csrf<div data-action-method></div><div class="modal-header"><h2 class="modal-title fs-5" id="keyActionTitle" data-action-title></h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{__('earn_portal.cancel')}}"></button></div><div class="modal-body"><p data-action-message data-revoke-template="{{__('earn_portal.revoke_confirmation',['name'=>':name'])}}" data-delete-template="{{__('earn_portal.delete_confirmation',['name'=>':name'])}}"></p></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{__('earn_portal.cancel')}}</button><button class="btn btn-danger" data-action-submit></button></div></form></div></div></div>
</x-layouts.app>
