<!DOCTYPE html>
<html>

	<head>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">

	  <title>Galaxies - AIL</title>
		<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">

	  <!-- Core CSS -->
	  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
	  <link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
	  <link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
	 	<link href="{{ url_for('static', filename='css/dataTables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
	  <!-- JS -->
	  <script type="text/javascript" src="{{ url_for('static', filename='js/dygraph-combined.js') }}"></script>
	  <script language="javascript" src="{{ url_for('static', filename='js/jquery.js') }}"></script>
		<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
	  <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
	  <script src="{{ url_for('static', filename='js/dataTables.bootstrap.js') }}"></script>

		<style>
			.tooltip-inner {
				text-align: left;
				height: 200%;
				width: 200%;
				max-width: 500px;
				max-height: 500px;
				font-size: 13px;
			}
			xmp {
				white-space:pre-wrap;
				word-wrap:break-word;
			}
			.test thead{
				background: #d91f2d;
				color: #fff;
			}
		</style>

	</head>
	<body>

            {% include 'navbar.html' %}

    <div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
				<h1 class="page-header">Galaxies</h1>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->

			<table class="test table table-striped table-bordered table-hover table-responsive " id="myTable_">
				<thead>
					<tr>
						<th>Name</th>
						<th style="max-width: 800px;">Description</th>
						<th>Namespace</th>
						<th>Version</th>
						<th>Enabled</th>
						<th>Active Tags</th>
					</tr>
				</thead>
				<tbody>

					{% for type in all_type %}
						<tr>
								<td>
									{{ name[loop.index0] }}
									<div>
										<i class="fa fa-{{ icon[loop.index0] }}"></i>
									</div>
								</td>
								<td>{{ description[loop.index0] }}</td>
								<td>{{ namespace[loop.index0] }}</td>
								<td>{{ version[loop.index0] }}</td>
								<td style="text-align: center;">
									{% if enabled[loop.index0] %}
										<div style="display:none;">Enabled</div>
										<div style="color:Green; display:inline-block"><i class="fa fa-check-circle fa-2x"></i></div>
									{% endif %}
									{% if not enabled[loop.index0] %}
										<div style="display:none;">Disabled</div>
										<div style="color:Red; display:inline-block"><i class="fa fa-times-circle fa-2x"></i></div>
									{% endif %}
								</td>
								<td style="text-align: center;">
									<div style="display:none;">{{ n_tags[loop.index0] }}</div>
									<a class="btn btn-primary" href="{{ url_for('Tags.edit_galaxy') }}?galaxy={{ type }}">Active Tags <span class="badge">{{ n_tags[loop.index0] }}</span></a>
								</td>
						</tr>
					{%  endfor %}

				</tbody>
			</table>

      </div>
            <!-- /#page-wrapper -->


</body>

<script>
$(document).ready(function(){

		//search_table = $('#myTable_').DataTable({ "order": [[ 2, "desc" ]] });

		$('#myTable_').DataTable(
			{
				"aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]],
				"iDisplayLength": 15,
			}
		);

});
</script>

</html>
