@using MotoVaultPro.Helper
@model List<ReminderRecordViewModel>
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@if (Model.Any())
{
    <div class="row row-cols-1 row-cols-md-3 g-4 mt-1 kiosk-content" data-masonry='{"percentPosition": true }'>
        @foreach (ReminderRecordViewModel reminder in Model)
        {
            <div class="col" onclick="toggleReminderNote(this)">
                <div class="card @StaticHelper.GetReminderUrgencyColor(reminder.Urgency)">
                    <div class="card-body" style="padding-top:0.25rem; padding-bottom:0.25rem;">
                        <h5 class="card-title">@reminder.Description</h5>
                        <div class="row">
                            <div class="col-12">
                                <p class="display-7 d-none reminder-note" style="white-space: pre-wrap">@reminder.Notes</p>
                                <p class="lead text-wrap">@translator.Translate(userLanguage, StaticHelper.GetTitleCaseReminderUrgency(reminder.Urgency))</p>
                                <div class="row">
                                    @if (reminder.Metric == ReminderMetric.Date || reminder.Metric == ReminderMetric.Both)
                                    {
                                        <div class="col-6"><i class='bi bi-calendar-event me-2'></i>@reminder.Date.ToShortDateString()</div>
                                    }
                                    @if (reminder.Metric == ReminderMetric.Odometer || reminder.Metric == ReminderMetric.Both)
                                    {
                                        <div class="col-6"><i class='bi bi-speedometer me-2'></i>@reminder.Mileage</div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
}
else
{
    <div class="row no-data-message">
        <div class="col">
            <span class="display-3">@translator.Translate(userLanguage, "No records available to display")</span>
        </div>
    </div>
}