@using Microsoft.AspNetCore.Identity
@using Aberwyn.Models
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@if (SignInManager.IsSignedIn(User))
{
    <div class="auth-links">
        <div class="auth-menu">
            <button class="auth-icon-button" type="button">
                <i class="fas fa-user-circle"></i>
            </button>
            <div class="auth-dropdown">
                <span style="padding: 8px 12px; display: block;">@User.Identity.Name</span>
                <form method="post" asp-area="Identity" asp-page="/Account/Logout" style="margin: 0;">
                    <button type="submit" class="dropdown-logout-button" style="padding: 8px 12px; width: 100%; text-align: left; background: none; border: none; cursor: pointer;">Logga ut</button>
                </form>
            </div>
        </div>
    </div>
}
else
{
    <div class="auth-links">
        <div class="auth-menu">
            <button class="auth-icon-button" type="button">
                <i class="fas fa-user-circle"></i>
            </button>
            <div class="auth-dropdown">
                <form method="post" asp-area="Identity" asp-page="/Account/Login" style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
                    <input type="hidden" name="ReturnUrl" value="/" />
                    <input name="Input.Email" type="email" placeholder="E-post" required style="padding: 6px; font-size: 14px;" />
                    <input name="Input.Password" type="password" placeholder="Lösenord" required style="padding: 6px; font-size: 14px;" />
                    <button type="submit" style="background-color: #3A4E62; color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 14px;">
                        Logga in
                    </button>
                </form>
            </div>
        </div>
    </div>
}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.auth-icon-button').forEach(button => {
            const menu = button.closest('.auth-menu');

            button.addEventListener('click', function (e) {
                e.stopPropagation();
                document.querySelectorAll('.auth-menu').forEach(m => m.classList.remove('open'));
                menu.classList.toggle('open');
            });
        });

        // Förhindra att klick i dropdownen stänger den
        document.querySelectorAll('.auth-dropdown').forEach(dropdown => {
            dropdown.addEventListener('click', e => e.stopPropagation());
        });

        document.addEventListener('click', () => {
            document.querySelectorAll('.auth-menu.open').forEach(m => m.classList.remove('open'));
        });
    });
</script>
