
<div class="modal" id="report-list-modal" tabindex="-1" role="dialog" aria-labelledby="ReportListLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" ng-controller="ReportListController">
      <div class="modal-header d-flex">
        <h5 class="modal-title mr-auto" id="ReportListLabel">Open</h5>

        <form class="form-inline">
            <input
                    class="form-control mr-2"
                    style="width: 20em;"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                    ng-model="list_search_keyword" />

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </form>
      </div>

      <div class="modal-body scrollable">
            <table class="table table-hover report-list">
                <thead>
                    <tr>
                        <th><a href ng-click="set_order('event')">Event</a></th>
                        <th><a href ng-click="set_order('time')">Date/Time</a></th>
                        <th><a href ng-click="set_order('magnitude')">Magnitude</a></th>
                        <th><a href ng-click="set_order('depth')">Depth [km]</a></th>
                        <th><a href ng-click="set_order('type')">Type</a></th>
                        <th><a href ng-click="set_order('run')">Run</a></th>
                        <th>Tags</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="line in get_ordered_report_entries()" class="{{ line.report_entry.get_solution_type() + ' ' + line.bg_class + ' ' + is_selected_class(line.report_entry.problem_name) }}" ng-click="rl.selected_toggle(line.report_entry.problem_name)" ng-dblclick="rl.selected_add_and_close_modal(line.report_entry.problem_name);">
                        <td>
                            {{ line.report_entry.get_event().name }}
                        </td>
                        <td>
                            {{ line.report_entry.get_event().time.toISOString().replace('T', ' ').replace('Z', '')  }}
                        </td>
                        <td>
                            {{ line.report_entry.get_event().magnitude | eround:0.1 }}
                        </td>
                        <td>
                            {{ line.report_entry.get_event().depth* 0.001 | eround:(line.report_entry.get_event().depth*0.001*0.1) }}
                        </td>
                        <td>
                            {{ line.report_entry.get_solution_type() }}
                        </td>
                        <td>
                            {{ line.report_entry.problem_name }}
                        </td>
                        <td>
                            <span ng-repeat="tag in line.report_entry.run_info.tags">{{ tag }}</span>
                        </td>
                    </tr>
                </tbody>
            </table>


      </div>
      <div class="modal-footer d-flex">

        <div class="mr-auto">
            <div ng-show="rl.get_selected().length == 0">
                <p>
                    <strong>Select one or more Grond runs.</strong>
                </p>
            </div>

            <div ng-show="rl.get_selected().length != 0">
                <p>
                <strong>{{ rl.get_selected().length }} run{{ rl.get_selected().length == 1 ? '' : 's' }} selected.</strong>
                </p>
            </div>
        </div>

        <form class="form-inline">

            <button type="button" class="btn btn-secondary mr-2" ng-click="rl.reload()">
                <span style="width: 1em; height: 1em; margin: 0.2em;" data-feather="refresh-cw"></span> Reload
            </button>
            <button type="button" class="btn btn-secondary mr-2" ng-click="rl.selected_all()">
               Select all
            </button>
            <button type="button" class="btn btn-secondary mr-2" ng-click="rl.selected_none()">
               Deselect all
            </button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        </form>
      </div>
    </div>
  </div>
</div>
