<!doctype html>
<html lang="en">
    <head>
        {% include "head.html" %}
<!--		<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>-->
<!--		The JavaScript code below should be replaced with the remote one above when the fixed-columns extension is fixed. Monitor these two PRs: https://github.com/wenzhixin/bootstrap-table/pull/4511, https://github.com/wenzhixin/bootstrap-table-fixed-columns/pull/29-->
		<link href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css" rel="stylesheet">
		<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
		<script>
		/**
		* @author zhixin wen <wenzhixin2010@gmail.com>
		* @version: v1.0.1
		*/

		(function ($) {
		'use strict';

		$.extend($.fn.bootstrapTable.defaults, {
			fixedColumns: false,
			fixedNumber: 1
		});

		$.fn.hasHorizontalScrollBar = function() {
			return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
		};

		var BootstrapTable = $.fn.bootstrapTable.Constructor,
			_initHeader = BootstrapTable.prototype.initHeader,
			_initBody = BootstrapTable.prototype.initBody,
			_resetView = BootstrapTable.prototype.resetView;

		BootstrapTable.prototype.initFixedColumns = function () {
			this.$fixedHeader = $([
				'<div class="fixed-table-header-columns">',
				'<table>',
				'<thead></thead>',
				'</table>',
				'</div>'].join(''));

			this.timeoutHeaderColumns_ = 0;
			this.$fixedHeader.find('table').attr('class', this.$el.attr('class'));
			this.$fixedHeaderColumns = this.$fixedHeader.find('thead');
			this.$tableHeader.before(this.$fixedHeader);

			this.$fixedBody = $([
				'<div class="fixed-table-body-columns">',
				'<table>',
				'<tbody></tbody>',
				'</table>',
				'</div>'].join(''));

			this.timeoutBodyColumns_ = 0;
			this.$fixedBody.find('table').attr('class', this.$el.attr('class'));
			this.$fixedBodyColumns = this.$fixedBody.find('tbody');
			this.$tableBody.before(this.$fixedBody);
		};

		BootstrapTable.prototype.initHeader = function () {
			_initHeader.apply(this, Array.prototype.slice.apply(arguments));

			if (!this.options.fixedColumns) {
				return;
			}

			this.initFixedColumns();

			var that = this, $trs = this.$header.find('tr').clone();
			$trs.each(function () {
				$(this).find('th:gt(' + that.options.fixedNumber + ')').remove();
			});
			this.$fixedHeaderColumns.html('').append($trs);
		};

		BootstrapTable.prototype.initBody = function () {
			_initBody.apply(this, Array.prototype.slice.apply(arguments));

			if (!this.options.fixedColumns) {
				return;
			}

			var that = this,
				rowspan = 0;

			this.$fixedBodyColumns.html('');
			this.$body.find('> tr[data-index]').each(function () {
				var $tr = $(this).clone(),
					$tds = $tr.find('td');

				var dataIndex = $tr.attr("data-index");
				$tr = $("<tr></tr>");
				$tr.attr("data-index", dataIndex);

				var end = that.options.fixedNumber;
				if (rowspan > 0) {
					--end;
					--rowspan;
				}
				for (var i = 0; i < end; i++) {
					$tr.append($tds.eq(i).clone());
				}
				that.$fixedBodyColumns.append($tr);

				if ($tds.eq(0).attr('rowspan')){
					rowspan = $tds.eq(0).attr('rowspan') - 1;
				}
			});
		};

		BootstrapTable.prototype.resetView = function () {
			_resetView.apply(this, Array.prototype.slice.apply(arguments));

			if (!this.options.fixedColumns) {
				return;
			}

			clearTimeout(this.timeoutHeaderColumns_);
			this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0);

			clearTimeout(this.timeoutBodyColumns_);
			this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0);
		};

		BootstrapTable.prototype.fitHeaderColumns = function () {
			var that = this,
				visibleFields = this.getVisibleFields(),
				headerWidth = 0;

			this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {
				var $this = $(this),
					index = i;

				if (i >= that.options.fixedNumber) {
					return false;
				}

				if (that.options.detailView && !that.options.cardView) {
					index = i - 1;
				}

				that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]')
					.find('.fht-cell').width($this.innerWidth());
				headerWidth += $this.outerWidth();
			});
			this.$fixedHeader.width(headerWidth + 1).show();
		};

		BootstrapTable.prototype.fitBodyColumns = function () {
			var that = this,
				top = -(parseInt(this.$el.css('margin-top')) - 2),
				height = 0;

			// the fixed height should reduce the scorll-x height
			if (this.$tableBody.hasHorizontalScrollBar()) {
				height = this.$tableBody.height() - 18;
			}

			if (!this.$body.find('> tr[data-index]').length) {
				this.$fixedBody.hide();
				return;
			}

			if (!this.options.height) {
				top = this.$fixedHeader.height();
				height = height - top;
			}

			this.$fixedBody.css({
				width: this.$fixedHeader.width(),
				height: height,
				top: top
			}).show();

			this.$body.find('> tr').each(function (i) {
				that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 1);
			});

			// events
			this.$tableBody.on('scroll', function () {
				that.$fixedBody.find('table').css('top', -$(this).scrollTop());
			});
			this.$body.find('> tr[data-index]').off('hover').hover(function () {
				var index = $(this).data('index');
				that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover');
			}, function () {
				var index = $(this).data('index');
				that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');
			});
			this.$fixedBody.find('tr[data-index]').off('hover').hover(function () {
				var index = $(this).data('index');
				that.$body.find('tr[data-index="' + index + '"]').addClass('hover');
			}, function () {
				var index = $(this).data('index');
				that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');
			});
		};

		})(jQuery);
		</script>
		<script>
		$.noConflict();
		jQuery(function ($) {
			$('[data-toggle="popover"]').popover();
			$('#summary-table').on('all.bs.table', function (e, name, args) {
				$('[data-toggle="popover"]').popover();
			});
		});
		</script>
		<link href="https://unpkg.com/bootstrap-table@1.15.4/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css" rel="stylesheet">
        <title>Looper: {{ project_name }} summary</title>
		<style>
			.table td, .table th {
				padding: 0.3rem !important;
			}
			.popover {
				max-width: none;
			}
		</style>
    </head>
    {{ navbar }}
    <body>
    	<div class="container">
  			<div class="row" style="margin-top: 20px; margin-bottom: 25px;">
				<div class="col-10">
  					<h3 style="margin-bottom: 0px;">Looper <code>{{ project_name }}</code> summary</h3>
				</div>
				<div class="col-2">
  					<a class="btn btn-outline-dark" href='{{ stats_file_path }}' role="button">Stats summary file</a>
				</div>
        	</div>
			<div class="row">
				<div class="col-12">
					<table id="summary-table" data-toggle="table" data-search="true" data-page-size="50" data-pagination="true" data-show-columns="true" data-fixed-columns="true" data-sort-stable="true">
						<thead class="thead-light">
							<tr>
								{% for column in columns %}
									<th class="text-nowrap text-center" data-sortable="true">{{ column }}</th>
								{% endfor %}
							</tr>
						</thead>
						<tbody>
							{% for table_cell_data in table_row_data %}
								<tr>
									{% for values in table_cell_data %}
										{% if values is not string %}
											<td onclick="location.href='{{ values[0] }}'">
												<a class="LN1 LN2 LN3 LN4 LN5" href="{{ values[0] }}">{{ values[1] }}</a>
											</td>
										{% else %}
											{% if values|length > 60 %}
												<td>{{ values|truncate(60,True) }} <a data-html="true" data-toggle="popover" data-placement="top" data-trigger="click" data-content="{{ values }}" href="javascript:void(0)"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i></a></td>
											{% else %}
												<td>{{ values }}</td>
											{% endif %}
										{% endif %}
									{% endfor %}
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
			<div class="row">
				<div  class="col-3">
					<div id="chartableColumns" style="margin: 20px;min-width: 350px;">
						<div class="card border-light">
							<div class="card-heading">
								<h4 class="card-header">Plot a column</h4>
							</div>
							<div class="card-body">
								<ul id="plot-cols" class="list-group">
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-9">
					<div id="charts">
					</div>
				</div>
			</div>
			{{ project_objects }}
    	</div>
    </body>
    <hr class="featurette-divider">
	<footer class="text-muted">
        {{ footer }}
        {% include "footer_index.html" %}
    </footer>
</html>
