{% extends "base.html" %}
{% block body %}
<body id="random-img-page">
{% endblock %}
{% block content %}
<div class="action">
<button onClick="refresh(this)" type="button" value="Refresh" title="new iteration">↻</button>
<span class="info" style="display: none;">
<span class="operations">↝ new display of random images from dataset;</span>
</span>
<button onclick="addRandomImage()" title="add one">+</button>
<span class="info" style="display: none;">
<span class="operations">↝ add a random image from dataset;</span>
</span>
<button onclick="removeRandomImage()" title="remove one">-</button>
<span class="info" style="display: none;">
<span class="operations">↝ remove a random image from page;</span>
</span>
<button id="notes-operations" onclick="hideShowInfo()">?</button>
<a href="{{ url_for('main.index') }}" class="arrow-back h1 text-left contrast" style="color: var(--color-lightyellow) !important;" title="back to index"> ⇽ </a>
</div>
<div class="row">
<div class="col m-5">
<p class="h1 text-center contrast">a Scattering of Images</p>
</div>
</div>
<div id="image_container" class="container-fluid compare">
{% for image in images %}
<img class="img-fluid" src="data:image/jpg;base64,{{ image['image'] }}" alt="Drawing accompanying patent for {{ image['id'] }}" />
{% endfor %}
</div>
<script type="text/javascript">
var images = {{ additional_images|tojson }};
x = 0;
function addRandomImage(){
var record_array = images[x];
document.querySelector('#image_container').innerHTML += "<img class='img-fluid' src='data:image/jpg;base64," + record_array['image'] + "' alt='Drawing accompanying patent for " + record_array['id'] + "' />";
x++;
window.scrollTo(0, document.body.scrollHeight);
}
</script>
{% endblock %}