{{template "header" . }}
            <div class="pt-4 mt-2 mb-5 container">
                <div class="justify-content-center row">
                    <div class="col-xxl-7 col-lg-8 col-sm-12">
                        <div class="d-flex flex-column flex-md-row mb-4">
                            <a href="/users/{{.userinfo.Info.Username}}"><img
                                    src="{{.userinfo.Info.Avatar}}"
                                    width="160px" height="160px" class="rounded" alt="" /></a>
                            <div class="ms-0 ms-md-4 mt-4 mt-md-0">
                                <div class="d-flex align-items-center mb-2">
                                    <a class="link-dark h3 mb-0" href="/users/{{.userinfo.Info.Username}}">{{.userinfo.Info.DisplayName}}</a>

                                </div>
                                <div class="text-secondary mb-4">@{{.userinfo.Info.Username}}</div>
                                <div class="d-flex flex-wrap mb-3">
                                    <div class="me-3">
                                        <strong class="fs-5">{{.userinfo.Info.Rank}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_reputation"}}</span>
                                    </div>
                                    <div class="me-3">
                                        <strong class="fs-5">{{.userinfo.Info.AnswerCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_answers"}}</span>
                                    </div>
                                    <div>
                                        <strong class="fs-5">{{.userinfo.Info.QuestionCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_questions"}}</span>
                                    </div>
                                </div>
                                {{if .userinfo.Info.Website }}
                                <div class="d-flex align-items-center"><i class="br bi-house-door-fill me-2"></i><a class="link-secondary" href="{{.userinfo.Info.Website}}">{{.userinfo.Info.Website}}</a></div>
                                {{else}}
                                {{end}}
                                <div class="d-flex text-secondary"></div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-start justify-content-md-end col-xxl-3 col-lg-4 col-sm-12">

                    </div>
                </div>
                <div class="justify-content-center row">

                    <div class="col-xxl-7 col-lg-8 col-sm-12">
                        <div>
                            <h5 class="mb-3">{{translator $.language "ui.personal.about_me"}}</h5>
                            {{if .bio }}
                            <div class="text-center mb-4">{{.bio}}</div>
                            {{else}}
                            <div class="text-center py-5 mb-4">{{translator $.language "ui.personal.about_me_empty"}}</div>
                            {{end}}
                        </div>
                    </div>
                    <div class="mt-5 mt-lg-0 col-xxl-3 col-lg-4 col-sm-12">

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


{{template "footer" .}}