<div data-ng-controller="RegisterCtrl">
    <div ng-repeat="error in registerError">
        <div class="alert alert-danger animated fadeIn">{{error.msg}}</div>
    </div>
    <!-- <div class="alert alert-danger animated fadeIn" ng-show="usernameError">{{usernameError}}</div> -->
    <div class="alert alert-danger animated fadeIn" ng-show="emailError">{{emailError}}</div>
    <form id="register_form" ng-submit="register()">
        <h2>Sign Up</h2>

        <div class="input-wrapper">
            <input required id="name" type="text" name="name" placeholder="Full Name"
                   ng-model="user.name">

            <div class="error_message">Please enter a correct info #</div>
            <span class="pic user"></span>
        </div>

        <div class="input-wrapper">
            <input required id="email_block" type="email" name="email" placeholder="Email Address"
                   ng-model="user.email">

            <div class="error_message">Please enter a correct info #</div>
            <span class="pic email"></span>
        </div>

        <!-- <div class="input-wrapper">
            <input required id="username" type="text" name="username" placeholder="Username"
                   ng-model="user.username">

            <div class="error_message">Please enter a correct info #</div>
            <span class="pic username"></span>
        </div> -->

        <div class="input-wrapper">
            <input required id="password_block" name="password" type="{{input.type}}"
                   placeholder="{{input.placeholder}}" ng-model="user.password">

            <div class="error_message">Please enter a correct info #</div>
        <!-- <span class="pic password {{input.iconClass}}" ng-click="togglePasswordVisible()">
              <div class="hide_text_password">
                  {{input.tooltipText}}
              </div>
        </span> -->
        </div>
        <div class="input-wrapper">
            <input required id="confirm_password" name="confirm_password" type="{{input.type}}"
                   placeholder="{{input.placeholderConfirmPass}}" ng-model="user.confirmPassword">

            <div class="error_message">Please enter a correct info #</div>
        <!-- <span class="pic password {{input.iconClassConfirmPass}}" ng-click="togglePasswordConfirmVisible()">
              <div class="hide_text_password">
                  {{input.tooltipTextConfirmPass}}
              </div>
        </span> -->
        </div>

        <div class="input-wrapper">
            <input required id="credit_number" type="text" name="credit_number" placeholder="Credit Card Number"
                   ng-model="user.creditCardNumber">

            <div class="error_message">Please enter a correct info #</div>
            <span class="pic cardNumber"></span>
        </div>

        <div class="input-wrapper">
            <select required id="credit_provider" type="text" name="credit_provider"
                   ng-model="user.creditCardProvider">
                <option value="" class="placeholder" disabled selected>Credit Card Provider</option>
                <option value="visa">Visa</option>
                <option value="master_card">Master Card</option>
                <option value="american_express">American Express</option>
            </select>

            <div class="error_message">Please enter a correct info #</div>
            <span class="pic cardProvider"></span>
        </div>

        <div class="button_register">
            <button type="submit" class="submit_button">Sign up</button>
        </div>
    </form>
</div>
