@model JobsMedical.Web.Services.Recommendation
@{
    var s = Model.Shift;
    var (badgeClass, typeLabel) = s.ShiftType switch
    {
        ShiftType.Day => ("badge-day", "صبح"),
        ShiftType.Evening => ("badge-evening", "عصر"),
        ShiftType.Night => ("badge-night", "شب"),
        _ => ("badge-oncall", "آنکال"),
    };
}
<a class="card card-pad shift-card" asp-page="/Shifts/Details" asp-route-id="@s.Id">
    <div class="row" style="justify-content: space-between;">
        <span class="facility">@(s.Role?.Name ?? "شیفت")</span>
        <span class="badge @badgeClass">@typeLabel</span>
    </div>
    <div class="row">
        @if (s.GenderRequirement != Gender.Any)
        {
            <span class="badge badge-gender">@JalaliDate.GenderLabel(s.GenderRequirement)</span>
        }
        <span>🏥 @s.Facility?.Name</span>
        <span>📍 @s.Facility?.City?.Name</span>
    </div>
    <div class="row">📅 @JalaliDate.WeekDayName(s.Date)، @JalaliDate.ToLongDate(s.Date) — 🕐 @JalaliDate.Time(s.StartTime)</div>
    <partial name="_HourBar" model="s" />

    @* The "why" — what makes a pattern engine trustworthy: every pick is explained. *@
    <div class="rec-reasons">
        @foreach (var reason in Model.Reasons)
        {
            <span class="rec-reason">✓ @reason</span>
        }
    </div>

    <div class="foot">
        <span class="pay">@JalaliDate.PayLabel(s.PayType, s.PayAmount, s.SharePercent)</span>
        <span class="btn btn-outline" style="padding: 6px 14px;">جزئیات</span>
    </div>
</a>