{% extends "shopyo_base/module_base.html" %}
{% set active_page ='import demo' %}
{% block sidebar %}{% endblock %}
{% block module_content %}
<div class="flex items-center justify-center py-12" style="min-height: 70vh;">
 <div class=" 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-slate-400" 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 px-6 py-4 text-sm 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('shopyo_dashboard.index') }}" class="text-secondary" style="text-decoration: none; font-weight: 500;">Maybe later</a>
 </div>
 </div>
 </div>
 
 <div class="mt-5 text-slate-400 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 %}