@selectedTime?.ToString("F")

<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt" 
                   Value="@selectedTime" ValueChanged="@( (DateTime? v) => ValueChangedHandler(v) )">
</TelerikTimePicker>

@code {
    public DateTime Min = new DateTime(1900, 1, 1, 10, 0, 0);
    public DateTime Max = new DateTime(1900, 1, 1, 20, 0, 0);
    public DateTime? selectedTime { get; set; } = new DateTime(1900, 1, 1, 12, 0, 0);

    void ValueChangedHandler(DateTime? updatedTime)
    {
        selectedTime = new DateTime(
                selectedTime.Value.Year,
                selectedTime.Value.Month,
                selectedTime.Value.Day,
                updatedTime.Value.Hour,
                updatedTime.Value.Minute,
                updatedTime.Value.Second
            );
    }
}

@inject ITelerikStringLocalizer Loc

<LanguageTrackProvider OnInitializeEvent="provider => provider.RegisterComponent(this)" />

@if (Images.Any() && _selectedImage != null)
{
    <div class="d-flex @Class" style="height: @Height; width: @Width;">
        <ul aria-label="@Loc["ImageThumbnails"]" role="radiogroup" class="image-collection-button-container">
            @foreach (var image in Images)
            {
                <li>
                    <button @onclick="() => OnImageSelect(image)"
                            class="@($"image-collection-button{(image.Src == _selectedImage.Src ? " selected" : "")}")"
                            role="radio" aria-checked="@(image.Src == _selectedImage.Src ? "true" : "false")">
                        <img src="@image.Src" alt="@image.Alt" />
                    </button>
                </li>

            }
        </ul>
        <div class="image-collection-image-container">
            <MagnifiableImage Image="@(new ImageInfo(_selectedImage.Src, _selectedImage.Alt))" Class="image-collection-image" MagnifyScale="@MagnifyScale"
                              Height="@(ConstrainImageHeight ? "calc(100% - 2px)" : "auto")" Width="@(ConstrainImageWidth ? "100%" : "auto")" />
        </div>
    </div>
}
else
{
    <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle" Height="@Height" Width="@Width" Class="@Class"/>
}

<style>
    .image-collection-button-container {
        flex: 0 0 auto;
        width: 10%;
        height: 100%; 
        min-width: 90px;
        max-width: 110px;
        overflow-y: auto;
        padding: 2px;
        margin: 0;
        scrollbar-color: rgba(1, 1, 1, 0.25) rgba(0, 0, 0, 0);
        scrollbar-gutter: stable;
        list-style: none;
    }
    
    .image-collection-button {
        padding: 0;
        margin-bottom: 1rem;
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-radius: 0.5rem;
        width: auto;
        aspect-ratio: 1 / 1;
        display: block;
    }
    .image-collection-button:hover {
        filter: brightness(90%);
    }
    .image-collection-button:focus {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #424242) 50%, transparent);
    }
    .image-collection-button.selected {
        box-shadow: 0 0 0 2px var(--kendo-color-primary, #1274AC);
    }
    .image-collection-button img {
        width: 100%;
        height: 100%;
        min-width: 70px;
        min-height: 70px;
        max-width: 90px;
        max-height: 90px;
        object-fit: cover;
        border-radius: 0.5rem;
        display: block;
    }
    
    .image-collection-image-container {
        flex: 0 0 auto;
        width: 90%;
        padding: 2px;
    }
    
    .image-collection-image {
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    }
</style>

using Microsoft.AspNetCore.Components;
using Telerik.Blazor.Components;

namespace RazorLibrary.Components.Images;

/// <summary>
/// <para>
/// Displays a collection of selectable image thumbnails provided by <see cref="Images"/> and a main image display area.
/// If <see cref="Images"/> is empty, displays a <see cref="TelerikSkeleton"/> placeholder instead. Supports
/// accessibility, configurable height via <see cref="Height"/>, width via <see cref="Width"/>, aspect ratio control
/// via <see cref="ConstrainImageHeight"/> and <see cref="ConstrainImageWidth"/>, and alt text for images.
/// </para>
/// <para>
/// Usage: 
/// <code>
/// @using RazorLibrary.Components.Images
///
/// 
/// &lt;ImageCollection Images="myImages" Height="300px" Width="100%" /&gt;
///
/// 
/// @code {
///     private List&lt;ImageInfo&gt; myImages = new()
///     {
///         new ImageInfo("img1.jpg", "First image"),
///         new ImageInfo("img2.jpg", "Second image")
///     };
/// }
/// </code>
/// </para>
/// </summary>
public partial class ImageCollection
{
    /// <summary>
    /// The collection of images to display in the image collection.
    /// </summary>
    [Parameter] public IEnumerable<ImageInfo> Images { get; set; } = [];

    /// <summary>
    /// The overall height of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Height { get; set; } = "auto";
    /// <summary>
    /// The overall width of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Width { get; set; } = "auto";

    /// <summary>
    /// If true, sets the main image display height to 100%, which constrains it to the value specified by <c>Height</c>.
    /// If false, height is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is false.
    /// </summary>
    [Parameter] public bool ConstrainImageHeight { get; set; } = false;
    /// <summary>
    /// If true, sets the main image display width to 100%, which constrains it to the value specified by <c>Width</c>.
    /// If false, width is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is true.
    /// </summary>
    [Parameter] public bool ConstrainImageWidth { get; set; } = true;

    /// <summary>
    /// The magnification scale for the magnifier. Default is 3 (3x magnification).
    /// </summary>
    [Parameter] 
    public double MagnifyScale { get; set; } = 3;
    
    /// <summary>
    /// Applies additional CSS classes to the ImageCollection's root element for custom styling and visual modifications.
    /// </summary>
    [Parameter] public string Class { get; set; } = string.Empty;

    private ImageInfo? _selectedImage;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        _selectedImage = Images.FirstOrDefault();
    }

    private void OnImageSelect(ImageInfo imageInfo)
    {
        _selectedImage = imageInfo;
    }
}

