{% extends 'yolo/collectBase.html' %}
{% block body %}
<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="/detect">
                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
            </a>
        </li>
        <li>
            <a href="/detectCompress">
                <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
            </a>
        </li>
    </ul>
</div>


<div class="container">
    <form action="/detect" method="post"  enctype="multipart/form-data">
        <legend>图像检测</legend>
        <div id="upload">
            <label for="file" class="lead" >提交照片：</label>
            <input type="file" name="img" id="file" class="form-control" />
            
            <div class="radio">
                <label>
                    <input type="radio" name="detectMode" value="origin" checked="checked">
                    原图
                </label>
                <label>
                    <input type="radio" name="detectMode" value="edge">
                    边缘
                </label>
                
            </div>
            
            <button type="submit" class="btn btn-primary">提交</button>
            
        </div>
    </form>
    <div hidden id="submitted">
        <p>图像已提交，正在上传和处理，请稍后。</p>
        <a href="/detect" class="btn btn-info">重新上传</a>
    </div>

    <hr />
    <div id="resultBox">
        {% if src %}
        <p>{{result}}</p>
        <img src="{{src}}" class="img-responsive" alt="Image">
        {% endif %}
    </div>
</div>

<script>
    $(function(){
        $('form').submit(function(){
            $('#upload').hide(); //避免重复上传
            $('#submitted').show(); //提示可以重新上传
            $('#resultBox').hide(); //隐藏上次的结果
        })
        $('input:file').change(function(){
            $('#resultBox').hide();
        })
    })
</script>

{% endblock %}