{% extends 'layouts/main.html' %}
{% block title %}Cross{% endblock %}
{% block content %}

<div class="page-header">
    {% from 'macros/render_form.html' import render_form %}
    <h2>Cross for id {{cross_id}}<h2>
</div>
<div>
    <h5>Experimenter</h5>
    <p>
    {{experimenter}}
    </p>
    <h5>Target Fly Genotype</h5>
    <p>
    {{chromosome}}
    </p>
    <h5>Comments</h5>
    <p>
    {{comments}}
    </p>
</div>
<script type="text/javascript" src="https://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>
<br>
{% if image != "None" %}
<input type="button" class="btn btn-outline-primary" id="crossschemabutton" value="Rotate">
<br>
<img src="{{image}}" width=100% id="crossschema" onclick="rotateImage();" alt="">
{% endif %}

<style>
#wrapper
{
    position:absolute;
    top: 100px;
    left: 100px;
    max-height: 100px;
    min-height: 100px;
    border: 2px solid red;
}
</style>

<script>
var angle = 0;
$('#crossschemabutton').on('click', function() {
    angle += 90;
    $("#crossschema").rotate(angle);
});	
</script>

{% endblock %}
