@using AliasDb
@inherits AuthorizePageBase

<style>
    .card {
        border-radius: 10px;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
        background-color: #abd5ff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .card-body {
        padding: 1rem;
    }
</style>

<div class="col">
    <div class="card mb-3" @onclick="ShowDetails">
        <div class="card-body">
            <div class="card-text text-center">
                <DisplayFavicon faviconBytes="@Login.Service.Logo"></DisplayFavicon>
                <div>@Login.Service.Name</div>
                <div><small class="text-muted">@Login.CreatedAt.ToShortDateString()</small></div>
            </div>
        </div>
    </div>
</div>

@if (showModal)
{
    <!-- Bootstrap Modal -->
    <div class="modal fade show d-block" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" style="display: block;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">@Login.Service.Name Details</h5>
                    <button type="button" class="close" @onclick="CloseDetails" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Here is more information about @Login.Service.Name.</p>
                    <!-- Add more detailed information here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @onclick="CloseDetails">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show mt-0"></div>
}

@code {
    [Parameter] public Login Login { get; set; } = new Login();
    private bool showModal = false;

    private void ShowDetails()
    {
        // Redirect to view page instead for now.
        NavigationManager.NavigateTo($"/alias/{Login.Id}");
        //showModal = true;
    }

    private void CloseDetails()
    {
        showModal = false;
    }

}
