@model List<PowderCoating.Core.Entities.Job>

@if (!Model.Any())
{
    <div class="text-center py-4 text-muted">
        <i class="bi bi-clipboard-x" style="font-size: 2rem;"></i>
        <p class="mt-2 mb-0">No jobs have used this powder yet.</p>
    </div>
}
else
{
    <p class="text-muted small mb-3">@Model.Count job@(Model.Count == 1 ? "" : "s") found using this powder.</p>
    <div class="list-group list-group-flush">
        @foreach (var job in Model)
        {
            <div class="list-group-item px-0">
                <div class="d-flex gap-3 align-items-start">
                    @if (job.Photos.Any())
                    {
                        <a href="@Url.Action("Details", "Jobs", new { id = job.Id })" class="flex-shrink-0">
                            <img src="@Url.Action("GetPhoto", "Jobs", new { id = job.Photos.OrderBy(p => p.CreatedAt).First().Id })"
                                 alt="Job photo"
                                 style="width:64px;height:64px;object-fit:cover;border-radius:6px;" />
                        </a>
                    }
                    else
                    {
                        <div class="flex-shrink-0 d-flex align-items-center justify-content-center bg-light rounded"
                             style="width:64px;height:64px;">
                            <i class="bi bi-image text-muted" style="font-size:1.5rem;"></i>
                        </div>
                    }
                    <div class="flex-grow-1 min-width-0">
                        <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
                            <a href="@Url.Action("Details", "Jobs", new { id = job.Id })"
                               class="fw-semibold text-decoration-none">@job.JobNumber</a>
                            <span class="badge bg-secondary text-white small">
                                @job.JobStatus?.DisplayName
                            </span>
                        </div>
                        <div class="text-muted small mt-1">@job.Customer?.CompanyName</div>
                        <div class="d-flex gap-3 mt-1">
                            <span class="text-muted small">
                                <i class="bi bi-calendar3 me-1"></i>@job.CreatedAt.ToString("MMM dd, yyyy")
                            </span>
                            @if (job.Photos.Any())
                            {
                                <span class="text-muted small">
                                    <i class="bi bi-camera me-1"></i>@job.Photos.Count photo@(job.Photos.Count == 1 ? "" : "s")
                                </span>
                            }
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
}