@namespace antblazorpro.Pages.Account.Center
@page "/account/center"

<GridContent>
    <Row Gutter="24">
        <AntDesign.Col Lg="7" Md="24">
            <Card Style="margin-bottom: 24px;">
                <div class="avatarHolder">
                    <img alt="" src="@_currentUser.Avatar" />
                    <div className="name">@_currentUser.Name</div>
                    <div>@_currentUser.Signature</div>
                </div>

                <div class="detail">
                    <p>
                        <Icon Type="contacts" Theme="outline" Style="margin-right:8px;" />
                        @_currentUser.Title
                    </p>
                    <p>
                        <Icon Type="cluster" Theme="outline" Style="margin-right:8px;" />
                        @_currentUser.Group
                    </p>
                    <p>
                        <Icon Type="home" Theme="outline" Style="margin-right:8px;" />
                        <!--todo: add userinfo-->
                        @_currentUser.Geographic.Province.Label
                        @_currentUser.Geographic.City.Label
                    </p>
                </div>

                <Divider Dashed />

                <div class="tags">
                    <div class="tagsTitle">Tags</div>
                    @foreach (var tag in _currentUser.Tags) {
                        <Tag>@tag.Label</Tag>
                    }

                    @if (_inputVisible) {
                        <AntDesign.Input Type="text"
                                         Size="small"
                                         Style="width: 78px"
                                         @bind-Value="InputValue"
                                         OnBlur="HandleInputConfirm" />
                    }
                    else {
                        <Tag OnClick="ShowInput" Style="border-style: dashed">
                            <Icon Type="plus" Theme="outline" />
                        </Tag>
                    }
                </div>

                <Divider Dashed Style="margin-top: 16px;" />

                <div class="team">
                    <div class="teamTitle">Team</div>
                    <!--todo: add notice-->
                </div>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Lg="17" Md="24">
            <Card Class="tabsCard">
                <CardTabs>
                    <Tabs DefaultActiveKey="1">
                        <TabPane Key="1">
                            <TabTemplate>Articles (@_fakeList.Count)</TabTemplate>
                            <ChildContent>
                                <Articles List="_fakeList" />
                            </ChildContent>
                        </TabPane>
                        <TabPane Key="2">
                            <TabTemplate>Applications (@_fakeList.Count)</TabTemplate>
                            <ChildContent>
                                <Applications List="_fakeList" />
                            </ChildContent>
                        </TabPane>
                        <TabPane Key="3">
                            <TabTemplate>Projects (@_fakeList.Count)</TabTemplate>
                            <ChildContent>
                                <Projects List="_fakeList" />
                            </ChildContent>
                        </TabPane>
                    </Tabs>
                </CardTabs>
            </Card>
        </AntDesign.Col>
    </Row>
</GridContent>