@page "/edit/{id:int}"

<h3>@Localizer["Modifications"]</h3>

<EditForm Model="@musiqueModele" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="titre">
            @Localizer["Display titre"]:
            <InputText id="titre" @bind-Value="musiqueModele.titre" />
        </label>
    </p>
    <p>
        <label for="autheur">
            @Localizer["autheur"]:
            <InputText id="autheur" @bind-Value="musiqueModele.auteur" />
        </label>
    </p>
    <p>
        <label for="durée">
            @Localizer["durée"]:
            <InputNumber id="durée" @bind-Value="musiqueModele.duree" />
        </label>
    </p>
    <p>
    <label>
        @Localizer["Current Item image"]:
        <img src="data:image/png;base64, @(musiqueModele.ImageBase64)" class="img-thumbnail" style="min-width: 50px; max-width: 150px"/>
    </label>
    </p>
    <p>
        <label>
            @Localizer["Item image"]:
            <InputFile OnChange="@LoadImage" accept=".png" />
        </label>
    </p>
    
    <figure>
        <audio controls
               src="https://localhost:7028/song/@(musiqueModele.songName)">
            <a href="https://localhost:7028/song/@(musiqueModele.songName)">
                Audio
            </a>
        </audio>
    </figure>
    <p>
        <label>
           @Localizer["Item song"]:
            <InputFile OnChange="@LoadSong" accept=".mp3" />
        </label>
    </p>
    <p>
        <label for="songName">
            @Localizer["Name file song"]:
            <InputText id="songName" @bind-Value="musiqueModele.songName" />
        </label>
    </p>

    <button type="submit">@Localizer["Submit"]</button>
</EditForm>