@using TaskTracker.Api.Pages
@model TaskTracker.Core.Entities.AppMapping
@{
    var matchColor = MappingsModel.MatchTypeColors.GetValueOrDefault(Model.MatchType, "#64748b");
    var catColor = MappingsModel.CategoryColors.GetValueOrDefault(Model.Category, "#64748b");
}
<tr id="mapping-row-@Model.Id">
    <td><span class="mapping-pattern">@Model.Pattern</span></td>
    <td>
        <span class="match-type-badge" style="background: @(matchColor)20; color: @matchColor;">
            @Model.MatchType
        </span>
    </td>
    <td>
        <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-primary);">
            <span style="width: 8px; height: 8px; border-radius: 50%; background: @catColor; flex-shrink: 0;"></span>
            @Model.Category
        </span>
    </td>
    <td style="color: var(--color-text-secondary);">@(Model.FriendlyName ?? "\u2014")</td>
    <td>
        <div style="display: flex; gap: 4px;">
            <button class="btn btn--ghost btn--sm"
                    hx-get="/mappings?handler=EditRow&id=@Model.Id"
                    hx-target="#mapping-row-@Model.Id"
                    hx-swap="outerHTML"
                    title="Edit">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
            </button>
            <button class="btn btn--ghost btn--sm"
                    hx-delete="/mappings?handler=Delete&id=@Model.Id"
                    hx-target="#mapping-row-@Model.Id"
                    hx-swap="outerHTML"
                    hx-confirm="Delete this mapping rule?"
                    title="Delete"
                    style="color: var(--color-text-secondary);">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
            </button>
        </div>
    </td>
</tr>