{% extends 'base.html' %}

{% set active_page = "job_status" %}

{% block main %}
    <h2>Job ID: {{ ID }}</h2>
    <b>Submitted On: </b>{{subDate}}<br>
    <b>Target Name: </b>{{pn}}<br>
    <b>Ligand Name: </b>{{ln}}<br>
    <b>Description: </b>{{desc}}<br>
    <b>Status: </b>{{status}}

{% if status == 'Completed' %}
    
    <style>
        iframe {
        width: 100%;
        height: 550px;
        border: none;
        overflow: hidden;
      }
      model-viewer {
        width: 100%;
        height: 400px;
    }
    </style>

    <p>A detailed zip file containing the report PDF, along with all supporting files (configuration, pictures, protein-ligands e.t.c) has been sent to your email.</p>

{% endif %}

    {% if model == 'exists' %}
    <h3>AR Model</h3>

    <section>
        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
        <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
        <model-viewer src={{AndroidModel}} ios-src={{iOSModel}}  ar="" auto-rotate="" camera-controls="" shadow-intensity="1" alt=”3D Model of your Docking Job”></model-viewer>
    </section>
    {% endif %}

    {% if report == 'exists' %}
    <h3>PDF Report</h3>
    <section>
        <iframe src={{PDFReport}} id="report"></iframe>
    </section>
    {% endif %}

    


    <section>
        <style>
            #growth{
                height: 40vh;
            }
        </style>
        <div id="growth"></div>
        <script src="{{url_for('static',filename='js/growth.js')}}"></script>
    </section>
{% endblock %}