@php
    $sectionName = match ($location) {
        'pages-show' => 'pages',
        'chapters-show' => 'chapters',
        'books-show','books-index' => 'books',
        'shelves-show','shelves-index' => 'shelves',
        default => '',
    };

    if ($entity) {
        $apiPath = "/api/{$sectionName}/{$entity->id}";
    } else {
        $apiPath = "/api/{$sectionName}";
    }
@endphp
<div id="developer-information" class="entity-details mb-xl">
    <h5>Development</h5>
    <div class="blended-links">
        <div class="entity-meta">

            @if($entity)
                <a href="#" class="entity-meta-item" title="ID" id="developer-information-id" data-id="{{ $entity->id }}">
                    @icon('info')
                    <span>{{ class_basename($entity) }} {{ $entity->id }}</span>
                </a>
                <script nonce="{{ $cspNonce ?? '' }}">
                    const idLink = document.getElementById('developer-information-id');
                    const id = idLink.getAttribute('data-id');

                    idLink.addEventListener( 'click', async (event) => {
                        event.preventDefault();
                        if (window.isSecureContext && navigator.clipboard) {
                            await navigator.clipboard.writeText(id);
                        } else {
                            // Backup option where we can't use the navigator.clipboard API
                            const tempInput = document.createElement('textarea');
                            tempInput.setAttribute('style', 'position: absolute; left: -1000px; top: -1000px;');
                            tempInput.value = id;
                            document.body.appendChild(tempInput);
                            tempInput.select();
                            document.execCommand('copy');
                            document.body.removeChild(tempInput);
                        }
                        window.$events.success('ID copied to clipboard!');
                    });
                </script>
            @endif

            <a href="{{ url($apiPath) }}" target="_blank" class="entity-meta-item">
                @icon('export')
                <span>Open in API</span>
            </a>

            <a href="{{ url("/api/docs#section-{$sectionName}") }}" target="_blank" class="entity-meta-item">
                @icon('books')
                <span>View API Docs</span>
            </a>

        </div>
    </div>
</div>