<div class="container-fluid" ng-app="app">
    <div class="row" ng-controller="MainController">
        <div class="col-12" ng-if="!haComenzado">
            <div class="form-group">
                <label for="texto">Pega el texto aquí: </label>
                <textarea class="form-control" ng-model="texto.texto" name="texto" id="texto" cols="30" rows="10"></textarea>
            </div>
            <button ng-click="comenzar(texto.texto)" class="btn btn-success">Comenzar <i class="fa fa-arrow-right"></i></button>
        </div>
        <div class="col-12" ng-if="haComenzado">
            <br><button ng-click="volver()" class="btn btn-warning"><i class="fa fa-arrow-left"></i> Volver</button>&nbsp;<button ng-click="comenzar(texto.texto)" class="btn btn-primary">Mezclar <i class="fa fa-refresh"></i></button>
            <form class="form-inline">
                <span ng-repeat="palabra in textoModificado">
		<span ng-if="palabra.palabra">{{palabra.palabra}}&nbsp;</span>
                <div ng-if="palabra.palabraOriginal">
                    <input enfocar-siguiente-al-presionar-enter ng-style="{'width': ( (palabra.palabraOriginal.length === 1 ? 44 :  palabra.palabraOriginal.length <= 7 ? palabra.palabraOriginal.length * 25 : palabra.palabraOriginal.length * 9)) + 'px'}" ng-model="palabra.palabraIntroducida"
                        class="form-control" ng-class="{'is-valid': palabra.palabraOriginal === palabra.palabraIntroducida , 'is-invalid': palabra.palabraOriginal !== palabra.palabraIntroducida}" type="text">
                </div>
                </span>
            </form>
        </div>
    </div>
</div>