@rendermode InteractiveServer

@if (matchingBankTransactions is null || matchingBankTransactions.Count == 0)
{
    <p>Keine Transaktionen vorhanden!</p>
    <FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.MoneyMouthFace())" />
}
else
{
    <table>
        <thead>
        <tr>
            <th>Buchungsdatum</th>
            <th>Valutadatum</th>
            <th>Zusatzinfo</th>
            <th>Text</th>
            <th>Konto</th>
            <th>Betrag</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach (var transaction in matchingBankTransactions)
        {
            <tr>
                <td>
                    <div>@transaction.BookingDate.ToString("dd.MM.yyyy")</div>
                </td>
                <td>
                    <div>@transaction.ValueDate.ToString("dd.MM.yyyy")</div>
                </td>
                <td class="zusatzinfo-column" title="@transaction.BankTransactionText">
                    <div>@transaction.BankTransactionText</div>
                </td>
                <td>
                    <div class="text-column">
                        <input list="texts" @bind="@transaction.Text" placeholder="Type or select..." readonly="@transaction.ReadOnly"/>
                        <datalist id="texts">
                            @foreach (var text in bookingTexts.OrderBy(t => t))
                            {
                                <option value="@text"></option>
                            }
                        </datalist>
                    </div>
                </td>
                <td>
                    @if (transaction.Value > 0)
                    {
                        <AccountSelector Accounts="accounts" @bind-AccountId="@transaction.OriginAccountId" />
                    }
                    else
                    {
                        <AccountSelector Accounts="accounts" @bind-AccountId="@transaction.TargetAccountId" />
                    }
                </td>
                <td>
                    <div>@Math.Abs(transaction.Value).ToFormattedString()</div>
                </td>
                <td style="align-content: center">
                    <FluentButton IconEnd="@(new Icons.Regular.Size16.SplitVertical())" Appearance="Appearance.Neutral"
                                  title="Aufteilen" aria-label="Aufteilen"
                                  OnClick="@(() => SplitBankTransactionAsync(transaction))" Disabled="@(transaction.Value > 0 || transaction.ReadOnly)" />
                </td>
                <td style="align-content: center">
                    <FluentButton IconEnd="@(new Icons.Regular.Size16.Save())" Appearance="Appearance.Neutral"
                                  title="Buchen" aria-label="Buchen"
                                  OnClick="@(() => BookBankTransactionAsync(transaction))"
                                  Disabled="@transaction.ReadOnly" />
                </td>
            </tr>
        }
        </tbody>
    </table>
}