<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col-md-8">
            <div class="card my-4">
                <div class="card-header bg-success text-white">
                    <h3>
                        <i class="fas fa-money-bill-wave mr-2"></i>
                        {{tarifa.id ? 'Editar' : 'Nueva'}} Tarifa por Pase
                    </h3>
                </div>
                <div class="card-body">
                    <form name="tarifaForm" ng-submit="tarifa.id ? actualizarTarifa() : guardarTarifa()" novalidate>
                        <!-- Modalidad -->
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Modalidad:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" value="COLECTIVO" readonly>
                                <input type="hidden" ng-model="tarifa.codigo" ng-init="tarifa.codigo = 'C'">
                            </div>
                        </div>

                        <!-- Importe -->
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Importe:</label>
                            <div class="col-md-9">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="number" class="form-control" ng-model="tarifa.importe" min="0.01" step="0.01" required>
                                </div>
                                <small class="form-text text-muted">
                                    Importe a descontar por cada pase registrado
                                </small>
                            </div>
                        </div>

                        <!-- Descripción -->
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Descripción:</label>
                            <div class="col-md-9">
                                <textarea class="form-control" ng-model="tarifa.descripcion" rows="3"></textarea>
                                <small class="form-text text-muted">
                                    Información adicional sobre esta tarifa (opcional)
                                </small>
                            </div>
                        </div>

                        <!-- Botones -->
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <button type="button" class="btn btn-secondary" ng-click="cancelar()">
                                    <i class="fas fa-times"></i> Cancelar
                                </button>
                                <button type="submit" class="btn btn-success ml-2" ng-disabled="loading">
                                    <i class="fas" ng-class="{'fa-save': !loading, 'fa-spinner fa-spin': loading}"></i>
                                    {{tarifa.id ? 'Actualizar' : 'Guardar'}} Tarifa
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>