<div class="modal-container no-background-image">
    <div class="modal-header">
        <h3>Resource manager</h3>
    </div>
    <div class="modal-body">
        <tabset>

            <!-- ACQUISITIONS -->
            <tab heading="Acquisition list" active="activeTab.acquisition">

                <!--SEARCH BAR-->
                <div class="header-div">
                    <form class="form-inline">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
                            <input type="text" class="form-control input-sm input-filter" ng-model="filterText.acq" placeholder="Filter by name, date,..." />
                        </div>
                    </form>
                </div>

                <!--ACQUISITION LIST-->
                <div class="acquisition-menu">
                    <div infinite-scroll="nextAcquisitionPage()" infinite-scroll-disabled="acqLoader.busy" infinite-scroll-distance="0" infinite-scroll-container="'.acquisition-menu'">
                        <div ng-repeat="acq in acquisitionList track by acq.acquisitionID"
                             ng-init="confirmDelete = { open: false };"
                             ng-click="reloadAcquisition(acq)"
                             class="acquisition pointer" ng-class="{ 'selected': acq.acquisitionID == currentAcquisitionID }" acquisition-user-data-editor>
                            <div class="acq">
                                <div class="acq-left">
                                    <a href="#">
                                        <img class="acq-object" src="images/ic_chartLighter.svg" alt="" width="40" height="40" />
                                    </a>
                                </div>

                                <!--BODY-->
                                <div class="acq-body">

                                    <!--BUTTON-->
                                    <div class="pull-right ic-right" ng-click="$event.stopPropagation()" style="margin-right: 15px; ">
                                        <div ng-if="!acqEditor.open" class="ic-item pull-right">
                                            <span class="trash" title="Delete activity">
                                                <span ng-click="confirmDelete.open = true; $event.stopPropagation();"
                                                      class="glyphicon glyphicon-trash" title="Delete acquisition">
                                                </span>
                                            </span>
                                        </div>
                                        <div ng-if="!acqEditor.open" class="ic-item pull-right">
                                            <span class="trash">
                                                <span ng-click="acqEditor.open = true; $event.stopPropagation();"
                                                      class="glyphicon glyphicon-pencil" title="Edit report"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="acq-heading">
                                        Acquisition ID: <em>{{ acq.acquisitionID }}</em><br />
                                        Date: <em>{{ acq.lastStartDate | date:'short' }}</em> — Duration: {{acq.duration.toFixed(2)}} seconds
                                    </div>
                                    <div class="acq-content">
                                        <div ng-if="acq.remote1 && acq.remote1.fixedConfig">
                                            Remote1 (ID: {{acq.remote1.remoteID}}) : {{ acq.remote1.configDesc }} &nbsp;
                                            <a href="" ng-click="isDetailsOpen = !isDetailsOpen; $event.stopPropagation();">More</a>
                                            <div ng-if="isDetailsOpen">
                                                [<span ng-repeat="sensor in sensors(acq, 1) track by $index">{{sensor.shortDesc}}
                                                    <small>({{sensor.sampleRate}}Hz)</small><span ng-if="!$last">, </span></span>]
                                            </div>
                                        </div>
                                        <div ng-if="acq.remote2 && acq.remote2.fixedConfig">
                                            Remote2 (ID: {{acq.remote2.remoteID}}) : {{ acq.remote2.configDesc }} &nbsp;
                                            <a href="" ng-click="isDetailsOpen = !isDetailsOpen; $event.stopPropagation();">More</a>
                                            <div ng-if="isDetailsOpen">
                                                [<span ng-repeat="sensor in sensors(acq, 2) track by $index">{{sensor.shortDesc}}
                                                    <small>({{sensor.sampleRate}}Hz)</small><span ng-if="!$last">, </span></span>]
                                            </div>
                                        </div>
                                    </div>

                                    <div ng-class="{'content-editable':!acqEditor.open}" ng-click="$event.stopPropagation();">
                                        <div>
                                            <span ng-if="!acqEditor.open && acq.userData.userName">User name:</span>
                                            <em ng-if="!acqEditor.open && acq.userData.userName">{{acq.userData.userName}}</em>
                                            <span ng-if="acqEditor.open">User name:</span>
                                            <input class="form-element" ng-if="acqEditor.open" type="text" ng-model="acqEditor.userData.userName">
                                        </div>
                                        <div>
                                            <span ng-if="!acqEditor.open && acq.userData.comment">Comment:</span>
                                            <em ng-if="!acqEditor.open && acq.userData.comment">{{acq.userData.comment}}</em>
                                            <span ng-if="acqEditor.open">Comment:</span>
                                            <textarea class="form-element" ng-if="acqEditor.open" type="text" ng-model="acqEditor.userData.comment"></textarea>
                                        </div>
                                    </div>


                                    <div ng-if="acqEditor.open">
                                        <div class="pull-right">
                                            <a href="" ng-click="acqEditor.cancel(); $event.stopPropagation();">Cancel</a>
                                            &nbsp;&nbsp;<a href="" ng-click="acqEditor.save(); $event.stopPropagation();">Save</a>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div ng-if="confirmDelete.open" ng-click="$event.stopPropagation();"
                                 class="confirmation-delete"> <!-- flipInX -->
                                <div class="conf-left">
                                    <span class="glyphicon glyphicon-exclamation-sign"></span>
                                </div>
                                <div class="conf-body">
                                    <div class="conf-text">
                                        ({{ acq.acquisitionID }})<br />
                                        Are you sure you want to delete this acquisition?
                                    </div>
                                    <button ng-click="confirmDelete.open = false; $event.stopPropagation();" type="button" class="btn btn-link btn-link-cancel btn-xs">Cancel</button>
                                    <button ng-click="deleteAcquisition(acq.acquisitionID); $event.stopPropagation();" type="button" class="btn btn-link btn-link-delete btn-xs">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </tab>

            <!-- LESSONS / REPORTS -->
            <tab heading="Lesson list" active="activeTab.lessonPlayer">

                <!--SEARCH BAR-->
                <div class="header-div">
                    <form class="form-inline">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
                            <input type="text" class="form-control input-sm input-filter" ng-model="filterText.les" placeholder="Filter by name, date,..." />
                        </div>
                        &nbsp;&nbsp;
                        <button class="btn btn-default btn-sm" ng-click="importReport()">Import a report</button>
                    </form>
                </div>

                <!--LESSON LIST-->
                <div class="acquisition-menu">

                    <!--Imported Report no activity found-->
                    <div ng-if="importedReport.noActivityFound" class="alert-import">

                        <div class="content">
                            ReportID: {{importedReport.report.reportID}} <br/>
                            Date: {{importedReport.report.startTime | date:'short' }} <br/>
                            User: {{importedReport.report.userData.userName || 'n.a.'}} <br/>
                            Comment: {{importedReport.report.userData.comment || 'n.a.'}} <br/>
                        </div>
                        <div class="alert-message pull-left" ng-if="importedReport.message">
                            {{importedReport.message}}
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-link btn-sm" ng-click="cancelImportReport($event)">Cancel</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div ng-repeat="lesson in filteredLessonList track by $index"
                         ng-class="{ 'opened-lesson': isActivityOpen[lesson.slideShow.id] }"
                         class="acquisition pointer">
                        <div class="acq">
                            <div class="acq-left">
                                <a href="#">
                                    <img class="acq-object" src="images/ic_lesson.svg" alt="" width="40" height="40" />
                                </a>
                            </div>
                            <!-- BODY -->
                            <div class="acq-body" ng-click="loadLesson(lesson)">
                                <div class="acq-heading">
                                    <div class="file-name">
                                        {{lesson.file.name}}&nbsp;<span>[ID: {{lesson.slideShow.id || 'n.a.'}}]</span>
                                    </div>
                                    Author: {{lesson.slideShow.author || 'n.a.'}}<br/>
                                    <div class="desc">
                                        {{lesson.slideShow.description || 'n.a.'}} —
                                        <a href="" ng-click="toggleActivityReports(lesson, $event);">
                                            <span ng-if="!isActivityOpen[lesson.slideShow.id]">Show</span>
                                            <span ng-if="isActivityOpen[lesson.slideShow.id]">Hide</span>
                                            reports ({{lesson.reports.length}})
                                        </a>
                                    </div>
                                </div>
                                <!--<div class="acq-content">
                                    {{lesson.file.pathname}}
                                </div>-->
                            </div>
                            <div class="divider"></div>

                            <!-- ACTIVITIES -->
                            <div class="activities" ng-show="isActivityOpen[lesson.slideShow.id]">

                                <!--Imported Report-->
                                <div ng-if="importedReport.report.slideShow.id == lesson.slideShow.id" class="alert-import">
                                    <div class="title">Are you sure you want to import the following report ?</div>
                                    <div class="content">
                                        ReportID: {{importedReport.report.reportID}} <br/>
                                        Date: {{importedReport.report.startTime | date:'short' }} <br/>
                                        User: {{importedReport.report.userData.userName || 'n.a.'}} <br/>
                                        Comment: {{importedReport.report.userData.comment || 'n.a.'}} <br/>
                                    </div>
                                    <div class="alert-message pull-left" ng-if="importedReport.message">
                                        {{importedReport.message}}
                                    </div>
                                    <div class="pull-right">
                                        <button class="btn btn-link btn-xs" ng-click="cancelImportReport($event)">Cancel</button>
                                        <button class="btn btn-default btn-xs" ng-click="confirmImportReport($event)" ng-disabled="importedReport.confirmDisabled">Confirm</button>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="item"
                                     ng-repeat="report in lesson.reports track by $index"
                                     ng-click="editor.open || loadLesson(lesson, report)"
                                     ng-init="confirmDelete = { open: false };" report-user-data-editor>
                                    <div class="isolate" ng-class="{ 'selected': report.reportID == currentReportID }">

                                        <div class="pull-right ic-right" ng-click="$event.stopPropagation()">
                                            <div ng-if="!editor.open" class="ic-item pull-right">
                                                <span class="trash" title="Delete activity">
                                                    <span ng-click="confirmDelete.open = true; $event.stopPropagation();"
                                                          class="glyphicon glyphicon-trash" title="Delete report">
                                                    </span>
                                                </span>
                                            </div>
                                            <div ng-if="!editor.open" class="ic-item pull-right">
                                                <span class="trash">
                                                    <span ng-click="editor.open = true; $event.stopPropagation();"
                                                          class="glyphicon glyphicon-pencil" title="Edit report"></span>
                                                </span>
                                            </div>
                                            <div ng-if="!editor.open" class="ic-item pull-right">
                                                <span class="trash">
                                                    <span ng-click="exportReport(report.reportID); $event.stopPropagation();"
                                                          class="glyphicon glyphicon-export" title="Export report"></span>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="heading">
                                            Report ID: <em>{{report.reportID}}</em>
                                            <br />
                                            Date: <em>{{ report.startTime | date:'short' }}</em>
                                        </div>

                                        <div ng-class="{'content-editable':!editor.open}">
                                            User name:
                                            <em ng-if="!editor.open">{{report.userData.userName || 'n.a.'}}</em>
                                            <input class="form-element" ng-if="editor.open" type="text" ng-model="editor.userData.userName">
                                            <br />
                                            Comment:
                                            <em ng-if="!editor.open">{{report.userData.comment || 'n.a.'}}</em>
                                            <textarea class="form-element" ng-if="editor.open" type="text" ng-model="editor.userData.comment"></textarea>
                                        </div>

                                        <!-- BUTTONS -->
                                        <div ng-if="editor.open">
                                            <div class="pull-right">
                                                <a href="" ng-click="editor.cancel(); $event.stopPropagation();">Cancel</a>
                                                &nbsp;&nbsp;<a href="" ng-click="editor.save(); $event.stopPropagation();">Save</a>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>

                                        <!-- Confirmation -->
                                        <div ng-if="confirmDelete.open" class="confirmation-delete confirmation-delete-position">
                                            <div class="conf-left">
                                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                            </div>
                                            <div class="conf-body">
                                                <div class="conf-text">
                                                    Report ID: {{report.reportID}}<br />
                                                    Are you sure you want to delete this report?
                                                </div>
                                                <button ng-click="confirmDelete.open = false; $event.stopPropagation();"
                                                        type="button" class="btn btn-link btn-link-cancel btn-xs">
                                                    Cancel
                                                </button>
                                                <button ng-click="deleteReport(report.reportID); confirmDelete.open = false; $event.stopPropagation();"
                                                        type="button" class="btn btn-link btn-link-delete btn-xs">
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </tab>

        </tabset>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$close()">Close</button>
    </div>
</div>