namespace RazorLibrary.Components.Images;

/// <summary>
/// Information about an image, including the source URL and alt text.
/// </summary>
/// <param name="Src">The image source URL. Required.</param>
/// <param name="Alt">The image alt text. Optional.</param>
public record ImageInfo(string Src, string? Alt = null);

<TelerikEditor @bind-Value="@EditorContent">
    <EditorSettings>
        <EditorPasteSettings 
                             RemoveAttributes="@( new List<string>() )"
                            >
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>

@EditorContent

@code{
    string EditorContent { get; set; }
}

@inject IWebHostEnvironment HostingEnvironment

<TelerikGrid Data="@bookList" Height="75svh" Resizable="true" Sortable="true" Pageable="true" PageSize="15"
             FilterMode="@GridFilterMode.FilterMenu" SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedBooks" @ref="@BookGrid"
             SelectedItemsChanged="@((IEnumerable<BookInfo> sel) => OnRowSelect(sel))">
    <GridToolBarTemplate>
        <TelerikButton OnClick="@GenerateReport">Generate PDF</TelerikButton>
    </GridToolBarTemplate>
    <GridExport>
        <GridPdfExport AllPages="true" PageOrientation="GridPdfExportPageOrientation.Landscape"
                       PaperSize="GridPdfExportPaperSize.A3" />
    </GridExport>
    <GridColumns>
        <GridCheckboxColumn CheckBoxOnlySelection="true"></GridCheckboxColumn>
        <GridColumn Field="ISBN">
            <HeaderTemplate><b>ISBN</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Author">
            <HeaderTemplate><b>Author</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Title">
            <HeaderTemplate><b>Title</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="Genre">
            <HeaderTemplate><b>Genre</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="PublishedYear">
            <HeaderTemplate><b>Year</b></HeaderTemplate>
        </GridColumn>
        <GridColumn Field="CopiesAvailable">
            <HeaderTemplate><b>Copies</b></HeaderTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private async Task GenerateReport()
    {
        isLoading = true;
        var pdfStream = await BookGrid.ExportToPdfAsync();

        // The stream is actually XLSX, so convert it to PDF
        using var ms = new MemoryStream(pdfStream.ToArray());

        var xlsxProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();
        var workbook = xlsxProvider.Import(ms);

        var rootPath = HostingEnvironment.WebRootPath;
        var saveLocation = Path.Combine(rootPath, "LibraryBooks.pdf");
        var pdfProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider();
        using (var fileStream = new FileStream(saveLocation, FileMode.Create))
        {
            pdfProvider.Export(workbook, fileStream);
        }
    }

    public class BookInfo
    {
        public string ISBN { get; set; }
        public string Author { get; set; }
        public string Title { get; set; }
        public string Genre { get; set; }
        public int PublishedYear { get; set; }
        public int CopiesAvailable { get; set; }
    }

    private List<BookInfo> bookList = new()
    {
        new BookInfo { ISBN = "978-0451524935", Author = "George Orwell", Title = "1984", Genre = "Dystopian", PublishedYear = 1949, CopiesAvailable = 4 },
        new BookInfo { ISBN = "978-0439139601", Author = "J.K. Rowling", Title = "Harry Potter and the Goblet of Fire", Genre = "Fantasy", PublishedYear = 2000, CopiesAvailable = 7 },
        new BookInfo { ISBN = "978-0140449266", Author = "Homer", Title = "The Odyssey", Genre = "Epic Poetry", PublishedYear = -800, CopiesAvailable = 2 }
    };

    private TelerikGrid<BookInfo> BookGrid;
    private List<BookInfo> SelectedBooks = new();
    private bool isLoading = false;

    private void OnRowSelect(IEnumerable<BookInfo> selected)
    {
        SelectedBooks = selected.ToList();
    }
}

<TelerikMultiSelect 
   @bind-Value="@SelectedCities"
   TItem="string" TValue="string"
   AllowCustom="true"                   
   Width="400px">
</TelerikMultiSelect>

<span>Selected: @SelectedCities.Count</span>

@code {
    private List<string> SelectedCities { get; set; } = new() {"Rome"};
}