---
import Layout from '../layouts/Layout.astro';
import SlugInput from '../components/SlugInput.astro';

const title = "ComicK - Custom RSS Feed";
const description = "Create a custom RSS feed for your favorite comics";
---

<Layout title={title} description={description}>
  <div class="container mx-auto px-4 py-8">
    <!-- Add back button -->
    <a 
      href="/en/sfw/all" 
      class="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-secondary hover:bg-hover rounded-md transition-colors font-medium"
    >
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        class="w-5 h-5" 
        viewBox="0 0 24 24" 
        fill="none" 
        stroke="currentColor" 
        stroke-width="2" 
        stroke-linecap="round" 
        stroke-linejoin="round"
      >
        <path d="M19 12H5M12 19l-7-7 7-7"/>
      </svg>
      Back to Comics
    </a>

    <main class="mx-auto px-3 sm:px-4 lg:px-8 max-w-[800px] py-4 sm:py-8">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 sm:mb-8">Custom RSS Feed</h1>
      
      <div class="bg-secondary/50 p-3 sm:p-6 rounded-lg shadow-lg">
        <SlugInput />
      </div>

      <div class="mt-4 sm:mt-8 text-center text-primary/60 text-sm sm:text-base">
        <p>Search for your favorite comics using the search box above, or add their slugs manually.</p>
        <p class="mt-2">Manual example: For <a href="https://comick.io/comic/01-one-piece" class="text-accent hover:underline">https://comick.io/comic/01-one-piece</a>, the slug is "01-one-piece"</p>
      </div>
    </main>
  </div>
</Layout>