{% extends 'base.html' %}

{% block title %} Strings Matcher {% endblock %}

{% block head %}
 {{ super() }}
{% endblock %}

{% block body %}

<h3>Strings Matcher</h3>

<!-- INPUT FORM -->
<br><h5>Upload your Excel files
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Upload excel files with only one column, even if you put multiple columns only the first one will be used"><span class="fa fa-info-circle"></span></button>
    </h5>


<form method="post" enctype="multipart/form-data">
    <br><div class="container"><div class="form-row">
        <div class="col form-group">
            <h6>Lookup list
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="List with values to be matched, in the Left-join that's the left side"><span class="fa fa-info-circle"></span></button>
            </h6>
            <div class="file-upload-wrapper">
                <input type="file" name="dtf_lookup" id="input-file-now" class="file-upload" required value={{request.form.dtf_lookup}}>
            </div>
        </div>
        
        <div class="col form-group">
            <h6>Match list
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="List with values to match with, in the Left-join that's the right side"><span class="fa fa-info-circle"></span></button>
            </h6>
            <div class="file-upload-wrapper">
                <input type="file" name="dtf_match" id="input-file-now" class="file-upload" required value={{request.form.dtf_match}}>
            </div>
        </div>

        <div class="col form-group"></div>
    </div></div>

    <script>
        $(".file-upload").file_upload();
    </script>
    

    <br><h5>Similarity threshold
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Minimum similarity score to return, it goes from 0 to 1. If 1 it works exactly like a Left-join or Vlookup"><span class="fa fa-info-circle"></span></button>    
        </h5>
        
        <div class="form-row"><div class="d-flex col-md-1">
            <input type="range" min="0" max="1" step="0.1" value="0.7" oninput="RangeValue.innerText=this.value"
                   class="custom-range form-control" name="threshold" required value={{request.form.threshold}}>
        </div><label id="RangeValue">0.7</label></div>
    

    <br><h5>Top matches
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Maximum number of matches to return. If 1 it shows only the best match, if greater than 1 it shows multiple matches"><span class="fa fa-info-circle"></span></button>    
        </h5>
        <div class="form-row"><div class="col-md-1">
            <input type="text" name="top" class="form-control" placeholder="1" value={{request.form.top}}>
        </div></div>
        
    <br><br><button type="submit" class="btn btn-primary" id="btnMatch">Match</button>
</form>

{% endblock %}