@page
@using TaskTracker.Api.Pages
@model MappingsModel

<div class="mappings-page">
    <div class="analytics-header">
        <h1 class="page-title">App Mappings</h1>
        <button class="btn btn--primary btn--sm"
                hx-get="/mappings?handler=AddRow"
                hx-target="#mapping-tbody"
                hx-swap="afterbegin">
            + Add Rule
        </button>
    </div>

    @if (Model.Mappings.Count == 0)
    {
        <div class="surface empty-state">
            <p style="color: var(--color-text-secondary); font-size: 14px; margin-bottom: 12px;">No mappings configured</p>
            <button class="btn btn--ghost"
                    hx-get="/mappings?handler=AddRow"
                    hx-target="#mapping-tbody"
                    hx-swap="afterbegin">
                + Add your first mapping rule
            </button>
        </div>
    }

    <div class="surface" style="padding: 0; overflow: hidden;">
        <table class="mappings-table">
            <thead>
                <tr>
                    <th>Pattern</th>
                    <th>Match Type</th>
                    <th>Category</th>
                    <th>Friendly Name</th>
                    <th style="width: 96px;">Actions</th>
                </tr>
            </thead>
            <tbody id="mapping-tbody">
                @foreach (var m in Model.Mappings)
                {
                    <partial name="Partials/_MappingRow" model="m" />
                }
            </tbody>
        </table>
    </div>
</div>