{% trans_default_domain 'easy_admin' %}

{% extends '@EasyAdmin/default/layout.html.twig' %}

{% block content_title %}
    {{ 'tools.crop.title' |trans }}
{% endblock %}

{% block main %}
    <link rel="stylesheet" href="{{ asset('build/dashboard.css') }}">
    <div>
        <form>
            <div class="form-row col-md-12">
                <label for="selectConfig">{{ 'tools.crop.select.label' | trans }}</label>
                <select class="form-control" id="selectConfig">
                    <option value="card" id="card" data-width="470" data-height="235" data-scale="1" selected>
                        {{ 'tools.crop.select.card' | trans }}
                    </option>
                    <option value="project" id="project" data-width="500" data-height="500" data-scale="1">
                        {{ 'tools.crop.select.project' | trans }}
                    </option>
                    <option value="video" id="video" data-width="900" data-height="480" data-scale="1">
                        {{ 'tools.crop.select.video' | trans }}
                    </option>
                    <option value="header" id="header" data-width="1500" data-height="700" data-scale="1">
                        {{ 'tools.crop.select.header' | trans }}
                    </option>
                    <option value="team" id="team" data-width="250" data-height="250" data-scale="1">
                        {{ 'tools.crop.select.team' | trans }}
                    </option>
                </select>
            </div>

            <div class="form-row col-md-12">
                <div class="custom-file">
                    <input type="file" name="file" class="custom-file-input" accept="image/*" />
                    <label class="custom-file-label" for="file" id="file-label">{{ 'tools.crop.file.label' | trans }}</label>
                </div>
            </div>

            <div class="form-row col-md-12">
                <div class="form-group col-md-4">
                    <label for="width">{{ 'tools.crop.range.width' | trans }}</label>
                    <input type="number" class="form-control" id="width" name="width" min="50" max="1500" step="1" value="250" >
                </div>

                <div class="form-group col-md-4">
                    <label for="height">{{ 'tools.crop.range.height' | trans }}</label>
                    <input type="number" class="form-control" id="height" name="height" min="50" max="700" step="1" value="250" >
                </div>

                <div class="form-group col-md-4">
                    <label for="minScale">{{ 'tools.crop.range.minScale' | trans }}</label>
                    <input type="number" class="form-control" id="minScale" name="minScale" min="0.1" max="2" step="0.1" value="1" >
                </div>
            </div>

            <div class="form-check col-md-12">
                <input class="form-check-input" name="ruleOfThirds" id="ruleOfThirds" type="checkbox" value="1" checked >
                <label class="form-check-label" for="ruleOfThirds">
                    {{ 'tools.crop.checkBox' | trans }}
                </label>
            </div>

            <div class="form-row col-md-12">
                <h4>{{ 'tools.crop.choice.label' |trans }}: </h4>
                <div class="form-check form-check-inline">
                    <input name="faceDetection" type="radio" value="off" checked id="radio-off" class="form-check-input">
                    <label class="form-check-label" for="radio-off">{{ 'tools.crop.choice.off' | trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input name="faceDetection" type="radio" value="jquery" id="radio-jquery" class="form-check-input">
                    <label class="form-check-label" for="radio-jquery">{{ 'tools.crop.choice.jquery' | trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input name="faceDetection" type="radio" value="tracking" id="radio-tracking" class="form-check-input">
                    <label class="form-check-label" for="radio-tracking">{{ 'tools.crop.choice.tracking' | trans }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <div class="opencv-loading">
                        <input name="faceDetection" type="radio" value="opencv" id="radio-opencv" class="form-check-input">
                        <label class="form-check-label" for="radio-opencv">{{ 'tools.crop.choice.opencv' | trans }}</label>
                    </div>
                </div>
            </div>
        </form>

    </div>

    <div class="row">
        <div class="col-md-12 print">
            <div class="output col-md-4">
                <h2>{{ 'tools.crop.header.image' | trans }}</h2>
                <canvas id="c"></canvas>
            </div>


            <div class="col-md-4">
                <h2>{{ 'tools.crop.header.result' | trans }}</h2>
                <div id="result"></div>

                <div class="btn-div">
                    <a href="#" id="export-btn" class="btn btn-primary center-block disabled">{{ 'tools.crop.export-btn' | trans }}</a>
                </div>
            </div>

            <div class="col-md-4">
                <h2>{{ 'tools.crop.header.debug' | trans }}</h2>
                <div id="debug"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

        </div>
    </div>

    <script src="{{ asset('build/dashboard.js') }}"></script>
    <script src="{{ asset('crop-lib/underscore.js') }}"></script>
    <script src="{{ asset('crop-lib/smartcrop.js') }}"></script>
    <script src="{{ asset('crop-lib/smartcrop-debug.js') }}"></script>
    <script src="{{ asset('crop-lib/tracking-min.js') }}"></script>
    <script src="{{ asset('crop-lib/tracking-face-min.js') }}"></script>
    <script src="{{ asset('crop-lib/jquery.facedetection.min.js') }}"></script>
    <script src="{{ asset('crop-lib/testbed.js') }}"></script>
    <script async src="https://unpkg.com/opencv.js@1.2.1/opencv.js" integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk" crossorigin="anonymous" onload="openCvReady()"></script>
{% endblock %}