163 lines
9.2 KiB
PHP
163 lines
9.2 KiB
PHP
<div class="p-6">
|
|
<div class="mb-8">
|
|
<h1 class="text-2xl font-bold text-gray-900">Channels</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Manage your platform channels and linked accounts
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@forelse ($channels as $channel)
|
|
<div class="bg-white rounded-lg shadow p-6" wire:key="channel-{{ $channel->id }}">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-center">
|
|
<div class="shrink-0">
|
|
<svg class="h-8 w-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-1 min-w-0">
|
|
<h3 class="text-lg font-medium text-gray-900 truncate">
|
|
{{ $channel->display_name ?? $channel->name }}
|
|
</h3>
|
|
@if ($channel->platformInstance)
|
|
<a href="{{ $channel->platformInstance->url }}/c/{{ $channel->name }}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-sm text-blue-500 hover:underline">
|
|
{{ $channel->platformInstance->name }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<button
|
|
wire:click="toggle({{ $channel->id }})"
|
|
class="p-1 rounded-full {{ $channel->is_active ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}"
|
|
title="{{ $channel->is_active ? 'Active - Click to disable' : 'Inactive - Click to enable' }}"
|
|
>
|
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
@if ($channel->description)
|
|
<p class="mt-3 text-sm text-gray-500 line-clamp-2">
|
|
{{ $channel->description }}
|
|
</p>
|
|
@endif
|
|
|
|
<div class="mt-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm font-medium text-gray-700">
|
|
Linked Accounts ({{ $channel->platformAccounts->count() }})
|
|
</span>
|
|
<button
|
|
wire:click="openAccountModal({{ $channel->id }})"
|
|
class="text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
Manage
|
|
</button>
|
|
</div>
|
|
|
|
@if ($channel->platformAccounts->isNotEmpty())
|
|
<div class="space-y-1">
|
|
@foreach ($channel->platformAccounts->take(3) as $account)
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-gray-600">{{ $account->username }}</span>
|
|
<button
|
|
wire:click="detachAccount({{ $channel->id }}, {{ $account->id }})"
|
|
class="text-red-500 hover:text-red-700"
|
|
title="Remove account"
|
|
>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
@if ($channel->platformAccounts->count() > 3)
|
|
<span class="text-xs text-gray-400">+{{ $channel->platformAccounts->count() - 3 }} more</span>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<p class="text-sm text-gray-400">No accounts linked</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $channel->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
|
|
{{ $channel->is_active ? 'Active' : 'Inactive' }}
|
|
</span>
|
|
<span class="text-xs text-gray-500">
|
|
{{ $channel->created_at->format('M d, Y') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">No channels</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
No platform channels have been configured yet.
|
|
</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Account Management Modal -->
|
|
@if ($managingChannel)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" wire:click="closeAccountModal"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900">
|
|
Manage Accounts for {{ $managingChannel->display_name ?? $managingChannel->name }}
|
|
</h3>
|
|
<button wire:click="closeAccountModal" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
@if ($availableAccounts->isNotEmpty())
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Available Accounts</h4>
|
|
<div class="space-y-2">
|
|
@foreach ($availableAccounts as $account)
|
|
<div class="flex items-center justify-between p-2 border rounded">
|
|
<span class="text-sm text-gray-900">{{ $account->username }}</span>
|
|
<button
|
|
wire:click="attachAccount({{ $account->id }})"
|
|
class="text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@else
|
|
<p class="text-sm text-gray-500 mb-4">No available accounts to link.</p>
|
|
@endif
|
|
|
|
<div class="mt-4">
|
|
<button
|
|
wire:click="closeAccountModal"
|
|
class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|