

<div class="container-fluid">
    <div *ngIf="mainFolder" class="card d-print-inline-flex text-center topcard">
        <div class="row">
            <div class="col-md-4 card-text">
                <p> <strong>Current Folder :</strong> {{mainFolder?.name}}</p>
            </div>
            <div class="col-md-4 card-text">
                <p> <strong>Used space :</strong> {{sizeFile.toString() === '0' ? '0' :  (sizeFile/ ( 1024 * 1024 ) | number : '1.2-2')}} Mo / 30 Go</p>
            </div>
            <div class="col-md-4 card-text">
                <p> <strong>Path :</strong> {{mainFolder?.path}}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
                    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
                </div>
            </div>
        </div>
    </div>

    <div class="topButtons">

        <div class="row topButtonsRow">
            <div class="col-md-8 align-middle l-flex--center">
                <button type="button" class="btn  btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder?.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder?.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder?.parent}}</button>


                <button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
                </button>


                <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
                    <div class="input-group-btn">
                        <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
                    </div>
                    <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
                </div>


                <label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
                    <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
                </label>
                <button *ngIf="fileChooseName !== 'None'" type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Add selected file : {{fileChooseName}}</button>
            </div>

            <div class="col-md-4 align-middle l-flex--center">
                <!--<form class="md-form active-pink active-pink-2 mb-3">-->
                <!--<div class="row">-->
                <!--<i class="fa fa-search" aria-hidden="true"></i>-->
                <!--<input #query (keyup)="filter(query.value)" type="text" class="form-control form-control-sm ml-3 w-75" placeholder="Search File" aria-label="Search">-->
                <!--<div class="list-group" *ngFor="let folder of filterAllUserFolder">-->
                <!--<a class="list-group-item list-group-item-action waves-light" (click)="openFolder(folder.path)" mdbWavesEffect>-->
                <!--{{folder.name}}-->
                <!--<br>-->
                <!--{{folder?.path}}-->
                <!--</a>-->
                <!--</div>-->
                <!--</div>-->
                <!--</form>-->
                <mdb-completer [label]="'Find folder'" initialValue="Find folder" (selected)="openFolder('searchStr')" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
                </mdb-completer>
            </div>
        </div>
    </div>


