doctype html

div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
            ng-init="section='user-settings'")

    sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="user-profile")
        include ../includes/modules/user-settings-menu

    section.main.user-profile
        header
            h1
                span.green {{sectionName | translate}}

        form
            div.container
                div.avatar-container
                    fieldset(tg-user-avatar)
                        .image-container
                            img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
                            .overlay.hidden
                                img.loading-spinner(src="/svg/spinner-circle.svg",
                                                    alt="{{'COMMON.LOADING' | translate}}")
                        input(type="file", id="avatar-field", class="hidden",
                            tg-avatar-model="avatarAttachment")
                        p(translate="USER_PROFILE.IMAGE_HELP")
                            span.size-info.hidden(tg-bo-html="maxFileSizeMsg")
                        a.button-green.change.js-change-avatar(translate="USER_PROFILE.ACTION_CHANGE_IMAGE",
                                      title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}} {{maxFileSizeMsg}}")
                        a.use-gravatar(translate="USER_PROFILE.ACTION_USE_GRAVATAR")

                div.data
                    fieldset
                        label(for="email", translate="USER_PROFILE.FIELD.USERNAME")
                        input(type="text", name="username", id="username",
                              placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
                              ng-model="user.username", data-required="true", data-maxlength="255",
                              data-regexp="^[\\w.-]+$")

                    fieldset
                        label(for="email", translate="USER_PROFILE.FIELD.EMAIL")
                        input(type="text", name="email", id="email",
                              placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}",
                              ng-model="user.email", data-type="email", data-required="true",
                              data-maxlength="255")

                    fieldset
                        label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME")
                        input(type="text", name="full_name", id="full-name",
                              placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}",
                              ng-model="user.full_name", data-required="true",
                              data-maxlength="256")

                    fieldset
                        label(for="full-name", translate="USER_PROFILE.FIELD.LANGUAGE")
                        select(ng-model="lang",
                               ng-options="locale.code as locale.name for locale in locales")
                            option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")

                    fieldset
                        label(for="bio", translate="USER_PROFILE.FIELD.BIO")

                        textarea(name="bio", id="bio", ng-model="user.bio",
                                 ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", ng-maxlength="210", maxlength="210")

            fieldset.submit
                button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}",
                                                  translate="COMMON.SAVE")
                a.delete-account(href="", title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}",
                                 ng-click="ctrl.openDeleteLightbox()",
                                 translate="USER_PROFILE.ACTION_DELETE_ACCOUNT")

div.lightbox.lightbox-delete-account(tg-lb-delete-user)