{% extends get_active_back_theme() + '/base.html' %}

{% set active_page ='import demo' %}

{% block content %}
<div class="row justify-content-center align-items-center py-5" style="min-height: 70vh;">
    <div class="col-md-8 text-center">
        <div class="card border-0 shadow-sm py-5 px-4" style="border-radius: 24px; background: white;">
            <div class="mb-4">
                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                    <i class="fas fa-magic text-primary" style="font-size: 2rem; color: #6c5ce7 !important;"></i>
                </div>
                <h1 class="font-weight-bold mb-2" style="letter-spacing: -1px; color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">Populate Workspace</h1>
                <p class="text-muted" style="font-size: 1.1rem;">Instantly set up your inventory with carefully curated demo products, categories, and settings.</p>
            </div>
            
            <div class="mt-4">
                <form action="{{ url_for('demo.do_import') }}" method="POST">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button type="submit" class="btn btn-dark btn-lg px-5 py-3 shadow-sm" style="border-radius: 14px; font-weight: 600; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: #1d1d1f; border: none;">
                        Import Demo Data
                    </button>
                </form>
                <div class="mt-4">
                    <a href="{{ url_for('dashboard.index') }}" class="text-secondary" style="text-decoration: none; font-weight: 500;">Maybe later</a>
                </div>
            </div>
        </div>
        
        <div class="mt-5 text-muted small" style="opacity: 0.6;">
            <p>This will add sample products to your current database.<br>Existing data will not be removed.</p>
        </div>
    </div>
</div>

<style>
    .btn-dark:hover {
        transform: scale(1.02);
        background-color: #000;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}