@namespace Connected.Components
@inherits UIComponent
@typeparam T

@if (IsOnlyHeader)
{
    <th scope="col" class="table cell @_classname" style="" @attributes="@CustomAttributes">
        @ChildContent
    </th>
}
else if (Column != null && !Column.Hidden)
{
    <th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@CustomAttributes">
        <span class="column-header">
            @if (sortable)
            {
                <span class="@_sortHeaderClass" @onclick="SortChangedAsync">
                    @if (Column.HeaderTemplate != null)
                    {
                        @Column.HeaderTemplate(Column.headerContext)
                    }
                    else 
                    {
                        @computedTitle
                    }
                </span>
            }
            else
            { 
                @if (Column.HeaderTemplate != null)
                {
                    @Column.HeaderTemplate(Column.headerContext)
                }
                else 
                {
                    @computedTitle
                }
            }
            <span class="@_optionsClass">
                @if (sortable)
                {
                    if (_initialDirection == SortDirection.None)
                    {
                        <IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton>
                    }
                    else
                    {
                        <IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton>
                        if(DataGrid.SortMode == SortMode.Multiple)
                        {
                            <span class="sort-index mud-text-disabled">@(Column.SortIndex + 1)</span>
                        }
                    }
                }

                @if (DataGrid.FilterMode != DataGridFilterMode.ColumnFilterRow)
                {
                    if (hasFilter)
                    {
                        <IconButton Class="filter-button filtered" Icon="@Icons.Material.Filled.FilterAlt" Size="@Size.Small" OnClick="@OpenFilters"></IconButton>
                    }
                    else if (showFilterIcon)
                    {
                        <IconButton Class="filter-button" Icon="@Icons.Material.Outlined.FilterAlt" Size="@Size.Small" OnClick="@AddFilter"></IconButton>
                    }
                }

                @if (showColumnOptions)
                {
                    <Menu Icon="@Icons.Material.Filled.MoreVert" Size="Size.Small" AnchorOrigin="Origin.BottomCenter" Dense="true">
                        <MenuItem Disabled="@(_initialDirection == SortDirection.None)" OnClick="@RemoveSortAsync">Unsort</MenuItem>
                        @if (filterable && DataGrid.FilterMode != DataGridFilterMode.ColumnFilterRow)
                        {
                            <MenuItem OnClick="@AddFilter">Filter</MenuItem>
                        }
                        @if (hideable)
                        {
                            <MenuItem OnClick="@HideColumnAsync">Hide</MenuItem>
                        }
                        @if (groupable)
                        {
                            if (Column?.grouping ?? false)
                            {
                                <MenuItem OnClick="@UngroupColumn">Ungroup</MenuItem>
                            }
                            else
                            {
                                <MenuItem OnClick="@GroupColumn">Group</MenuItem>
                            }
                        }
                    </Menu>
                }
            </span>
        </span>
        @if (resizable)
        {
            <div @onmousedown=OnResizerMouseDown @onmouseover=OnResizerMouseOver @onmouseleave=OnResizerMouseLeave
                class="@_resizerClass" style="@_resizerStyle" />
        }

        @if (filterable && DataGrid.FilterMode == DataGridFilterMode.ColumnFilterMenu)
        {
            <Overlay Visible="@_filtersMenuVisible" OnClick="@(() => _filtersMenuVisible = false)" />
            <Popover Open="@_filtersMenuVisible" AnchorOrigin="@Origin.BottomRight" TransformOrigin="@Origin.TopRight" Class="pa-4 column-filter-popup">
                @if (Column.FilterTemplate != null)
                {
                    @Column.FilterTemplate(Column.filterContext) 
                }
                else
                {
                    <Grid>
                        <Item xs="12">
                            @DataGrid.Filter(Column.filterContext.FilterDefinition, Column)
                        </Item>
                        <Item xs="12" Class="d-flex justify-end">
                     <Button Class="clear-filter-button" Clicked="@ClearFilter">Clear</Button>
                     <Button Class="apply-filter-button" Color="@ThemeColor.Primary" Clicked="@ApplyFilter">Filter</Button>
                        </Item>
                    </Grid>
                }
            </Popover>
        }
    </th>
}