@inherits MSGComponentBase

@if (this.UseSmallForm)
{
    <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
        @if (this.isDraggingOver)
        {
            <MudBadge
                Content="@this.DocumentPaths.Count"
                Color="Color.Primary"
                Overlap="true"
                Class="cursor-pointer"
                OnClick="@this.OpenAttachmentsDialog">
                <MudLink OnClick="@this.AddFilesManually" Style="text-decoration: none;">
                    <MudTextField T="string"
                                  Text="@DROP_FILES_HERE_TEXT"
                                  Adornment="Adornment.Start"
                                  AdornmentIcon="@Icons.Material.Filled.AttachFile"
                                  Typo="Typo.body2"
                                  Variant="Variant.Outlined"
                                  ReadOnly="true"
                    />
                </MudLink>
            </MudBadge>
        }
        else if (this.DocumentPaths.Any())
        {
            <MudTooltip Text="@T("Click the paperclip to attach files, or click the number to see your attached files.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudBadge
                    Content="@this.DocumentPaths.Count"
                    Color="Color.Primary"
                    Overlap="true"
                    Class="cursor-pointer"
                    OnClick="@this.OpenAttachmentsDialog">
                    <MudIconButton
                        Icon="@Icons.Material.Filled.AttachFile"
                        Color="Color.Default"
                        OnClick="@this.AddFilesManually"/>
                </MudBadge>
            </MudTooltip>
        }
        else
        {
            <MudTooltip Text="@T("Click here to attach files.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton
                    Icon="@Icons.Material.Filled.AttachFile"
                    Color="Color.Default"
                    OnClick="@this.AddFilesManually"/>
            </MudTooltip>
        }
    </div>
}
else
{
    <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
        <MudText Typo="Typo.body1" Inline="true">
            @T("Drag and drop files into the marked area or click here to attach documents: ")
        </MudText>
        <MudButton
            Variant="Variant.Filled"
            StartIcon="@Icons.Material.Filled.Add"
            Color="Color.Primary"
            OnClick="@(() => this.AddFilesManually())"
            Style="vertical-align: top; margin-top: -2px;"
            Size="Size.Small">
            @T("Add file")
        </MudButton>
    </MudStack>
    <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
        <MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
            @foreach (var filePath in this.DocumentPaths)
            {
                <MudChip T="string" Color="Color.Dark" Text="@Path.GetFileName(filePath)" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(filePath))" OnClose="@(() => this.RemoveDocument(filePath))"/>
            }
        </MudPaper>
    </div>
    <MudButton OnClick="@(async () => await this.ClearAllFiles())" Variant="Variant.Filled" Color="Color.Info" Class="mt-2" StartIcon="@Icons.Material.Filled.Delete">
        @T("Clear file list")
    </MudButton>
}