@page "/vocabulary"
@inherits BaseComp

<div class="card shadow">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <div class="px-0">
                <h3>@Traduci("vocabulary_mainTitle")</h3>
            </div>
            <div class="px-0">
                @if (currRec == null)
                {
                    <div class="input-group input-group-sm" title="@Traduci("ricerca")">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" @bind="@SearchVal">
                        <button class="btn @btnResetCss" @onclick="ResetSearch"><i class="fas fa-ban"></i></button>
                        <button class="ms-2 btn btn-success" @onclick="DoAddNew">Add New</button>
                    </div>
                }
                else
                {
                    <div class="input-group">
                        <span class="input-group-text">Lemma</span>
                        <input type="text" class="form-control" style="width: 10rem;" @bind="@currRec.Lemma">
                        <span class="input-group-text">Traduzione</span>
                        <input type="text" class="form-control" style="width: 30rem;" @bind="@currRec.Traduzione">
                        <button class="btn btn-sm btn-success" style="width: 6rem;" @onclick="DoSave">Save</button>
                        <button class="btn btn-sm btn-warning" style="width: 6rem;" @onclick="DoCancel">Cancel</button>
                    </div>
                }
            </div>
        </div>
    </div>
    <div class="card-body">
        @if (isLoading)
        {
            <LoadingData></LoadingData>
        }
        else
        {
            <div class="row">
                <div class="col-6">
                    <VocabMan ListLingue="@ListLingue" AllRecord="FullVocab" SelLingua="IT" SearchVal="@SearchVal" EC_Updated="UpdateRec" EC_ReqClone="DoCloneLang" EC_ReqFilt="DoFilt" EC_ReqFixMissing="DoFixMissing"></VocabMan>
                </div>
                <div class="col-6">
                    <VocabMan ListLingue="@ListLingue" AllRecord="FullVocab" SelLingua="EN" SearchVal="@SearchVal" EC_Updated="UpdateRec" EC_ReqClone="DoCloneLang" EC_ReqFilt="DoFilt" EC_ReqFixMissing="DoFixMissing"></VocabMan>
                </div>
            </div>
        }
    </div>
</div>


<BootstrapModal @ref=Modal Title=@mTitle Message=@mMessage Mode="mMode" UserOptions=@modalOpt></BootstrapModal>