<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div ng-if="!show_form" class="text-center">
                <img src="images/searching.gif" class="img-fluid" alt=""/>
            </div>
            <div ng-if="show_form" class="card my-5">
                <div class="card-header">
                    <h3>Recargar TAG {{tag.numero_tag}}</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Información del TAG</h5>
                            <p><strong>Número TAG:</strong> {{tag.numero_tag}}</p>
                            <p><strong>Saldo Actual:</strong> ${{tag.saldo | number:2}}</p>
                            <p ng-if="tag.numero_economico"><strong>Número Económico:</strong> {{tag.modalidad_nombre}} - {{tag.numero_economico}}</p>
                        </div>
                    </div>
                    <form name="formRecharge" ng-submit="submit()" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Monto a Recargar <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="number" 
                                               class="form-control" 
                                               ng-model="form.monto"
                                               name="monto"
                                               required
                                               min="0.01"
                                               step="0.01">
                                    </div>
                                    <div ng-messages="formRecharge.monto.$error" ng-if="formRecharge.monto.$dirty" class="text-danger">
                                        <small ng-message="required">Este campo es requerido</small>
                                        <small ng-message="min">El monto debe ser mayor a 0</small>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Comentario</label>
                                    <textarea class="form-control" 
                                              ng-model="form.comentario"
                                              name="comentario"
                                              maxlength="500"
                                              rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <button type="button" class="btn btn-secondary" ui-sref="main.tags_lista">
                                    <i class="fas fa-times"></i> Cancelar
                                </button>
                                <button type="submit" class="btn btn-success" ng-disabled="formRecharge.$invalid">
                                    <i class="fas fa-money-bill"></i> Realizar Recarga
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>