<form [formGroup]="form" novalidate>
    <div class="form-group">
        <label for="data_path">Data path</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button (click)="openModal(template); $event.stopPropagation()" class="btn btn-outline-secondary" type="button">
                    <i class="fas fa-folder-open"></i>
                </button>
            </div>
            <input type="text" class="form-control" id="data_path" name="data_path" formControlName="data_path">
        </div>
    </div>
</form>

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">ANIS file explorer</h4>
    </div>
    <div>
        <app-spinner *ngIf="rootDirectoryIsLoading"></app-spinner>

        <p class="ml-3 mt-3">
            <i class="far fa-folder"></i>
            {{ fileExplorerPath }}
        </p>
        <div *ngIf="rootDirectoryIsLoaded" class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col">Name</th>
                        <th scope="col">Size</th>
                        <th scope="col">MimeType</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let fileInfo of rootDirectory" (click)="dataPathAction(fileInfo)" [class.pointer]="fileInfo.type === 'dir' && fileInfo.name !== '.'">
                        <td>
                            <span *ngIf="fileInfo.type === 'dir'"><i class="far fa-folder"></i></span>
                            <span *ngIf="fileInfo.type === 'file'"><i class="far fa-file"></i></span>
                        </td>
                        <td class="align-middle">
                            {{ fileInfo.name }}
                        </td>
                        <td class="align-middle">{{ fileInfo.size | formatFileSize: false }}</td>
                        <td class="align-middle">{{ fileInfo.mimetype }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button (click)="modalRef.hide()" class="btn btn-danger">Cancel</button>
        &nbsp;
        <button [disabled]="fileExplorerPristine" (click)="selectDirectory()" class="btn btn-primary">Select this directory</button>
    </div>
</ng-template>