auto.bus_razor/TicketOffice/Pages/Index.cshtml

@page
@using System.Globalization
@using Newtonsoft.Json
@model TicketOffice.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
    CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA");
}

<link rel="stylesheet" href="~/css/Routes.css" asp-append-version="true"/>

<form class="search-block">
    <div class="opt">
        <div class="station">
            <div class="title">
                Звідки
            </div>
            <input type="text" autocomplete="off" asp-for="from">
        </div>
        <a class="change-dir"></a>
        <div class="station">
            <div class="title">
                Куди
            </div>
            <input type="text" autocomplete="off" asp-for="to">
        </div>
        <div class="date">
            <div class="title">
                Дата відправлення
            </div>
            <input type="date" value="@Model.date.ToString("yyyy-MM-dd")" asp-for="date">
        </div>
        <div class="search-btn">
            <input type="submit" class="search-btn" value="Пошук"/>
        </div>
    </div>
</form>

<!--
<a asp-page-handler="SortByDuration" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd") asp-route-isDescending="false">За зростанням</a>
<a asp-page-handler="SortByDuration" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd") asp-route-isDescending="true">За спаданням</a>
-->

@if (Model.Route.Count > 0)
{
    <div class="route-list">
        <table>
            <thead>
                <tr>
                    <th>
                        № автобуса
                        <a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd")>🠕</a>
                    </th>
                    <th>
                        Звідки / Куди
                    </th>
                    <th>
                        Дата
                    </th>
                    <th>
                        <div class="departure">
                            Відправлення
                            <a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd")>🠕</a>
                        </div>
                        <div class="arrival">
                            Прибуття
                            <a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd")>🠕</a>
                        </div>
                    </th>
                    <th>
                        Тривалість
                        <a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd")>🠕</a>
                    </th>
                    <th>
                        Вільніих місць
                    </th>
                    <th>
                        Дії
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var route in Model.Route)
                {
                    <tr class="table-row">
                        <td class="num">
                            <div>@route.Number</div>
                            <div class="city-list-btn"><a class="city-list-btn">Маршрут</a></div>
                        </td>
                        <td class="city">
                            <div>@route.Cities.First().Name</div>
                            <div>@route.Cities.Last().Name</div>
                        </td>
                        <td>
                            <div class="route-date">
                                <span>
                                    Відправлення
                                </span>
                                <span>
                                    @route.Cities.First().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
                                    @route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy")
                                </span>
                            </div>
                            <div class="route-date">
                                <span>Прибуття</span>
                                <span>
                                    @route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
                                    @route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy")
                                </span>
                            </div>
                        </td>
                        <td class="time">
                            <div>@route.Cities.First().DepartureTime?.ToString("HH:mm")</div>
                            <div>@route.Cities.Last().ArrivalTime?.ToString("HH:mm")</div>
                        </td>
                        <td class="duration">
                            @{ TimeSpan? duration = route.Cities.Last().ArrivalTime - route.Cities.First().DepartureTime; }
                            @($"{duration?.TotalHours.ToString().Split(",")[0]}:{duration?.Minutes}")
                        </td>
                        <td class="capacity">
                            @(route.Capacity - route.Tickets.Count)
                        </td>
                        <td class="action">
                            <a class="link-btn-choose">Вибрати</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}
else
{
    <div class="search-error">
        <p>По заданому Вами напрямку місць немає</p>
    </div>
}