</div>
<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Size</th>
        <th>Type</th>
        <th>Date added</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let folder of allUserFolder; let i = index;">
        <td class="row">
            <div class="col-md-4">
                <i class="fa fa-folder fa-2x" aria-hidden="true"></i>
            </div>
            <div class="btn-group d-print-inline-flex text-center">

                <!--Dropdown primary-->
                <div class="dropdown" dropdown>

                    <!--Trigger-->
                    <button dropdownToggle class="btn btn-primary y btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
                        <i class="fa fa fa-folder-open" aria-hidden="true"></i>
                    </button>

                    <!--Menu-->
                    <div class="dropdown-menu dropdown-primary">
                        <a class="dropdown-item" mdbTooltip="Ouvrir : {{folder?.name}}" placement="top" (click)="openFolder(folder?.path)">Open Folder</a>
                        <a class="dropdown-item" mdbTooltip="Supprimer : {{folder?.name}}" placement="top" (click)="deleteFolder(folder)">Delete Folder</a>
                        <h6 class="dropdown-header">Rename</h6>
                        <div class="d-print-inline-flex text-center">
                            <input type="search" class="form-control col-xs-2" placeholder= "{{folder?.name}}" [(ngModel)]="folder.name">
                            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
                                <i class="fa fa-pencil prefix"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!--/Dropdown primary-->


                <div class="btn-group" dropdown>
                    <button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{folder?.name}}" placement="top"  mdbWavesEffect>
                        <i class="fa fa-arrows" aria-hidden="true"></i>
                    </button>
                    <div class="dropdown-menu dropdown-primary">
                        <a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest?.name}}</a>
                    </div>
                </div>
            </div>
        </td>

        <td>
            <label>{{folder.name}}</label>
        </td>
        <!--<td>{{ folder.name }}</td>-->
        <td><label></label></td>
        <td><label>Folder</label></td>
        <td><label></label></td>
    </tr>
    <tr *ngFor="let file of allUserFile; let i = index;">
        <td class="row">
            <div class="col-md-4">
                <i class="fa fa-file fa-2x" aria-hidden="true"></i>
            </div>
            <div class="btn-group d-print-inline-flex text-center">
                <!--Dropdown primary-->
                <div class="dropdown" dropdown>

                    <!--Trigger-->
                    <button dropdownToggle class="btn btn-primary btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
                        <i class="fa fa-edit" aria-hidden="true"></i>
                    </button>

                    <!--Menu-->
                    <div class="dropdown-menu dropdown-primary">
                        <a class="dropdown-item" href="{{file.data}}" download="{{ file.name.toString()}}">Download</a>
                        <a class="dropdown-item" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)">Delete</a>
                        <a class="dropdown-item" (click)="basicModal.show()" mdbWavesEffect>Preview</a>
                        <a class="dropdown-item" (click)="linkModal.show()" mdbWavesEffect>Download Link</a>
                        <div class="divider dropdown-divider"></div>
                        <h6 class="dropdown-header">Rename</h6>
                        <div class="d-print-inline-flex text-center">
                            <input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">
                            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
                                <i class="fa fa-pencil prefix"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!--/Modal-->
                <div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
                    <div class="modal-dialog modal-notify info modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                                    <span aria-hidden="true">×</span>
                                </button>
                                <h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
                            </div>
                            <div class="modal-body img-fluid text-center">
                                <div *ngIf="file.type === ('image/jpeg')">
                                    <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
                                </div>
                                <div *ngIf="file.type === ('image/png')">
                                    <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
                                </div>
                                <div *ngIf="file.type === ('application/pdf')">
                                    <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
                                    <object [data]=file.urlSafe type="application/pdf"
                                            width="350" height="200" typemustmatch>
                                    </object>

                                </div>
                                <div *ngIf="file.type === ('video/mp4')">
                                    <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
                                    <vg-player style="height: 200px; width: 350px">
                                        <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
                                            <source [src]=file.urlSafe type="video/mp4">
                                        </video>
                                    </vg-player>
                                </div>
                                <div *ngIf="file.type === ('text/plain')">
                                    <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
                                      <div>{{test}}</div>
                                      <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
                                    <object [data]=file.urlSafe type="text/plain"
                                            width="350" height="200" typemustmatch>
                                    </object>
                                </div>
                                <div *ngIf="file.type === ''">
                                    <i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
                                    <!--<object [data]=file.url type="text/plain"
                                            width="350" height="200" typemustmatch>
                                    </object>-->
                                    <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
                                      <div>{{test}}</div>
                                      <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
                                </div>
                                <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
                                    <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
                                    <vg-player style="height: 50px; width: 350px">
                                        <vg-controls>
                                            <vg-play-pause></vg-play-pause>
                                            <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                                            <vg-scrub-bar>
                                                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                                <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                                            </vg-scrub-bar>

                                            <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                                            <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                                            <vg-mute></vg-mute>

                                            <vg-fullscreen></vg-fullscreen>
                                        </vg-controls>

                                        <audio #media [vgMedia]="media" id="myAudio" preload="auto">
                                            <source  [src]=file.urlSafe type="audio/mp3">
                                        </audio>
                                    </vg-player>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
                                <!--<button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--/Modal-->

                <!--/Modal-->
                <div mdbModal #linkModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-notify modal-info" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title w-100 white-text" id="myModalLabel">Share Link</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="linkModal.hide()">
                                    <span aria-hidden="true" class="white-text">×</span>
                                </button>
                            </div>
                            <div class="modal-body text-center">
                                <div class="container-fluid">
                                    <div class="col-md-12">
                                        <div class="col-md-12">
                                            <i class="fa file-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-md-12">
                                            <div *ngIf="file.type === ('image/jpeg')">
                                                <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
                                            </div>
                                            <div *ngIf="file.type === ('image/png')">
                                                <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
                                            </div>
                                            <div *ngIf="file.type === ('application/pdf')">
                                                <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
                                                <object [data]=file.urlSafe type="application/pdf"
                                                        width="350" height="200" typemustmatch>
                                                </object>

                                            </div>
                                            <div *ngIf="file.type === ('video/mp4')">
                                                <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
                                                <vg-player style="height: 200px; width: 350px">
                                                    <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
                                                        <source [src]=file.urlSafe type="video/mp4">
                                                    </video>
                                                </vg-player>
                                            </div>
                                            <div *ngIf="file.type === ('text/plain')">
                                                <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
                                                  <div>{{test}}</div>
                                                  <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
                                                <object [data]=file.urlSafe type="text/plain"
                                                        width="350" height="200" typemustmatch>
                                                </object>
                                            </div>
                                            <div *ngIf="file.type === ''">
                                                <i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
                                                <!--<object [data]=file.url type="text/plain"
                                                        width="350" height="200" typemustmatch>
                                                </object>-->
                                                <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
                                                  <div>{{test}}</div>
                                                  <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
                                            </div>
                                            <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
                                                <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
                                                <vg-player style="height: 50px; width: 350px">
                                                    <vg-controls>
                                                        <vg-play-pause></vg-play-pause>
                                                        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                                                        <vg-scrub-bar>
                                                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                                            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                                                        </vg-scrub-bar>

                                                        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                                                        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

                                                        <vg-mute></vg-mute>

                                                        <vg-fullscreen></vg-fullscreen>
                                                    </vg-controls>

                                                    <audio #media [vgMedia]="media" id="myAudio" preload="auto">
                                                        <source  [src]=file.urlSafe type="audio/mp3">
                                                    </audio>
                                                </vg-player>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p><strong> {{file.name}} </strong></p>
                                            </div>
                                            <div class="col-md-6">
                                                <p><strong> {{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <i class="fa unlock-alt" aria-hidden="true"></i>
                                        <i class="fa unlock" aria-hidden="true"></i>
                                        <i class="fa unlock-alt" aria-hidden="true"></i>
                                        <i class="fa unlock" aria-hidden="true"></i>
                                        <div class="md-form">
                                            <input value="https://localhost:3000/download/{{file._id.toString()}}" disabled="disabled" type="text" id="shareLink" class="form-control" mdbInputDirective>
                                            <label for="shareLink">Link</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-center">
                                <a type="button" class="btn btn-secondary waves-light" (click)="copyLink(file._id.toString())" mdbWavesEffect>Copy Link <i class="fa fa-copy ml-1" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/Modal-->

                <!--/Dropdown primary-->


                <div class="btn-group" dropdown>
                    <!--Trigger-->
                    <button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{file.name}}" placement="top" mdbWavesEffect>
                        <i class="fa fa-arrows" aria-hidden="true"></i>
                    </button>

                    <!--Menu-->
                    <div class="dropdown-menu dropdown-primary">
                        <a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
                    </div>
                </div>
            </div>

        </td>
        <td>
            <!--<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
                <i class="fa fa-pencil prefix"></i>
            </button>
            <input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">-->
            <label>{{file.name}}</label>
        </td>

        <!--<td>{{ file.name }}</td>-->
        <td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
        <td>{{ file.type }}</td>
        <td>{{ file.lastDate | date: 'MM/dd/yyyy'}}</td>
    </tr>

    </tbody>
</table>


<!-- Button trigger modal-->
<button id="openModalButton" type="button" class="btn btn-primary waves-light" [hidden]="true" data-toggle="modal" data-target="#basicExample" (click)="cookies?.show()" mdbWavesEffect>
    Bottom
</button>
<!--Modal: modalCookie-->
<div mdbModal #cookies="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: false}">
    <div *ngIf="allUserFile?.length === 0" class="modal-dialog modal-frame modal-bottom text-center"  role="document">
        <div class="modal-content" id="cookiesModal" style="background-color: #7283a7!important;">
            <div class="modal-body">
                <div class="row px-4">
                    <p class="pt-3 pr-2 text-white">Our website use cookies do you agree ?</p>
                    <button type="button" class="btn btn-outline-white btn-md waves-light" data-dismiss="modal" (click)="cookies.hide()" mdbWavesEffect>Close</button>
                    <button type="button" class="btn btn-outline-white btn-md waves-light" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Read rules</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Modal: modalCookie-->
<!--Modal-->
<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                    <br>
                    <br>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                    <br>
                    <br>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                    <br>
                    <br>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                    <br>
                    <br>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                    <br>
                    <br>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                    <br>
                    <br>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    <br>
                    <br>
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
            </div>
        </div>
    </div>
</div>
<!--Modal-->


