<div class="card">

    <div class="card-body">
        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Endpoints
            @can('sources.endpoints.create')
                <button
                        class="btn btn-primary btn-sm"
                        wire:click="createForm"
                        @disabled($leadSource->status !== 'active')
                >
                    <i class="mdi mdi-plus"></i>
                </button>
            @endcan
        </h4>


        @can('sources.endpoints.view')
            @if($endpoints->count())
                <div class="table-responsive">
                    <table class="table table-centered table-striped table-nowrap mb-0">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>URL</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($endpoints as $endpoint)
                            <tr class="{{ $endpoint->status !== 'active' ? 'text-muted' : '' }}">
                                <td class="fw-semibold">
                                    {{ $endpoint->display_name }}<br>

                                    @if($endpoint->url)
                                    <code
                                            class="small d-inline-block text-truncate endpoint-url"
                                            style="max-width: 260px; cursor: pointer;"
                                            title="Click to copy"
                                            data-copy="{{ $endpoint->url }}"
                                            onclick="copyEndpointUrl(this)"
                                    >
                                        {{ $endpoint->url }}
                                    </code>
                                    @endif
                                </td>

                                <td>
                                    <code
                                            class="small d-inline-block text-truncate endpoint-url"
                                            style="max-width: 260px; cursor: pointer;"
                                            title="Click to copy"
                                            data-copy="{{ route('api.test', $endpoint) }}"
                                            onclick="copyEndpointUrl(this)"
                                    >
                                        {{ route('api.test', $endpoint) }}
                                    </code>
                                </td>


                                <td>
                                <span class="badge
                                    {{ $endpoint->status === 'active'
                                        ? 'bg-success'
                                        : ($endpoint->status === 'draft'
                                            ? 'bg-warning text-dark'
                                            : 'bg-secondary') }}">
                                    {{ ucfirst($endpoint->status) }}
                                </span>
                                </td>

                                <td class="text-end d-flex justify-content-end gap-2">
                                    @can('update', $leadSource)
                                        <a
                                                wire:click="editForm({{ $endpoint->id }})"
                                                @disabled($leadSource->status !== 'active')
                                        >
                                            <span class="mdi mdi-pencil"></span>
                                        </a>
                                    @endcan
                                    @can('toggle', $leadSource)
                                        <a
                                                wire:click="toggle({{ $endpoint->id }})"
                                                @disabled($leadSource->status !== 'active')
                                        >
                                            <span class="mdi mdi-toggle-switch-outline"></span>
                                        </a>
                                    @endcan
                                    @can('delete', $leadSource)
                                        <a
                                                wire:click="delete({{ $endpoint->id }})"
                                                @disabled($leadSource->status !== 'active')
                                        >
                                            <span class="mdi mdi-trash-can text-danger"></span>
                                        </a>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center p-5 text-muted">
                    <i class="mdi mdi-lan" style="font-size: 48px;"></i>
                    <p class="mt-3 fw-bold">No endpoints yet.</p>
                </div>
            @endif
        @endcan
        @cannot('sources.endpoints.view')
            <x-unauthorized/>
        @endcannot
    </div>
    {{-- FOOTER --}}
    @if($leadSource->status !== 'active')
        <div class="card-footer bg-warning-subtle small">
            This lead source is inactive — all endpoints are effectively paused.
        </div>
    @endif
    @if($showOffcanvas)
        <div class="offcanvas-backdrop fade show" wire:click="closeOffcanvas"></div>
    @endif

    {{-- OFFCANVAS --}}
    <div
            class="offcanvas offcanvas-end {{ $showOffcanvas ? 'show' : '' }}"
            style="visibility: {{ $showOffcanvas ? 'visible' : 'hidden' }};"
            tabindex="-1" style="--bs-offcanvas-width: 600px;"
    >
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                {{ $editingId ? 'Edit Endpoint' : 'Add Endpoint' }}
            </h5>

            <button
                    type="button"
                    class="btn-close"
                    wire:click="closeOffcanvas"
            ></button>
        </div>

        <div class="offcanvas-body  bg-light">

            {{-- FORM --}}
            <div class="mb-3">
                <label class="form-label small">Name</label>
                <input
                        type="text"
                        class="form-control"
                        wire:model.defer="name"
                >
                @error('name')
                <div class="text-danger small">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label class="form-label small">URL</label>
                <input
                        type="text"
                        class="form-control"
                        wire:model.defer="url"
                >
                @error('url')
                <div class="text-danger small">{{ $message }}</div> @enderror
            </div>

            <div class="mb-4">
                <label class="form-label small">Status</label>
                <select
                        class="form-select"
                        wire:model.defer="status"
                >
                    <option value="draft">Draft</option>
                    <option value="test">Test</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
                @error('status')
                <div class="text-danger small">{{ $message }}</div> @enderror
            </div>

            <div class="d-flex gap-2">
                <button
                        class="btn btn-primary w-100"
                        wire:click="create"
                >
                    Save
                </button>

                <button
                        class="btn btn-outline-secondary w-100"
                        wire:click="closeOffcanvas"
                >
                    Cancel
                </button>
            </div>

        </div>
    </div>

</div>