{% extends 'django_tailwind/base.html' %}

{% block container_class %}{% endblock %}

{% block header %}{% endblock %}
{% block footer %}{% endblock %}

{% block main %}
{% block theme_toggle %}
<!-- Floating Dark Mode Toggle -->
<div class="fixed top-4 right-4 z-50">
    {% include 'django_tailwind/components/theme_toggle.html' %}
</div>
{% endblock %}

<div class="min-h-screen flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        {% block content %}
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 text-center">
            {% block simple_icon %}
            <div class="text-6xl mb-4">
                {% block icon %}ℹ️{% endblock %}
            </div>
            {% endblock %}

            {% block simple_title %}
            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
                {% block heading %}Title{% endblock %}
            </h1>
            {% endblock %}

            {% block simple_message %}
            <p class="text-gray-700 dark:text-gray-300 mb-6">
                {% block message %}Message goes here{% endblock %}
            </p>
            {% endblock %}

            {% block simple_actions %}
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                {% block actions %}
                <a href="/"
                   class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                    Go Home
                </a>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
</div>
{% endblock %}