@using BlazorAnimation
@using TIAMWebApp.Shared.Application.Interfaces
@inject IServiceProviderDataService ServiceProviderDataService

<div class=" col-12 col-xl-3">
        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
            <div class="card glass card-admin" style="border-radius: 16px;">
                <div class="card-header py-2 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fw-bold text-body">Hotel details</span>

                        </div>
                        <div>
                            <!--h6 class="mb-0"> <a href="#">All settings</a> </h6-->
                        </div>
                    </div>
                </div>
                <div class="card-body card-admin-body py-2 px-4">
                    <div class="d-flex flex-row mb-4 pb-2">
                        <div class="flex-fill">
                            <h4 class="bold">Your QR code</h4>
                            <p class="text-muted"> Use this in printed material, to gain referrals</p>
                        </div>
                        <div>
                            <a href="api/pictures/1" download="data:image/png;base64,@ImageSource" target="_top">

                                <img class="align-self-center img-fluid"
                                     src="data:image/png;base64,@ImageSource" width="128" />
                            </a>
                        </div>

                    </div>

                    <div class="d-flex flex-column mb-4 pb-2">
                        <h4> Hotel name: <span class="small text-muted"> Example hotel </span></h4>
                        <h4> Address: <span class="small text-muted"> Budapest, Minta u. 46 </span></h4>
                        <h4> Phone number: <span class="small text-muted"> +36 1 123 4567</span></h4>
                    </div>
                </div>
                <div class="card-footer py-2 px-4">
                    <div class="d-flex justify-content-between">

                        <a href="#!">Modify</a>
                        <div class="border-start h-100"></div>


                    </div>
                </div>
            </div>
        </Animation>
    </div>

@code {
    [Parameter] public Guid ContextID { get; set; }

    public string ImageSource { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
        ImageSource = await ServiceProviderDataService.GetQRCodeByProductIdAsync(Guid.NewGuid());
        await base.OnInitializedAsync();
    }
}