@extends('layout')

@section('title', 'Channels')

@section('content')
    <div class="card">
        <form method="POST" action="{{ route('channels.store') }}">
            @csrf
            <label for="name">New channel name</label>
            <input id="name" name="name" required placeholder="e.g. Sports Facts" value="{{ old('name') }}">

            <label for="description">Description (optional)</label>
            <input id="description" name="description"
                   placeholder="What this channel is about" value="{{ old('description') }}">

            <button type="submit">Create channel</button>
        </form>
    </div>

    @if($channels->isEmpty())
        <p class="muted" style="margin-top:28px">No channels yet — create one above, then connect its social accounts.</p>
    @else
        <div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))">
            @foreach($channels as $channel)
                <div class="tile" style="padding:16px">
                    <p class="t" style="-webkit-line-clamp:1"><a href="{{ route('channels.show', $channel) }}">{{ $channel->name }}</a></p>
                    @if($channel->description)<p class="muted" style="margin:0 0 8px">{{ $channel->description }}</p>@endif
                    <p class="muted">{{ $channel->social_accounts_count }} account(s) · {{ $channel->series_count }} series</p>
                </div>
            @endforeach
        </div>
    @endif
@endsection