{% extends "shopyo_base/module_base.html" %}
{% set active_page ='import demo' %}
{% block pagehead %}<title>Import Demo Data</title>{% endblock %}
{% block sidebar %}{% endblock %}
{% block module_content %}
<div class="max-w-6xl mx-auto">
  <div class="flex items-center justify-center" style="min-height: 70vh;">
    <div class="card max-w-lg w-full">
      <div class="card-body text-center py-12 px-8">
        <div class="w-20 h-20 rounded-2xl bg-primary/10 dark:bg-primary/20 flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-magic text-2xl text-primary"></i>
        </div>
        <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight mb-2">Populate Workspace</h3>
        <p class="text-xs text-slate-400 font-semibold uppercase tracking-widest mb-8">Instantly set up your inventory with demo data</p>

        <form action="{{ url_for('shopyo_ecommerce.demo.do_import') }}" method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
          <button type="submit" class="bg-primary text-white font-bold py-3 px-8 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 text-xs uppercase tracking-widest">
            <i class="fas fa-magic mr-2"></i>Import Demo Data
          </button>
        </form>

        <div class="mt-6">
          <a href="{{ url_for('shopyo_dashboard.index') }}" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest hover:text-slate-600 dark:hover:text-slate-300 transition-colors">Maybe later</a>
        </div>

        <div class="mt-8 text-[10px] text-slate-400 leading-relaxed">
          This will add sample products to your current database.<br>Existing data will not be removed.
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}