{% extends 'base/base.html' %}
{% load static %}
{% load cotton %}

{% block title %}Simple Cotton Test - ThrillWiki{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
    <div class="text-center">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            Simple Cotton Components Test
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-400">
            Basic test of Cotton components
        </p>
    </div>

    <!-- Test 1: Simple Button -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
        <h2 class="text-xl font-semibold mb-4">1. Button Component</h2>
        
        <div class="space-y-3">
            <c-ui.button text="Test Button" />
            <c-ui.button variant="outline" text="Outline Button" />
        </div>
    </section>

    <!-- Test 2: Simple Card -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
        <h2 class="text-xl font-semibold mb-4">2. Card Component</h2>
        
        <c-ui.card title="Test Card" description="This is a test card">
            <c-slot:content>
                <p>Card content goes here.</p>
            </c-slot:content>
        </c-ui.card>
    </section>

    <!-- Test 3: Simple Input -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
        <h2 class="text-xl font-semibold mb-4">3. Input Component</h2>
        
        <c-ui.input placeholder="Test input field" />
    </section>

    <!-- Test 4: Simple Status Badge -->
    <section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
        <h2 class="text-xl font-semibold mb-4">4. Status Badge Component</h2>
        
        <c-ui.status_badge status="OPERATIONAL" />
    </section>

    <!-- Success indicator -->
    <section class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border border-green-200 dark:border-green-700">
        <h2 class="text-xl font-semibold mb-4 text-green-800 dark:text-green-200">
            <i class="fas fa-check-circle mr-2"></i>
            Basic Cotton Test Complete
        </h2>
        <p class="text-green-700 dark:text-green-300">
            If you can see this page without errors, basic Cotton components are working.
        </p>
    </section>
</div>
{% endblock %}