{% 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>
                <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
                    hx-swap="innerHTML">
                    <i class="fas fa-plus mr-2"></i>
                    Add Folder
                </button>
            </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 %}