@extends('layouts.app')

@section('title', 'API keys | '.$org->display_name.' | healthcareers.app')
@section('robots', 'noindex, nofollow')

@section('content')
    <div class="narrow wide">
        <div class="adm-head">
            <div>
                <div class="eyebrow">Job Sync</div>
                <h1>API keys</h1>
                <p class="muted">{{ $org->display_name }} · <a href="{{ route('organization.show', ['org' => $org->id]) }}">My organization</a>@if (\Illuminate\Support\Facades\Route::has('organization.sync')) · <a href="{{ route('organization.sync', $org) }}">Job Sync</a>@endif · <a href="{{ route('api.docs') }}">API docs</a></p>
            </div>
        </div>
        @include('partials.errors')

        @if ($plain)
            <section class="card" id="new-key">
                <h2 class="h3">Your new key: {{ $newKey->name }}</h2>
                <div class="notice good"><strong>Copy it now. You won't see it again.</strong> We keep only a scrambled copy, so we can't show it later. If you lose it, revoke it and create another.</div>
                <div class="codebox" id="api-key-value" style="word-break:break-all">{{ $plain }}</div>
                <p><button class="btn primary" type="button" id="api-key-copy" data-copy="#api-key-value">Copy key</button> <span class="small muted" id="api-key-copied" role="status"></span></p>
                <p class="small muted">Send it with every request: <span class="codebox">Authorization: Bearer {{ $newKey->prefix }}…</span>. Keep it in your system's secret settings, not in code or email.</p>
            </section>
        @endif

        <section class="card">
            <h2 class="h3">What the API does</h2>
            <p>Your own system (an applicant tracking system, HR system or a script) sends your jobs to healthcareers.app as they open, change and close. Each job goes up as {{ $org->display_name }}'s own post, in your words, just like the other Job Sync connections.</p>
            <ul>
                <li><strong>PUT /api/v1/jobs/{your job ID}</strong> creates or updates a job. Sending the same job twice changes nothing.</li>
                <li><strong>DELETE /api/v1/jobs/{your job ID}</strong> closes it.</li>
                <li><strong>GET /api/v1/jobs</strong> lists what you've sent and what happened to each: live, being prepared, waiting for review, needs a fix (and why), or waiting for a free slot.</li>
            </ul>
            <p><a class="btn" href="{{ route('api.docs') }}">Read the API docs</a></p>
            @if ($source)
                <p class="small muted">API connection: {{ $source->statusLabel() }}@if ($source->status_reason) ({{ $source->status_reason }})@endif · {{ (int) $source->jobs_found }} open {{ (int) $source->jobs_found === 1 ? 'job' : 'jobs' }} sent{{ $source->last_success_at ? ' · last job received '.$source->last_success_at->diffForHumans() : '' }}</p>
            @endif
        </section>

        <section class="card">
            <h2 class="h3">Keys</h2>
            @if ($keys->isEmpty())
                <p class="muted">No keys yet.</p>
            @else
                <div class="tablewrap"><table>
                    <thead><tr><th>Name</th><th>Key</th><th>Created</th><th>Last used</th><th></th></tr></thead>
                    <tbody>
                        @foreach ($keys as $k)
                            <tr>
                                <td>{{ $k->name }}@if ($k->created_by)<br><span class="small muted">by {{ $k->created_by }}</span>@endif</td>
                                <td class="nowrap"><span class="codebox">{{ $k->prefix }}…</span></td>
                                <td class="nowrap">{{ $k->created_at?->format('M j, Y') }}</td>
                                <td class="nowrap">{{ $k->last_used_at ? $k->last_used_at->diffForHumans() : 'Never' }}</td>
                                <td class="nowrap">
                                    <form class="inline" method="post" action="{{ route('organization.sync.api.revoke', [$org, $k]) }}" data-confirm="Revoke &quot;{{ $k->name }}&quot;? Anything using it stops working straight away.">@csrf<button class="btn sm" type="submit">Revoke</button></form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table></div>
            @endif
            @if ($revokedCount)
                <p class="small muted">{{ $revokedCount }} revoked {{ $revokedCount === 1 ? 'key' : 'keys' }} not shown.</p>
            @endif

            @if ($blocker)
                <div class="notice bad">{{ $blocker }}</div>
                <p class="small muted">Keys you already have stop working while this is the case.</p>
            @else
                <form class="form" method="post" action="{{ route('organization.sync.api.store', $org) }}" style="margin-top:12px">
                    @csrf
                    <div class="field">
                        <label for="k-name">Create a key</label>
                        <input id="k-name" name="name" value="{{ old('name') }}" required minlength="2" maxlength="80" placeholder="Workday integration">
                        <span class="hint">A name so you can tell your keys apart, like the system that will use it. Use one key per system: you can revoke one without stopping the others.</span>
                    </div>
                    <button class="btn primary" type="submit">Create key</button>
                </form>
            @endif
        </section>
    </div>
@endsection

@if ($plain)
@push('scripts')
<script>
(function () {
    var btn = document.getElementById('api-key-copy');
    if (!btn) return;
    btn.addEventListener('click', function () {
        var el = document.getElementById('api-key-value');
        var done = function (msg) { document.getElementById('api-key-copied').textContent = msg; };
        var text = el.textContent.trim();
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () { done('Copied.'); }, function () { done('Select the key and copy it.'); });
        } else {
            var r = document.createRange(); r.selectNodeContents(el);
            var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
            done(document.execCommand('copy') ? 'Copied.' : 'Select the key and copy it.');
        }
    });
})();
</script>
@endpush
@endif