@attribute [Route(RouteConstants.Profile.Hub)]

<PageTitle>پروفایل</PageTitle>

<MudContainer MaxWidth="MaxWidth.Small" Class="py-6">
    <MudStack AlignItems="AlignItems.Center" Spacing="3" Class="mb-6">
        <MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Filled" Class="profile-hub-avatar">
            <MudIcon Icon="@Icons.Material.Outlined.Person" Size="Size.Large" />
        </MudAvatar>
        <MudStack Spacing="0" AlignItems="AlignItems.Center">
            <MudText Typo="Typo.h6" Class="fw-bold">
                @($"{_userProfile.FirstName} {_userProfile.LastName}")
            </MudText>
            <MudText Typo="Typo.body2" Class="mud-text-secondary">@(_userProfile.Mobile)</MudText>
        </MudStack>
    </MudStack>

    <MudStack Spacing="2">
        <MudLink Href="@RouteConstants.Profile.Personal" Underline="Underline.None">
            <MudPaper Elevation="0" Class="pa-4 rounded-xl profile-hub-item">
                <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Outlined.Person" Color="Color.Primary" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle2">اطلاعات شخصی</MudText>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">نام، کد ملی و تاریخ تولد</MudText>
                        </MudStack>
                    </MudStack>
                    <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary" />
                </MudStack>
            </MudPaper>
        </MudLink>

        <MudLink Href="@RouteConstants.Profile.Addresses" Underline="Underline.None">
            <MudPaper Elevation="0" Class="pa-4 rounded-xl profile-hub-item">
                <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Outlined.LocationOn" Color="Color.Success" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle2">آدرس‌ها</MudText>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">مدیریت آدرس‌های تحویل</MudText>
                        </MudStack>
                    </MudStack>
                    <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary" />
                </MudStack>
            </MudPaper>
        </MudLink>

        <MudLink Href="@RouteConstants.Profile.Invitees" Underline="Underline.None">
            <MudPaper Elevation="0" Class="pa-4 rounded-xl profile-hub-item">
                <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Outlined.GroupAdd" Color="Color.Info" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle2">دعوت‌شدگان من</MudText>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">کسانی که با موبایل شما ثبت‌نام کرده‌اند</MudText>
                        </MudStack>
                    </MudStack>
                    <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary" />
                </MudStack>
            </MudPaper>
        </MudLink>

        <MudLink Href="@RouteConstants.Profile.Settings" Underline="Underline.None">
            <MudPaper Elevation="0" Class="pa-4 rounded-xl profile-hub-item">
                <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                        <MudIcon Icon="@Icons.Material.Outlined.Settings" Color="Color.Warning" />
                        <MudStack Spacing="0">
                            <MudText Typo="Typo.subtitle2">تنظیمات</MudText>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">تغییر رمز و تنظیمات حساب</MudText>
                        </MudStack>
                    </MudStack>
                    <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Class="mud-text-secondary" />
                </MudStack>
            </MudPaper>
        </MudLink>
    </MudStack>
</MudContainer>