{% extends 'base.html' %}

{% block content %}
<div class="row mb-3">
    <div class="col">
        <img class="me-3" src="static/images/ISC Logo White.png" width="120" height="90">
        <span class="header align-middle">{% block title %} | PENDANT DROP TENSIOMETRY {% endblock %}</span>
    </div>
</div>
<div class="row p-4 mb-3 maindiv">
    <!-- IMAGE DISPLAY AND BUTTONS -->
    <div class="col-6">
        {% if file_url %}
            <div class="row mb-3 text-center imagediv">
                <img src="{{ file_url }}" style="height: 450px; width: 600px;">
            </div>
        {% else %}
            <div class="row p-4 mb-3 text-center imagediv" style="height: 450px; width: 600;">
                No image uploaded
            </div>
        {% endif %}
        <div class="d-flex">
            <form method="POST" enctype = "multipart/form-data">
                {{ form.hidden_tag() }}
                {% for error in form.photo.errors %}
                    <span style="color: red;">{{ error }}</span>
                {% endfor %}

                <div class="row">
                    <div class="col-auto">
                        {{ form.photo(class="form-control") }}
                    </div>
                    <div class="col-auto">
                        {{ form.submit(class="btn btn-success") }}
                    </div>
                </div>
        </div>

    </div>
    <!-- TENSIOMETRY RESULTS -->
    <div class="col px-5">
        <h4><b>Results:</b></h4>
        <div class="row">
            <div class="col-5 labels">
                <!-- Negative Cooridnate File:<br>
                Positive Cooridnate File:<br> -->
                Syringe Width (mm):<br>
                Radius of Curvature Range:<br>
                Shape Factor Range :<br>
                Initial X Coordinate Range:<br>
                Initial Angle Range:<br>
                Parameter Combinations:<br>
                Number of Process to Use:<br>
                Juza 5-Plane (1/H) Std.Dev:<br>
            </div>
            <div class="col">
                <!-- {{ results.negCoordFile }} <br>
                {{ results.posCoordFile }} <br> -->
                {{ results.syringeWidth }} <br>
                {{ results.radiusCurvatureRange }} <br>
                {{ results.shapeFactorRange }} <br>
                {{ results.initialXCoordinateRange }} <br>
                {{ results.initialAngleRange }} <br>
                {{ results.paramCombinations }} <br>
                {{ results.numProcess }} <br>
                {{ results.juza }} <br>
            </div>
        </div>
        <hr class="border-1 border-emphasis" />
        <div class="row">
            <div class="col-5 labels">
                Lowest RMSD:<br>
                Computed Surface Tension:<br>
                Best Radius of Curvature:<br>
                Best Shape Factor:<br>
                Best Initial X Coordinate:<br>
                Best Initial Angle:<br>
                Lapsed Time (secs)):<br>
            </div>
            <div class="col">
                {{ results.lowestRMSD }} <br>
                {{ results.computedSurfaceTension }} <br>
                {{ results.bestRadiusCurvature }} <br>
                {{ results.bestShapeFactor }} <br>
                {{ results.bestInitialXCoordinate }} <br>
                {{ results.bestInitialAngle }} <br>
                {{ results.lapsedTime }} <br>
            </div>
        </div>
    </div>
</div>
{% endblock %}