{% extends "base.html" %}

{% block title %}Email Organizer - Prototype{% endblock %}

{% block header %}
{% include "partials/header.html" %}
{% endblock %}

{% block content %}
<div class="flex">
    {% include "partials/sidebar.html" %}

    <!-- Main Content -->
    <div class="flex-1 ml-64 mt-16 flex flex-col">
        <!-- Top Bar -->

        <!-- Main Content Area -->
        <main class="flex-1 p-6 overflow-auto bg-base-100">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h2 class="text-2xl font-bold">Email Folders</h2>
                    <p class="text-base-content/70">Create and manage your email organization rules</p>
                </div>
                <div data-loading-states>
                    <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
                        data-loading-disable>
                        <i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
                        <span data-loading-class="!hidden">Add Folder</span>
                        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                    </button>
                </div>
            </div>

            <!-- Welcome Section -->
            <div class="mb-8 p-6 bg-base-100 rounded-box shadow-lg border border-base-300">
                <h3 class="text-xl font-bold mb-2">Welcome to Email Organizer!</h3>
                <p class="text-base-content/80 mb-4">Organize your emails automatically with AI-powered rules. Create folders and set up rules to categorize incoming emails.</p>
                <div class="flex space-x-4"  data-loading-states>
                    <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
                        hx-swap="innerHTML"
                        data-loading-disable>
                        <i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
                        <span data-loading-class="!hidden">Create Your First Folder</span>
                        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                    </button>
                    {% if current_user.imap_config %}
                    <div data-loading-states>
                    <button class="btn btn-outline" hx-post="/api/imap/sync" hx-target="#folders-list"
                        hx-swap="innerHTML"
                        data-loading-disable>
                        <i class="fas fa-sync mr-2" data-loading-class="!hidden"></i>
                        <span data-loading-class="!hidden">Sync Folders</span>
                        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                    </button>
</div>
                    <div data-loading-states  >
                    <button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML"
                        data-loading-disable>
                        <i class="fas fa-cog" data-loading-class="!hidden"></i>
                        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                    </button>
                    </div>
                    {% else %}
                    <div data-loading-states>
                    <button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML"
                        data-loading-disable>
                        <i class="fas fa-cog mr-2" data-loading-class="!hidden"></i>
                        <span data-loading-class="!hidden">Configure IMAP</span>
                        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                    </button>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Stats Section -->
            <div class="mb-8 grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="card bg-base-100 shadow-md border border-base-300 p-4">
                    <div class="text-2xl font-bold text-primary">{{ folders|length }}</div>
                    <div class="text-sm text-base-content/70">Total Folders</div>
                </div>
                <div class="card bg-base-100 shadow-md border border-base-300 p-4">
                    <div class="text-2xl font-bold text-secondary">0</div>
                    <div class="text-sm text-base-content/70">Emails Processed</div>
                </div>
                <div class="card bg-base-100 shadow-md border border-base-300 p-4">
                    <div class="text-2xl font-bold text-info">0</div>
                    <div class="text-sm text-base-content/70">Active Rules</div>
                </div>
            </div>

            <!-- Search and Filter -->
            <div class="mb-6 flex justify-between items-center">
                <div class="relative w-64">
                    <input type="text" placeholder="Search folders..." class="input input-bordered w-full pr-10">
                    <i class="fas fa-search absolute right-3 top-3 text-base-content/50"></i>
                </div>
                <div class="flex space-x-2">
                    <button class="btn btn-sm btn-outline">All</button>
                    <button class="btn btn-sm btn-outline">High Priority</button>
                    <button class="btn btn-sm btn-outline">Normal</button>
                </div>
            </div>

            <section id="folders-list" class="mb-12">
                {% include 'partials/folders_list.html' %}
            </section>
        </main>
    </div>
</div>
{% endblock %}

{% block modal %}
{% include "partials/modal_holder.html" %}
{% endblock %}