@page
@model EventHub.Web.Pages.IndexModel
@using Microsoft.AspNetCore.Mvc.Localization
@using EventHub.Localization
@using EventHub.Web.Pages.Events
@inject IHtmlLocalizer<EventHubResource> L

@section styles {
    <abp-style-bundle>
        <abp-style src="/Pages/Index.css"/>
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        <abp-script src="/Pages/Index.js"/>
    </abp-script-bundle>
}

<h2>Upcoming Events</h2>

<abp-row>
    @foreach (var eventItem in Model.Events)
    {
        <abp-column size-lg="_4" size-md="_6">
            <abp-card class="mb-3">
                @if (eventItem.CoverImageContent is null)
                {
                    <img abp-card-image="Top" src="https://picsum.photos/seed/@eventItem.Id.ToString()/400/160?blur=8" alt="@eventItem.Title"/>
                }
                else
                {
                    <img abp-card-image="Top" style="max-height: 400px; min-height: 160px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventItem.CoverImageContent)}")" alt="@eventItem.Title"/>
                }
                <abp-card-body>
                    <abp-card-title>@eventItem.Title</abp-card-title>
                    <abp-card-subtitle>
                        @EventDateHelper.GetDateRangeText(eventItem.StartTime, eventItem.EndTime) <br/>
                        <span class="text-muted">@L["OrganizedBy"]</span> <a href="@Url.Page("/Organizations/Profile", new {name = eventItem.OrganizationName})">@eventItem.OrganizationDisplayName</a>
                    </abp-card-subtitle>
                    <abp-card-text class="mt-2">
                        @eventItem.Description.TruncateWithPostfix(100)
                    </abp-card-text>
                    <a abp-button="Primary" href="@Url.Page("/Events/Detail", new { url = eventItem.Url })"> @L["SeeEvent"]</a>
                </abp-card-body>
            </abp-card>
        </abp-column>
    }
</abp-row>