@extends('layouts.nova.content-layout')

@section('page-content')

<div class="max-w-2xl space-y-10">

    {{-- Feed list --}}
    <div>
        <h2 class="text-lg font-semibold text-white mb-4">Available Feeds</h2>
        <ul class="divide-y divide-neutral-800 rounded-lg border border-neutral-800 overflow-hidden">
            @foreach ($feeds as $key => $feed)
            <li class="flex items-center gap-4 px-5 py-4 bg-nova-900/50 hover:bg-nova-800/60 transition-colors">
                <svg class="h-6 w-6 flex-shrink-0 text-orange-400" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/>
                </svg>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-white">{{ $feed['title'] }}</p>
                    <p class="text-xs text-neutral-500 truncate">{{ url($feed['url']) }}</p>
                </div>
                <a href="{{ $feed['url'] }}"
                   class="flex-shrink-0 rounded-md border border-neutral-700 px-3 py-1.5 text-xs text-neutral-400 hover:border-orange-500 hover:text-orange-400 transition-colors">
                    Subscribe
                </a>
            </li>
            @endforeach
        </ul>
    </div>

    {{-- About RSS --}}
    <div class="prose prose-invert prose-sm max-w-none">
        <h2>About RSS</h2>
        <p>
            RSS is a family of web feed formats used to publish frequently updated digital content,
            such as blogs, news feeds, or upload streams. By subscribing to an RSS feed you can
            follow Skinbase updates in your favourite feed reader without needing to visit the site.
        </p>
        <h3>How to subscribe</h3>
        <p>
            Copy one of the feed URLs above and paste it into your feed reader (e.g. Feedly, Inoreader,
            or any app that supports RSS 2.0). The reader will automatically check for new content and
            notify you of updates.
        </p>
        <h3>Feed formats</h3>
        <ul>
            <li>Really Simple Syndication (RSS 2.0)</li>
            <li>Rich Site Summary (RSS 0.91, RSS 1.0)</li>
            <li>RDF Site Summary (RSS 0.9 and 1.0)</li>
        </ul>
        <p>
            RSS delivers its information as an XML file. Our feeds include title, description,
            author, publication date, and a media thumbnail for each item.
        </p>
    </div>

</div>

@push('head')
    @foreach ($feeds as $key => $feed)
    <link rel="alternate" type="application/rss+xml" title="{{ $feed['title'] }} — Skinbase" href="{{ url($feed['url']) }}">
    @endforeach
@endpush

@endsection