@inject IJSRuntime js

<p>Tab through the textboxes:</p>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="false"
                   Class="tilelayout-tabindex-remove">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="false" - will focus the inner textbox and will not focus the tiles.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="true" - will not focus the inner textbox and will focus the tiles. Focus the textbox with Enter when on the tile.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<script suppress-error="BL9992">

    function removeTabindexFromTiles(selector) {
        var tileLayout = document.querySelector(selector);

        if (!tileLayout) {
            return;
        }

        tileLayout.querySelectorAll(".k-tilelayout-item").forEach(el => {
            el.removeAttribute("tabIndex");
        });
    }

</script>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure HTML is ready
            await js.InvokeVoidAsync("removeTabindexFromTiles", ".tilelayout-tabindex-remove");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

<TelerikNumericTextBox @bind-Value="@width" Step="20" Min="0" Max="800"></TelerikNumericTextBox>
@code{
    int width { get; set; } = 200;
}
<div style="display:flex; flex-direction: row;">
    <div style="width: @(width)px; background: yellow;">
        some content on the left. When this is here, resizing tiles cannot use the full width of the tile layout
        - it stops short with the offset by this element due to the flex layout.
        Change the width of this element to see the effect - as you increase you will stop being
        able to resize 1column tiles at all. If you decrease, eventually you will be.
    </div>
    <div style="position: relative; display: block;"> @* THE WORKAROUND - REMOVE TO SEE THE PROBLEM *@
        <TelerikTileLayout ColumnWidth="200px"
                           RowHeight="150px"
                           Width="700px"
                           Columns="3"
                           Resizable="true">
            <TileLayoutItems>
                <TileLayoutItem HeaderText="Panel 1">
                    <Content>Regular sized first panel.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 2">
                    <Content>You can put components in the tiles too.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
                    <Content>This tile is three rows tall.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
                    <Content>This tile is two rows tall and two columns wide</Content>
                </TileLayoutItem>
            </TileLayoutItems>
        </TelerikTileLayout>
    </div>
</div>

<TelerikTileLayout Columns="3"
                   RowHeight="150px"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>Regular-sized first tile.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>You can put components in the tiles too.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 3" RowSpan="3" Class="disabled-tile">
            <Content>No resizing and no reordering</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
            <Content>This tile is two rows tall and two columns wide</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<style>
    .disabled-tile {
        pointer-events: none;
    }
</style>

<!-- suppress-error allows the script tag to be in a Razor file -->
<script suppress-error="BL9992">
  window.stopPropagation = (e) => {
    e.stopPropagation();
  }
</script>

<TelerikTileLayout Columns="3"
                   RowHeight="150px"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        @{
            foreach (var tile in Tiles)
            {
                <TileLayoutItem @key="@tile">
                    <HeaderTemplate>
                        <div class="d-flex flex-col w-100 justify-content-between">
                            <div class="d-flex flex-row w-75">
                                <div class="p-2"><strong>@tile.Title</strong></div>
                            </div>
                            <div onpointerdown="stopPropagation(event)"
                                 class="d-flex flex-row w-25 justify-content-end">
                                <TelerikButton Icon="edit" Title="Edit Tile" Class="k-flat"
                                       OnClick="@(()=>EditTile(tile))">
                                </TelerikButton>
                                <TelerikButton Icon="close" Title="Delete Tile" Class="k-flat"
                                       OnClick="@(()=>DeleteTile(tile))">
                                </TelerikButton>
                            </div>
                        </div>
                    </HeaderTemplate>
                    <Content>@tile.Content</Content>
                </TileLayoutItem>
            }
        }
    </TileLayoutItems>
</TelerikTileLayout>

Event log: <TelerikButton Icon="clear" OnClick="@ClearLog">Clear Log</TelerikButton>

@if (EventLog != null)
{
    <ul>
        @foreach (string log in EventLog)
        {
            <li>
                @log
            </li>
        }
    </ul>
}

@code {
    private List<TileData> Tiles { get; set; }

    List<string> EventLog { get; set; } = new List<string>();

    async void EditTile(TileData tile)
    {
        EventLog.Add("Edit fired for " + tile.Title);        
    }

    async void DeleteTile(TileData tile)
    {
        EventLog.Add("Delete fired for " + tile.Title);
    }

    void ClearLog()
    {
        EventLog = new List<string>();
    }
    protected override void OnInitialized()
    {
        Tiles = new List<TileData>()
        {
            new TileData { Title = "Tile 1", Content = "1 - Lorem Ipsum" },
            new TileData { Title = "Tile 2", Content = "2 - Lorem Ipsum" },
            new TileData { Title = "Tile 3", Content = "3 - Lorem Ipsum" },
            new TileData { Title = "Tile 4", Content = "4 - Lorem Ipsum" },
            new TileData { Title = "Tile 5", Content = "5 - Lorem Ipsum" },
            new TileData { Title = "Tile 6", Content = "6 - Lorem Ipsum" },
        };

        base.OnInitialized();
    }

    public partial class TileData
    {
        public string Title { get; set; }
        public string Content { get; set; }

    }
}

void OnResizeHandler(TileLayoutResizeEventArgs args)
    {
        if (args.Id == "commentTile")
        {
            if (CommentLI.ColSpan==1)
            {
                CommentWidth = "270px";
            }
            else
            {
                CommentWidth = (270 + (300 * (CommentLI.ColSpan - 1))).ToString() + "px";
            }
        }
    }