<!-- VM for ViewModel and DataTableModel Table {get; set;} in ViewModel class --->
<table class="table-word">
    <thead>
        <tr>
            <th>&nbsp;</th>
            @foreach (var col in VM.Table.Cols)
            {
                <th class="col-header @col.ClassName">
                    @col.Num //or col.Header col.Name etc.
                    <div class="header-action" @onclick:stopPropagation>
                        <FluentButton   IconStart= @SharedIcons.ViewColumnImages
                                        Class="word-action-button"
                                        title="View column images"
                                        OnClick=@(() => col.ShowImageAsync()) />
                    </div>
                </th>
            }
            <th style="min-width:100vw"/>
        </tr>
    </thead>
    <tbody>
        @foreach (var row in VM.Table.Rows)
        {
            <tr @key=row.Book.Code>
                <th class="row-edition @row.Book.ClassName">
                    @row.Book.Year&nbsp;@row.Book.ShortCode
                </th>
                @foreach (var word in row.Words)
                {
                    <td @key=word.WordIndex class="table-word-item @word.ClassName">
                        <div title=@($"Page {word.PageNumber} Word {word.WordIndex}") @onclick=@(() => OnWordClicked(word))>
                            @word.DisplayText
                        </div>
                        <div class="table-word-buttons" @onclick:stopPropagation>
                            <FluentButton
                                [email protected]
                                Class="table-word-button"
                                title="Add Word"
                                OnClick=@(() => OnWordAddClicked(word)) />
                            <FluentButton
                                [email protected]
                                Class="table-word-button"
                                title="Edit Word"
                                OnClick=@(() => OnWordEditClicked(word)) />
                        </div>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

    <style>

        /*
            // Selector: .table-word
            // Selector: .table-word .col-header
            // Selector: .table-word .col-header .header-action
        */
        .table-word tr:nth-child(1) {
            /* Instead of 'word-table_first-cell' */
        }


        /* Buttons exist for interaction, no need add 'action' while naming it*/
        .table-word-buttons
        {
            display: none; /* or hidden */
            /* Main style area */
        }

        .table-word-item:hover .table-word-buttons
        {
            display: block;
            /* Additional style changes */
        }
    </style>

@code
{
    private virtual void OnWordClicked(WordReference word);
    private void OnWordEditClicked(WordReference word)
    {
        // DISPLAY MODAL
        // Like
        /*
        <div class="modal">
            <div class="modal-content">
                <span class="close" @onclick=@(() => CloseModal())>&times;</span>
                <p>Word: @word.DisplayText</p>
                <input type="text" value="@word.DisplayText" @bind="@word.DisplayText" />
                <button @onclick=@(() => SaveWord(word))>Save</button>
            </div>
        </div>
        */
    }

    private void OnWordAddClicked(WordReference word)
    {
        // DISPLAY MODAL
        // Similar to OnWordEditClicked but for adding a new word
        /*
        <div class="modal">
            <div class="modal-content">
                <span class="close" @onclick=@(() => CloseModal())>&times;</span>
                <p>Add New Word:</p>
                <input type="text" value="@word.DisplayText" @bind="@word.DisplayText" />
                <button @onclick=@(() => SaveWord(word))>Save</button>
            </div>
        </div>
        */
    }

    private void SaveWord(WordReference word)
    {
        // Save the word to the database or perform any other action
        // Just send to the ViewModel to save the word, the viewmodel will handle the logic if it is a new word or an existing one.
        // CloseModal();
    }

    private void OpenModal(WordReference word)
    {
        // Open the modal for editing the word
        /*
        <div class="modal">
            <div class="modal-content">
                <span class="close" @onclick=@(() => CloseModal())>&times;</span>
                <p>Edit Word:</p>
                <input type="text" value="@word.DisplayText" @bind="@word.DisplayText" />
                <button @onclick=@(() => SaveWord(word))>Save</button>
            </div>
        </div>
        */
    }
    private void CloseModal()
    {
        // Close the modal
    }
}