{{define "title"}}Dashboard - CMC Sales{{end}}

{{define "content"}}
<div class="columns">
    <div class="column">
        <h1 class="title">CMC Sales Dashboard</h1>
        <p class="subtitle">Welcome to the modern CMC Sales management system</p>
    </div>
</div>

<div class="columns">
    <!-- Customers Card -->
    <div class="column is-3">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-primary">
                            <i class="fas fa-users fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">Customers</p>
                        <p class="subtitle is-6">Manage customer accounts</p>
                    </div>
                </div>
                <div class="content">
                    <a href="/customers" class="button is-primary is-fullwidth">
                        View Customers
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Products Card -->
    <div class="column is-3">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-info">
                            <i class="fas fa-box fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">Products</p>
                        <p class="subtitle is-6">Product catalog management</p>
                    </div>
                </div>
                <div class="content">
                    <a href="/products" class="button is-info is-fullwidth">
                        View Products
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Purchase Orders Card -->
    <div class="column is-3">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-success">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">Purchase Orders</p>
                        <p class="subtitle is-6">Track and manage orders</p>
                    </div>
                </div>
                <div class="content">
                    <a href="/purchase-orders" class="button is-success is-fullwidth">
                        View Orders
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Enquiries Card -->
    <div class="column is-3">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-warning">
                            <i class="fas fa-envelope fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">Enquiries</p>
                        <p class="subtitle is-6">Sales enquiry management</p>
                    </div>
                </div>
                <div class="content">
                    <a href="/enquiries" class="button is-warning is-fullwidth">
                        View Enquiries
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="columns">
    <!-- Documents Card -->
    <div class="column is-3">
        <div class="card">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-danger">
                            <i class="fas fa-file-alt fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">Documents</p>
                        <p class="subtitle is-6">Quotes, invoices, and more</p>
                    </div>
                </div>
                <div class="content">
                    <a href="/documents" class="button is-danger is-fullwidth">
                        View Documents
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Placeholder for future modules -->
    <div class="column is-3">
        <div class="card has-background-light">
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <span class="icon is-large has-text-grey-light">
                            <i class="fas fa-plus fa-2x"></i>
                        </span>
                    </div>
                    <div class="media-content">
                        <p class="title is-4 has-text-grey">More Coming</p>
                        <p class="subtitle is-6 has-text-grey">Additional features planned</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity Section -->
<div class="box mt-5">
    <h2 class="title is-4">Recent Activity</h2>
    <div id="recent-activity" hx-get="/api/recent-activity" hx-trigger="load">
        <div class="has-text-centered">
            <span class="icon is-large">
                <i class="fas fa-spinner fa-pulse"></i>
            </span>
        </div>
    </div>
</div>
{{end}}