<div class="content card">
    <form name="formCartao" novalidate>
        <h1 class="title"> Adicionando novo cartão</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-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>
                <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>
        </div>
        <div layout-gt-xs="row">
            <md-input-container class="md-block" flex>
                <label for="vencimento">Validade</label>
                <md-datepicker name="vencimento" id="vencimento" ng-model="cartao.vencimento" md-open-on-focus
                    md-min-date="minDate" md-mode="month" md-date-locale="monthFormat" required></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>
                    <label for="ccv">CCV</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>
            </div>
        </div>
        <div layout="row">
            <md-input-container class="md-block" flex-gt-sm>
                <label for="documento">CPF/CNPJ do titular</label>
                <input name="documento" id="documento" ng-model="cartao.documento" required ui-br-cpfcnpj-mask>
                <div ng-messages="formCartao.documento.$error">
                    <div ng-message="required">CPF do cartão é obrigatório.</div>
                    <div ng-message="minlength">CPF do cartão é inválido.</div>
                </div>
            </md-input-container>
        </div>
        <div layout="row">
            <md-input-container class="md-block" flex-gt-sm>
                <label for="telefone">Telefone do titular</label>
                <input name="telefone" id="telefone" ng-model="cartao.telefone" required ui-br-phone-number>
                <div ng-messages="formCartao.telefone.$error">
                    <div ng-message="required">Telefone do cartão é obrigatório.</div>
                    <div ng-message="minlength">Telefone do cartão é inválido.</div>
                </div>
            </md-input-container>
        </div>
        <md-input-container class="md-block" flex>
            <label for="email">Email do titular</label>
            <input name="email" id="email" ng-model="cartao.email" required minlength="10" maxlength="100"
                ng-pattern="/^.+@.+\..+$/">
            <div ng-messages="formCartao.email.$error">
                <div ng-message="required">Email do cartão é obrigatório.</div>
                <div ng-message="minlength">Email do cartão é inválido.</div>
            </div>
        </md-input-container>

        <md-checkbox ng-model="cartao.salvar">Salvar Cartão</md-checkbox>
    </form>
    <div>
        <md-button class="md-primary md-raised" ng-click="openCreditCard(ngDialogData)">Voltar</md-button>
        <md-button class="md-primary md-raised" ng-click=" confirmDialog(ngDialogData, cartao, formCartao)">
            Confirmar Dados</md-button>
    </div>
</div>