<vn-dialog
    vn-id="SMSDialog"
    on-accept="$ctrl.onResponse()"
    message="Send SMS">
    <tpl-body>
        <section class="SMSDialog">
            <!--vn-horizontal>
                <vn-textfield
                    vn-one
                    label="Routes to notify"
                    ng-model="$ctrl.sms.routesId"
                    required="true"
                    rule>
                </vn-textfield>
            </vn-horizontal-->
            <vn-horizontal >
                <vn-textarea vn-one
                    vn-id="message"
                    label="Message" 
                    ng-model="$ctrl.sms.message"
                    info="Special characters like accents counts as a multiple"
                    rows="5"
                    required="true"
                    rule>
                </vn-textarea>
            </vn-horizontal>
            <vn-horizontal>
                <span>
                    {{'Characters remaining' | translate}}: 
                    <vn-chip translate-attr="{title: 'Packing'}" ng-class="{
                        'colored': $ctrl.charactersRemaining() > 25,
                        'warning': $ctrl.charactersRemaining() <= 25,
                        'alert': $ctrl.charactersRemaining() < 0,
                    }"> 
                        {{$ctrl.charactersRemaining()}}
                    </vn-chip>
                </span>
            </vn-horizontal>
        </section>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Send</button>
    </tpl-buttons>
</vn-dialog>