<form name="transcribeForm" ng-controller="Document.TranscriptionController">
    <div class="panel panel-success panel-grid">
        <div class="panel-heading">
            <div class="panel-title">
                <span translate>documentDetails.comp.transcription.title</span>
            </div>
        </div>
        <div class="panel-body scroll-body-transcript">
            <div ng-repeat="itemHolder in items">
                <div class="row">
                    <table class="table table-bordered transcript-table-margin">
                        <thead>
                        <tr ng-class="{'lower-transcribe-confidence': itemHolder.item.confidence < transcribeConfidence}">
                            <th><span translate>documentDetails.comp.transcription.startTime</span>:<input ng-readonly="readonlyInputs"
                                    class="transcript-input-size" ng-model="itemHolder.startTime.hours" type="text"
                                    ng-pattern="/^[0-9]{1,2}$/" />:<input ng-readonly="readonlyInputs" class="transcript-input-size"
                                    ng-model="itemHolder.startTime.minutes" type="text" ng-pattern="/^([0-5][0-9]){1,2}$/" />:<input
                                    ng-readonly="readonlyInputs" class="transcript-input-size" ng-model="itemHolder.startTime.seconds" type="text"
                                    ng-pattern="/^([0-5][0-9]){1,2}$/" /><a ng-click="playAt(itemHolder.item.startTime)" href="">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                            </a></th>
                            <th><span translate>documentDetails.comp.transcription.confidence</span>:{{itemHolder.item.confidence}}<span
                                    ng-show="itemHolder.item.confidence" ng-model="itemHolder.item.confidence">%</span></th>
                            <th><input type="checkbox" ng-model="itemHolder.item.corrected"/>
                                <span class="transcript-cb-corrected" translate>documentDetails.comp.transcription.corrected</span>
                                <span ng-if="!itemHolder.item.corrected && itemHolder.item.confidence < transcribeConfidence" class="transcript-warning-sign"><i class="glyphicon glyphicon-warning-sign"></i></span>
                            </th>
                            <th>
                                <button class="btn btn-default btn-xs transcript-btn-delete" ng-click="removeTranscribeItem(itemHolder)"
                                        ng-if="transcribeDataModel === null || transcribeDataModel.type === 'MANUAL'"><i
                                        class="fa fa-trash"></i></button>
                            </th>
                        </tr>
                        </thead>
                    </table>
                    <textarea rows="5" class="col-lg-12" placeholder="{{ 'documentDetails.comp.transcription.enterText' | translate }}" ng-model="itemHolder.item.text">{{itemHolder.item.text}}</textarea>
                </div>
            </div>
            <div class="row">
                <button class="btn btn-xs btn-default" ng-click="addTranscribeItem()" ng-if="transcribeDataModel === null || transcribeDataModel.type === 'MANUAL'">
                    <span translate>documentDetails.comp.transcription.newRow</span>
                </button>
            </div>
        </div>
        <div class="panel-footer">
            <div class="row">
                <div class="col-lg-12">
                    <button class="btn btn-xs btn-primary" ng-disabled="transcribeForm.$invalid || items == null || items.length === 0 || isSaveLoading" ng-click="saveChanges()">
                        <i class="fa fa-floppy-o" ng-if="!isSaveLoading"></i>
                        <span ng-if="isSaveLoading">
                             <i class="fa fa-circle-o-notch fa-spin" ></i>
                        </span>
                        <span translate>documentDetails.comp.transcription.buttons.save</span>
                    </button>
                    <div class="pull-right">
                        <a ng-click="diagram()" href="" class="inline animated btn btn-default btn-xs ng-scope" ng-if="transcribeDataModel.processId != null">
                            <i class="fa fa-sitemap"></i>
                        </a>
                        <button class="btn btn-xs btn-default" ng-click="cancel()" ng-disabled="transcribeDataModel.status != 'QUEUED' || isCancelLoading" ng-if="transcribeDataModel.type === 'AUTOMATIC'">
                            <span ng-if="isCancelLoading">
                                  <i class="fa fa-circle-o-notch fa-spin"></i>
                             </span>
                            <span translate>documentDetails.comp.transcription.buttons.cancel</span>
                        </button>
                        <button class="btn btn-xs btn-default" ng-click="transcribe()" ng-disabled="transcribeDataModel.status === 'QUEUED' || transcribeDataModel.status === 'PROCESSING' || (transcribeDataModel.status === 'COMPLETED' && transcribeDataModel.processId !== null) || isTranscribeLoading">
                            <span ng-if="isTranscribeLoading">
                            <i class="fa fa-circle-o-notch fa-spin"></i>
                            </span>
                            <span translate>documentDetails.comp.transcription.buttons.transcribe</span>
                        </button>
                        <button class="btn btn-xs btn-default" ng-click="complete()" ng-disabled="transcribeDataModel.status === 'COMPLETED' || isCompleteLoading" ng-if="transcribeDataModel.type === 'MANUAL'">
                            <span ng-if="isCompleteLoading">
                                  <i class="fa fa-circle-o-notch fa-spin"></i>
                             </span>
                            <span translate>documentDetails.comp.transcription.buttons.complete</span>
                        </button>
                        <button class="btn btn-xs btn-info" ng-click="compile()"
                                ng-disabled="items == null || items.length === 0 || isCompileLoading">
                             <span ng-if="isCompileLoading">
                                  <i class="fa fa-circle-o-notch fa-spin"></i>
                             </span>
                            <span translate>documentDetails.comp.transcription.buttons.compile</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>