<div class="audit-form">
    <div class="error" ng-if="errMessage" >{{errMessage | translate}}</div>

    <div class="loadingIndicator" style="width: 500px; height: 500px;" ng-show="loading" translate>Loading audit form...</div>

    <div class="audit-form-title" ng-if="!isLoading">
        {{auditForm.title}}
        <span class="audit-form-workflow-status text-as-button" ng-if="workflowRule === 'soft' || workflowRule === 'hard'" ng-click="showWorkflow()">{{auditFormData.workflowStatus | translate }}</span>
    </div>

    <div class="audit-form-tabs" ng-if="!isLoading && auditForm.tabs && auditForm.tabs.length > 0">
        <div ng-class="(t.tabId===tab ? 'audit-form-tab-selected' : 'audit-form-tab')" ng-repeat="t in auditForm.tabs track by t.tabId" ng-click="changeTab(t.tabId)" ng-style="{'background-color': (t.tabId===tab ? t.tabSelectedColor : t.tabColor) }">
            {{t.tabText}} <i class="fa fa-info-circle icon-as-button" aria-hidden="true" ng-click="showTabHelp(t.tabTitle, t.tabHelpText, $event)" ng-if="t.tabHelpText"></i>
        </div>
    </div>

    <div ng-if="!isLoading && auditForm && auditForm.formUrl">
        <ng-form name="auditFormForm.form">
            <fieldset ng-disabled="auditFormData.workflowStatus === 'Reviewed' || readOnly">
              <div class="audit-form-content" ng-include="auditForm.formUrl"></div>
            </fieldset>
        </ng-form>

        <div class="audit-form-buttons" ng-if="!closeCallback">
          <button ng-click="saveData()" ng-disabled="isSaving || readOnly || auditFormData.workflowStatus === 'Done' || auditFormData.workflowStatus === 'Reviewed' || auditFormData.workflowStatus === 'Archived' || !auditFormForm.form.$valid" translate>Save data</button> <span ng-class="{ 'warning': true, 'fade-out-note-invisible': !isSaving, 'fade-out-note-visible': isSaving }">{{ (isSaving ? 'Saving...' : 'Saved.') | translate }}</span>
	</div>

        <div class="audit-form-buttons" ng-if="closeCallback">
          <button ng-click="saveData()" ng-disabled="isSaving || readOnly || auditFormData.workflowStatus === 'Done' || auditFormData.workflowStatus === 'Reviewed' || auditFormData.workflowStatus === 'Archived' || !auditFormForm.form.$valid" translate>Save and continue</button> <button ng-click="saveAndClose()" ng-disabled="isSaving || readOnly || auditFormData.workflowStatus === 'Done' || auditFormData.workflowStatus === 'Reviewed' || auditFormData.workflowStatus === 'Archived' || !auditFormForm.form.$valid" translate>Save and close</button> <span ng-class="{ 'warning': true, 'fade-out-note-invisible': !isSaving, 'fade-out-note-visible': isSaving }">{{ (isSaving ? 'Saving...' : 'Saved.') | translate }}</span>
	</div>	

	<div class="audit-form-buttons">
            <div class="warning" ng-if="!auditFormForm.form.$valid" translate>You need to correctly complete all required fields prior to saving this form.</div>
            <div class="warning" ng-if="auditFormData.workflowStatus === 'Done' || auditFormData.workflowStatus === 'Reviewed' || auditFormData.workflowStatus === 'Archived'" translate>You cannot save changes to audit forms which are in a workflow status Done, Reviewed or Archived. Please change the workflow status prior to making any changes.</div>
            <div class="warning" ng-if="readOnly" translate>You can only make changes to audit forms added directly on the given task element and you can never save changes to audit forms if their underlying source is read-only (e.g. in reviewed state or archived).</div>
        </div>

        <div class="audit-form-buttons" ng-if="!isSaving && !readOnly && auditFormData.workflowStatus !== 'Done' && auditFormData.workflowStatus !== 'Reviewed' && auditFormData.workflowStatus !== 'Archived'">
            [ <a class="link-as-button small" ng-click="deleteForm()" translate>Delete this audit form</a> ]
        </div>
    </div>

    <div class="audit-form-additional-sources" ng-if="!isLoading && !readOnly && auditFormData.workflowStatus !== 'Done' && auditFormData.workflowStatus !== 'Reviewed' && auditFormData.workflowStatus !== 'Archived' && auditForm.additionalSources && auditForm.additionalSources.length > 0">
        <img ng-show="isLoadingAdditionalData" src="assets/loadingIndicator.gif" width="20" height="20">
        <select ng-if="auditForm.additionalSources.length > 1" ng-model="additionalSourceSelect" ng-options="source.datafile for source in auditForm.additionalSources"></select>
        <button ng-click="loadAdditionalSource()" ng-disabled="isLoadingAdditionalData" translate>Load additional data</button>
    </div>

    <div class="audit-form-footer" ng-if="!isLoading && auditFormData.id !== undefined && auditFormData.workflowStatus !== 'Archived'">
        <interaction-buttons target-type="'auditFormData'"
                             target-id="auditFormData.id"
                             target-description="auditForm.title"
                             interaction-summary="auditFormData.interactionSummary"
                             source-url="'##' + auditFormData.id">
    </div>
</div>
