@model Church.Net.Entity.Vocabulary
@{
    ViewBag.Title = "FlashCard";
}
@using (Html.BeginForm("FlashCardNext"))
{

}
<div id="divSpellingPractice" class="jumbotron m-auto text-center">
    <span class="mb-1 badge badge-info">
        @Model.PartOfSpeech.ToString()

    </span>
    <h1 class="display-3" id="MarskedAnswer">
        @Model.Word
        <button class="btn btn-success p-4" onclick="Speak('@Html.Raw(Model.Word)')"><i class="g-absolute-centered g-font-size-20 hs-admin-announcement"></i></button>
        @if (Model.PartOfSpeech == Church.Net.Entity.Enumeration.PartsOfSpeech.VerbsUnRegular)
        {
            @Html.Raw("<br>" + Model.MaskedVerbPast + " ; " + Model.MaskedVerbParticiple)
        }
    </h1>
    <p><img id="volImg" class="img-fluid img-thumbnail g-max-width-380" src="@Model.ImagesUrl" /></p>
    <p class="lead" id="definition">
        @Model.DefinitionEn

    </p>
    <hr class="my-4">
    <div class="progress mb-2">
        <div id="spellProgress" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
    </div>

    <input class="vocalInput" id="txSpell" onkeyup="checkAnswer(this.value)" style="width:@Html.Raw(Model.Word.Length*1.5)px" />
    <br />
    <br />
    <p class="lead">
        <button class="btn btn-primary btn-lg" role="button" onclick="ShowTheAnswer()">Check the answer</button>
    </p>
</div>



<div class="form-group" id="divNextQuiz" >
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Next" class="btn btn-default" onclick="location.href='@Url.Action("FlashCardNext", "Vocabularies",new { id=Model.Id})'" />
        @*<input type="submit" value="Next" class="btn btn-default" />*@
        <input type="button" value="Forgot this word" class="btn btn-danger" onclick="location.href='@Url.Action("FlashCardForgot", "Vocabularies",new { id=Model.Id})'" />
    </div>
</div>

<script>

    function ShowTheAnswer() {
        //al('@Model.Word');


        Swal.fire({
            title: '@Model.Word',
            text:'@Html.Raw(Model.DefinitionCh.Replace(Environment.NewLine,""))',
            imageUrl: '@Model.ImagesUrl',
            imageHeight: 200,
            imageAlt: 'Answer'
        })
    }
</script>