{% 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-5">
        {% if file_url %}
            <div class="row mb-3 text-center imagediv">
                <img src="{{ file_url }}" style="height: 400px; width: 500px;">
            </div>
        {% else %}
            <div class="row p-4 mb-3 text-center imagediv" style="height: 400px; width: 500;">
                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-7 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 (millimeter):<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>

                best output:<br>
                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 in Seconds:<br>
            </div>
            <div class="col">
                asdsadsa
            </div>
        </div>
    </div>
</div>
{% endblock %}