<!DOCTYPE html>
<html>
<head>
  <title>Show Domain - AIL</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">
	<!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/daterangepicker.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
	<!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script>

</head>
<body>

	{% include 'nav_bar.html' %}

	<div class="container-fluid">
		<div class="row">

			{% include 'crawler/menu_sidebar.html' %}

			<div class="col-12 col-lg-10" id="core_content">



				<div class="row">

					<div class="col-12 col-xl-6">
						<div class="card mt-2">
							<div class="card-header bg-dark">
								<span class="badge badge-pill badge-light flex-row-reverse float-right">
									{% if status %}
										<div style="color:Green;">
											<i class="fas fa-check-circle fa-2x"></i>
											UP
										</div>
									{% else %}
										<div style="color:Red;">
											<i class="fas fa-times-circle fa-2x"></i>
											DOWN
										</div>
									{% endif %}
								</span>
								<h3 class="card-title text-white">{{ domain }} :</h3>
							</div>
							<div class="card-body">
								<table class="table table-responsive table-condensed">
									<thead>
										<tr>
											<th>First Seen</th>
											<th>Last Check</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td class="panelText">{{ first_seen }}</td>
											<td class="panelText">{{ last_check }}</td>
										</tr>
									</tbody>
								</table>

								Origin Paste:
								{% if origin_paste_name=='manual' or origin_paste_name=='auto' %}
									<span class="badge badge-dark">{{ origin_paste_name }}</span>
								{%else%}
								<a class="badge badge-dark" target="_blank" href="{{ url_for('showsavedpastes.showsavedpaste', paste=origin_paste) }}" />{{ origin_paste_name }}</a>
								{%endif%}
								<div>
									{% for tag in origin_paste_tags %}
									<a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag[1] }}">
										<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag[0] }}</span>
									</a>
									{%  endfor %}
									<br>
								</div>

							</div>
						</div>

						<div>
							{% for tag in domain_tags %}
							<a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag }}">
								<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag }} <i>{{ domain_tags[tag] }}</i></span>
							</a>
							{%  endfor %}
							<br>
							<br>
						</div>

						{% if l_pastes %}
							<table class="table table-striped table-bordered table-hover" id="myTable_1">
						    <thead class="thead-dark">
						      <tr>
						        <th>Crawled Pastes</th>
						      </tr>
						    </thead>
						    <tbody>
					        {% for path in l_pastes %}
					          <tr>
				              <td>
												<a target="_blank" href="{{ url_for('showsavedpastes.showsavedpaste') }}?paste={{path}}" class="text-secondary">
													<div style="line-height:0.9;">{{ dict_links[path] }}</div>
												</a>
				                <div>
				                  {% for tag in paste_tags[loop.index0] %}
					                  <a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag[1] }}">
					                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag[0] }}</span>
					                  </a>
				                  {%  endfor %}
				                </div>
			              	</td>
						        </tr>
						      {%  endfor %}
						    </tbody>
						  </table>
						{%endif%}

					</div>

					<div class="col-12 col-xl-6">
						<div class="card my-2" style="background-color:#ecf0f1;">
							<div class="card-body py-2">
								<div class="row">
									<div class="col-md-8">
										<input class="custom-range mt-2" id="blocks" type="range" min="1" max="50" value="13">
									</div>
									<div class="col-md-4">
										<button class="btn btn-primary" onclick="blocks.value=50;pixelate();">
												<i class="fas fa-search-plu"></i>
												<span class="label-icon">Full resolution</span>
										</button>
									</div>
								</div>
							</div>
						</div>
						<canvas id="canvas" style="width:100%;"></canvas>
						<div class="text-center">
							<small>
								<a target="_blank" href="{{ url_for('showsavedpastes.showsavedpaste') }}?paste={{screenshot['item']}}" class="text-info">
									<div style="line-height:0.9;">{{dict_links[screenshot['item']]}}</div>
								</a>
							<small>
						</div>
					</div>

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

</body>


<script>
	var table;
  $(document).ready(function(){
	table = $('#myTable_1').DataTable(
	{
		//"aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]],
		//"iDisplayLength": 5,
		//"order": [[ 0, "desc" ]]
	});
});

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}
</script>

<script>
var ctx = canvas.getContext('2d'), img = new Image();

/// turn off image smoothing
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

img.onload = pixelate;
img.addEventListener("error", img_error);
var draw_img = false;

img.src = "{{ url_for('showsavedpastes.screenshot', filename=screenshot['screenshot']) }}";

function pixelate() {
  /// use slider value
  if( blocks.value == 50 ){
    size = 1;
  } else {
    var size = (blocks.value) * 0.01;
  }

  canvas.width = img.width;
  canvas.height = img.height;

  /// cache scaled width and height
  w = canvas.width * size;
  h = canvas.height * size;

	/// draw original image to the scaled size
  ctx.drawImage(img, 0, 0, w, h);

  /// pixelated
  ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);

}

blocks.addEventListener('change', pixelate, false);

function img_error() {
	img.onerror=null;
	img.src="{{ url_for('static', filename='image/AIL.png') }}";
	blocks.value = 50;
	pixelate;
}
</script>

</html>
