<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800">{{'USER.MY_ACCOUNT.ACCOUNT_INFORMATION' |
        translate}}</h1>
</div>
<div class="row form-group">
    <div class="col-12">
        <button class="btn btn-primary text-white form-group mr-2" type="button"
                ng-click="openChangePasswordModal()">
            <span>{{'USER.MY_ACCOUNT.CHANGE_PASSWORD_BTN' | translate}}</span>
        </button>
        <button class="btn btn-primary text-white form-group mr-2" type="button"
                ng-click="openChangeEmailModal()">
            <span>{{'USER.MY_ACCOUNT.CHANGE_E_MAIL_BTN' | translate}}</span>
        </button>
        <button class="btn btn-danger text-white form-group mr-2" type="button"
                ng-show="data && data.role_id === 1 && data.payment_type === 0"
                ng-click="openConfirmDeleteAccount()">
            <span>{{'USER.MY_ACCOUNT.CANCEL_ACCOUNT_BTN' | translate}}</span>
        </button>
    </div>
</div>
<form name="myAccountForm" novalidate ng-submit="updateMyAccount(myAccountForm.$valid)">
    <div class="card">
        <div class="card-body">
            <div class="row mx-0">
                <div class="col-12 form-group">
                    <label class="small mb-1">{{'USER.MY_ACCOUNT.MAIL_ADDRESS'
                        | translate}}</label>
                    <div class="form-control-static text-bold">
                        <span ng-bind="currentUser.mail_address"></span>
                    </div>
                </div>
            </div>
            <div class="row mx-0">
                <div class="col-12 col-md-6 form-group">
                    <label class="small mb-1 required">{{'USER.MY_ACCOUNT.FIRST_NAME'
                        | translate}}</label>
                    <input class="form-control" name="first_name"
                           ng-model="userInfo.first_name"
                           ng-class="{'is-invalid' : (myAccountForm.first_name.$touched || myAccountForm.first_name.$dirty) &&  myAccountForm.first_name.$invalid}"
                           ng-maxlength="64"
                           value="{{userInfo.first_name}}"
                           ng-pattern="script_pattern"
                           required
                    />
                    <div class="invalid-feedback text-left">
                        <div ng-show="myAccountForm.first_name.$error.required">
                            {{'INPUT_ERROR.REQUIRED' |
                            translate}}
                        </div>
                        <div ng-show="myAccountForm.first_name.$error.maxlength"
                             translate="INPUT_ERROR.MAX_LENGTH"
                             translate-values="{value: 64}">
                        </div>
                        <div ng-show="myAccountForm.first_name.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label class="small mb-1 required">{{'USER.MY_ACCOUNT.LAST_NAME'
                        | translate}}</label>
                    <input class="form-control" id="lastName" name="last_name"
                           value="{{currentUser.last_name}}"
                           ng-model="userInfo.last_name"
                           ng-class="{'is-invalid' : (myAccountForm.last_name.$touched || myAccountForm.last_name.$touched) &&  myAccountForm.last_name.$invalid}"
                           ng-maxlength="64"
                           ng-pattern="script_pattern"
                           required
                    />
                    <div class="invalid-feedback text-left">
                        <div ng-show="myAccountForm.last_name.$error.required">
                            {{'INPUT_ERROR.REQUIRED' |
                            translate}}
                        </div>
                        <div ng-show="myAccountForm.last_name.$error.maxlength"
                             translate="INPUT_ERROR.MAX_LENGTH"
                             translate-values="{value: 64}"
                        >
                        </div>
                        <div ng-show="myAccountForm.last_name.$error.pattern">
                            {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mx-0">
                <div class="col-12 col-md-6 form-group">
                    <label class="small mb-1">{{'USER.MY_ACCOUNT.TIME_ZONE'
                        | translate}}</label>
                    <select class="custom-select pointer-cursor"
                            ng-model="userInfo.timezone"
                            ng-options="timezone as timezone.name for timezone in timezones track by timezone.name">
                    </select>
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label class="small mb-1">{{'USER.MY_ACCOUNT.LANGUAGE_TITLE' | translate}}</label>
                    <select class="custom-select pointer-cursor"
                            ng-model="userInfo.lang"
                            ng-options="languages as languages.name for languages in languages track by languages.name">
                    </select>
                </div>
            </div>
            <div class="row mx-0">
                <!--BUTTON FOOTER-->
                <div class="col-12 text-right">
                    <button class="btn btn-primary"
                            ng-class="{'cursor-disabled': submitting || !myAccountForm.$valid || !isChange}"
                            ng-disabled="submitting || !myAccountForm.$valid || !isChange"
                            type="submit">{{'COMMON.BUTTON_SAVE' | translate}}
                        <span ng-if="submitting"><i class="fa fa-spin fa-spinner"></i></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-2 mt-2">
    <h1 class="h3 mb-0 text-gray-800">{{'USER.MY_ACCOUNT.CURRENCY_OPTIONS' |
        translate}}</h1>
</div>
<form name="currencyForm" novalidate ng-submit="openConfirmUpdateCurrency()">
    <div class="card">
        <div class="card-body">
            <div class="row mx-0">
                <div class="col-12 form-group">
                    <label class="small mb-1">{{'USER.MY_ACCOUNT.CURRENCY_TITLE' | translate}}</label>
                    <select class="custom-select pointer-cursor"
                            ng-disabled="!isPaymentOnline"
                            ng-model="currency"
                            ng-options="currencies as currencies.name for currencies in currencies track by currencies.name">
                    </select>
                </div>
            </div>
            <div class="row mx-0" ng-if="isPaymentOnline">
                <!--BUTTON FOOTER-->
                <div class="col-12 text-right">
                    <button class="btn btn-primary"
                            ng-class="{'cursor-disabled': currencySubmitting || !currencyForm.$valid || !isChangeCurrency}"
                            ng-disabled="currencySubmitting || !currencyForm.$valid || !isChangeCurrency"
                            type="submit">{{'COMMON.BUTTON_SAVE' | translate}}
                        <span ng-if="currencySubmitting"><i class="fa fa-spin fa-spinner"></i></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- Loading -->
<div class="row">
    <div class="col-xs-12 loading-spinner" ng-show="submitting || currencySubmitting">
        <div class="overlay">
            <div class="overlay__spinner">
                <div class="lds-facebook">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
