@using TaskTracker.Api.Pages
@model TaskTracker.Core.Entities.AppMapping
@{
    var isNew = Model.Id == 0;
    var formId = isNew ? "mapping-form-new" : $"mapping-form-{Model.Id}";
    var rowId = isNew ? "mapping-row-new" : $"mapping-row-{Model.Id}";
}
<tr id="@rowId" style="background: rgba(255,255,255,0.04);">
    <td>
        <input type="text" name="pattern" value="@Model.Pattern" placeholder="Pattern..."
               class="input" autofocus form="@formId" />
    </td>
    <td>
        <select name="matchType" class="select" form="@formId">
            @{
                var matchTypes = new[] { "ProcessName", "TitleContains", "UrlContains" };
                var currentMatch = string.IsNullOrEmpty(Model.MatchType) ? "ProcessName" : Model.MatchType;
            }
            @foreach (var mt in matchTypes)
            {
                if (mt == currentMatch)
                {
                    <option value="@mt" selected="selected">@mt</option>
                }
                else
                {
                    <option value="@mt">@mt</option>
                }
            }
        </select>
    </td>
    <td>
        <input type="text" name="category" value="@Model.Category" placeholder="Category..."
               class="input" form="@formId" />
    </td>
    <td>
        <input type="text" name="friendlyName" value="@Model.FriendlyName" placeholder="Friendly name (optional)"
               class="input" form="@formId" />
    </td>
    <td>
        <form id="@formId"
              hx-post="/mappings?handler=Save@(isNew ? "" : $"&id={Model.Id}")"
              hx-target="#@rowId"
              hx-swap="outerHTML"
              style="display: flex; gap: 4px;">
            <button type="submit" class="btn btn--ghost btn--sm" style="color: #22c55e;" title="Save">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </button>
            @if (isNew)
            {
                <button type="button" class="btn btn--ghost btn--sm" title="Cancel"
                        onclick="this.closest('tr').remove()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                </button>
            }
            else
            {
                <button type="button" class="btn btn--ghost btn--sm" title="Cancel"
                        hx-get="/mappings?handler=Row&id=@Model.Id"
                        hx-target="#mapping-row-@Model.Id"
                        hx-swap="outerHTML">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                </button>
            }
        </form>
    </td>
</tr>