{% extends "shopyo_dashboard/dashboard_base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" x-data="{ search: '' }">
    <!-- Header/Search Area (Optional but helpful for many modules) -->
    <div class="col-span-full mb-8 flex flex-col md:flex-row justify-between items-end md:items-center gap-4 border-b border-slate-100 dark:border-slate-800 pb-8">
        <div>
            <h1 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight uppercase">Modules</h1>
            <p class="text-slate-500 dark:text-slate-400 font-medium text-xs uppercase tracking-widest mt-1">Select a module to manage</p>
        </div>

        <div class="relative w-full md:w-72">
            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs transition-colors group-focus-within:text-primary"></i>
            <input
                type="text"
                x-model="search"
                placeholder="Search modules..."
                class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl py-3 pl-11 pr-4 text-xs focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all outline-none"
            >
        </div>
    </div>

    <!-- The 1-to-1 Module Grid -->
    {% for info in all_info %}
        {% if all_info[info]['type'] == 'show' %}
        <a href="{{ all_info[info]['url_prefix'] + all_info[info].get('dashboard', '') }}"
           x-show="search === '' || '{{ all_info[info]['display_string'] }}'.toLowerCase().includes(search.toLowerCase())"
           x-transition.scale.95
           class="group bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-10 rounded-3xl hover:border-primary dark:hover:border-primary transition-all hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-2 flex flex-col items-center text-center relative overflow-hidden">

            <!-- Icon -->
            <div class="w-20 h-20 rounded-2xl bg-slate-50 dark:bg-slate-800 text-slate-400 group-hover:bg-primary/10 group-hover:text-primary flex items-center justify-center text-4xl mb-6 transition-all duration-300 group-hover:rotate-6 shadow-inner">
                <i class="{{ all_info[info]['fa-icon'] }}"></i>
            </div>

            <!-- Label -->
            <h4 class="font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors tracking-tight text-lg">{{ all_info[info]['display_string'] }}</h4>

            <!-- Subtitle/Path -->
            <span class="mt-2 px-3 py-1 rounded-full bg-slate-50 dark:bg-slate-800 text-[9px] font-bold text-slate-500 uppercase tracking-[0.1em] border border-slate-100 dark:border-slate-700/50">
                {{ all_info[info]['url_prefix'] }}
            </span>

            <!-- Arrow Indicator -->
            <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                <i class="fas fa-chevron-right text-primary text-xs"></i>
            </div>
        </a>
        {% endif %}
    {% endfor %}
</div>
{% endblock %}