{% extends "layout.html" %}
{% block content %}

  <article class="media content-section">
    <div class="media-body">
      <form method="POST" action="upload" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">


            



            
            
              <input class="form-control form-control-sm" id="x1" name="x1" type="text" style="display: none;"> 
              <input class="form-control form-control-sm" id="y1" name="y1" type="text" style="display: none;"> 
              <input class="form-control form-control-sm" id="x2" name="x2" type="text" style="display: none;"> 
              <input class="form-control form-control-sm" id="y2" name="y2" type="text" style="display: none;"> 
              <input class="form-control form-control-sm" id="width" name="width" type="text" style="display: none;"> 
              <input class="form-control form-control-sm" id="height" name="height" type="text" style="display: none;"> 

       
            {% if hide_upload_btn %}

            <legend class="border-bottom mb-4">Image comparision
                <span class="text-right" style="float: right;margin-bottom: 10px;">
                    <a class="btn btn-outline-info" href="/">Back</a>
                </span>
            </legend>
            {% else %}

            <legend class="border-bottom mb-4">Upload Image</legend>
            <div class="form-group">                
                {{ form.picture(class="form-control-file", id="imgInp") }}
                {% if form.picture.errors %}
                    {% for error in form.picture.errors %}
                        <span class="text-danger">{{ error }}</span></br>
                    {% endfor %}
                {% endif %}
            </div>
           
            <!-- {% if form.picture %} -->
            <div class="frame container1" style="border:none;" >
                <img id="photo" src="#" onload="loadImage()" style="padding: 0.8em" class="image">
              <div class="middle">
                <div class="text">Crop Image</div>
              </div>
            </div>
            <!-- {% endif %} -->
            {% endif %}

            {% if image_file%}
            <div style="text-align: -webkit-center;" class="classCentre">
                <img src="{{ image_file }}" style="width:400px;" class="img1" alt="">
            </div>

            {% endif %}
        </fieldset>


        {% if hide_upload_btn %}
            {% if error_msg %}
            <div class="container" style="text-align: center;">
                <h5 style="color: #d20817">{{error_msg}}</h5>
            </div>
            {% else %}

              <div class="container" style="text-align: center;">
                <h4>{{max_result}}</h4>
              </div>

              <div class="container col-sm-12" style="text-align: center;">
                {% for (tyre,val) in dict_tyre.items() %}                
                    <div class="card col-sm-2" style="float:left; margin:17px; height: 230px; padding: 10px">
                      <img src="/{{ dict_tyre[tyre][1] }}" style="width: 150px;"  alt="">
                      <div class="container">
                        <h6><b>{{ tyre }}</b></h6> 
                        <p>{{ dict_tyre[tyre][0] }}% matched</p> 
                      </div>
                    </div>                
                {% endfor %}
              </div>

              
            {% endif %}

            
        {% else %}
          <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
          </div>
        {% endif %}
      </form>
    </div>
  </article>
  
{% endblock content %}