@extends('front.layouts.front')
@section('content')
    <!-- page title -->
    <!-- Begin:: banner & logo -->
    <section class="section section--head festive-banner" data-bg="{{ $channel->banner ?? asset('assets/img/bg.jpg') }}">
    </section>
    <div class="container">
        <div class="d-md-flex">
            <div class="festive-logo text-white">
                <img src="{{ $channel->logo }}" class="img-fluid" alt="{{ $channel->name }}">
            </div>
            <div class="d-flex w-100 justify-content-between">
                <h3 class="text-start text-white mb-0 p-3">{{ $channel->name }}</h3>
                <a href="{{ route('front.custom-channel.edit', [$channel->uuid]) }}"
                    class="btn btn-theme mb-3 text-white py-2 align-self-start my-3"><i class="fa-solid fa-pen-to-square"></i></a>
            </div>
        </div>
    </div>
    <!-- End:: Banner & logo -->

    <!-- section -->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 order-1 order-lg-0">
                    <div class="article__content">
                        <p>{{ $channel->description }}</p>

                        {{-- <h5>Languages </h5>
                        <p>{{ $channel->language }}</p> --}}

                        {{-- <h5>Channel URL</h5>
                        <p>{{ $channel->logo }}</p> --}}
                    </div>
                </div>
            </div>
            <h2 class="section__title mt-5">Playlist</h2>
            <div class="row category">
                <!-- card -->
                @foreach ($channeltitle as $key => $channel)
                    <div class="col-12 col-sm-6 col-md-4 col-xl-3 col-xl-20 remove">
                        <div class="card card--catalog">
                            <a href="{{ route('moviedetail', [$channel->title->ttid]) }}" class="card__cover">
                                <img src="{{ $channel->title->poster }}" alt="{{ $channel->title->title }}">
                                {{-- <span class="card__new">Watch</span> --}}
                            </a>

                            <div class="social-share card__platforms">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$channel->title->ttid]) }}" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$channel->title->ttid]) }}" class="tw"><i class="fa-brands fa-twitter"></i></a>
                            </div>

                            <div class="movie-desc">
                                <div class="card__title">
                                    <h3><a href="{{ route('moviedetail', [$channel->title->ttid]) }}">{{ $channel->title->title }}</a>
                                    </h3>
                                </div>
                            </div>

                            <button class="customchannel-ico card__favorite--delete" type="button" data-id="{{ $channel->id }}">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <path d='M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='80' y1='112' x2='432' y2='112' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
                                    <path d='M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='256' y1='176' x2='256' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='184' y1='176' x2='192' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='328' y1='176' x2='320' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                </svg>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
@endsection