<div class="content card">
    <md-card>
        <md-card-content>
            <form name="formCartao" novalidate ng-submit="gravarDadosCartao($event)">
                <h1>Cartão de Crédito Faturamento</h1>
                <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label for="nome">Nome como está no cartão</label>
                        <input name="nome" id="nome" type="text" class="uppercase" required ng-model="cartao.nome"
                            ng-disabled="!edita" ng-maxlength="50" ng-minlength="3">
                        <div ng-messages="formCartao.nome.$error">
                            <div ng-message="required">Campo obrigatório.</div>
                            <div ng-message="maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                            <div ng-message="minlength">Mínimo 3 caracteres.</div>
                        </div>
                    </md-input-container>
                </div>
                <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex-gt-sm ng-if="edita">
                        <label for="numero">Número</label>
                        <input name="numero" id="numero" ng-model="cartao.numero" required ui-mask="{{cartao.mask}}"
                            ui-options="maskOptions">
                        <div ng-messages="formCartao.numero.$error">
                            <div ng-message="required">Número do cartão é obrigatório.</div>
                            <div ng-message="minlength">Número do cartão é inválido.</div>
                        </div>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm ng-if="!edita">
                        <label>Número</label>
                        <input ng-model="cartao.numero" disabled>
                    </md-input-container>
                </div>
                <div layout-gt-xs="row">
                    <md-input-container class="md-block test2" flex>
                        <label for="vencimento">Validade</label>
                        <md-datepicker class="teste" name="vencimento" id="vencimento" ng-model="cartao.vencimento" md-open-on-focus
                            md-min-date="minDate" md-mode="month" md-date-locale="monthFormat" required
                            ng-disabled="!edita" onkeydown="return false"></md-datepicker>
                        <div ng-messages="formCartao.vencimento.$error">
                            <div ng-message="valid"> Informe uma data válida</div>
                            <div ng-message="required">Informe Mês/Ano de expiração.</div>
                        </div>
                    </md-input-container>
                    <div>
                        <md-input-container class="md-block ccv" flex ng-if="edita">
                            <label for="ccv">CVC</label>
                            <input name="ccv" id="ccv" ng-model="cartao.ccv" maxlength="4" required ng-minlength="3"
                                numeric-only>
                            <div ng-messages="formCartao.ccv.$error">
                                <div ng-message="required">Informe CCV.</div>
                                <div ng-message="minlength">CCV Inválido.</div>
                            </div>
                        </md-input-container>
                        <md-input-container class="md-block ccv" flex ng-if="!edita">
                            <label>CCV</label>
                            <input ng-model="cartao.ccv" disabled>
                        </md-input-container>
                    </div>
                </div>
                <div>
                    <md-button type="submit" class="md-primary md-raised btnGravar" ng-if="edita">Gravar</md-button>
                    <md-button class="md-primary md-raised btnGravar" ng-if="!edita" ng-click="editarCartao($event)">
                        Alterar Cartão</md-button>
                </div>
            </form>
        </md-card-content>
    </md-card>
</div>