cobuild-angular-stack/modules/guest.checkout/views/guest.checkout.message.html

Base stack angular sass jade gulp

<!-- <div class="row"> -->
<div class="container-checkout checkout-message">
    <header>
        <h2 class="text-center header-gray">{{'couple-message' | translate}}</h2>
    </header>
    <!-- </div> -->
    <form name="form_message" ng-submit="form_message.$valid && mcCtrl.step3()">
        <div class="form-group">
            <label class="control-label">{{'message' | translate}}</label>
            <textarea name="message" required ng-model="paymentInfo.message.message" class="form-control form-checkout" rows="10" placeholder="{{'send-cute-message' | translate}}"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">{{'by' | translate}} </label>
            <tags-input add-on-blur="true" class="form-checkout" min-tags="1" name="givers" ng-model="paymentInfo.message.givers" add-on-comma="true" add-on-paste="" replace-spaces-with-dashes="false" placeholder="{{'name' | translate}}(s)"></tags-input>
            <p class="help-block cool-font">{{'several-giving' | translate}}</p>
        </div>
        <div class="form-group">
            <div class="row">
                <div class=" col-sm-6">
                    <tags-input add-on-blur="true" class="form-checkout" min-tags="1" name="emails" type="email" ng-model="paymentInfo.message.emails" placeholder="{{'email' | translate}}(s)" add-on-space="true" add-on-comma="true" add-on-paste="" allowed-tags-pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"></tags-input>
                    <p class="help-block cool-font">{{'several-giving-email' | translate}}</p>
                </div>
                <div class=" col-sm-6" ng-class="{'has-error':form_message.tel.$error}">

                    <input required="" ng-pattern="validPhone" type="tel" name="tel" ng-model="paymentInfo.message.tel" class="form-control form-checkout" placeholder="{{'phone' | translate}}" />
                    <ul class="help-block" ng-show=
                    "form_message.tel.$invalid && (form_message.$submitted || form_message.tel.$touched)">
                        <li ng-show="form_message.tel.$error.tel || form_message.tel.$error.pattern">
                        {{'invalid-phone' | translate}}</li>


                        <li ng-show="form_message.tel.$error.required && form_message.tel.$touched">
                        {{'field-required' | translate}}</li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="hidden-xs" style="height: 42px;">
            <button type="button" class="btn btn-clear-dark btn-lg pull-left" ui-sref="guest.registry({url:url})">
                    {{'continue-buying' | translate}} </button>
            <button type="submit" class="btn btn-inverse btn-lg pull-right" ui-sref="guest.checkout.pay({url:url})" ng-disabled="form_message.$invalid">
                    {{'proceed-pay'| translate}}</button>
        </div>
        <div class="visible-xs">
            <div class="text-center">
                <button type="submit" class="btn btn-inverse btn-lg margin-bottom" ng-disabled="form_message.$invalid">
                    {{'proceed-pay' | translate}}
                </button>
            </div>
            <div class="text-center">
                <button type="button" class="btn btn-clear-dark btn-lg" ui-sref="guest.registry({url:url})">
                    {{'continue-buying' | translate}}
                </button>
            </div>
        </div>
    </form>
</div>