{% extends 'engine/base.html' %}
{% load static %}

{% block head_css %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'engine/stylesheet.css' %}">
{% endblock %}


{% block head_js_3rdparty %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'engine/js/3rdparty/interact.js' %}"></script>
    <script type="text/javascript" src="{% static 'engine/js/3rdparty/object_hash.js' %}"></script>
    <script type="text/javascript" src="{% static 'engine/js/3rdparty/defiant.js' %}"></script>
    <script type="text/javascript" src="{% static 'engine/js/3rdparty/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'engine/js/3rdparty/js.cookie.js' %}"></script>
    {% for js_file in js_3rdparty %}
        <script type="text/javascript" src="{% static js_file %}"></script>
    {% endfor %}
{% endblock %}


{% block head_js_cvat %}
    {{ block.super }}
        <script type="text/javascript" src="{% static 'engine/js/logger.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/server.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/listener.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/labelsInfo.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/annotationParser.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/attributeAnnotationMode.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/trackFilter.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/bootstrap.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/trackModel.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/trackController.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/trackView.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/collectionModel.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/collectionController.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/collectionView.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/player.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/merger.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/drawer.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/shapeBuffer.js' %}"></script>

        <script type="text/javascript" src="{% static 'engine/js/api.js' %}"></script>
        <script type="text/javascript" src="{% static 'engine/js/annotationUI.js' %}"></script>
{% endblock %}


{% block content %}
<div id="taskAnnotationCenterPanel">
    <div id="player">
        <div id="playerFrame">
            <svg id="frameLoadingAnim" style="width: 100%; height: 100%;" class="hidden">
                <circle r="30" cx="50%" cy="50%" id="frameLoadingAnimation"/>
            </svg>
            <svg id="frameContent">

            </svg>
        </div>
        <div id="playerPanel">
            <svg id="firstButton" class="playerButton">
                <polygon points="100,0 100,80 75,60 75,80 50,60, 50,80 0,40 50,0 50,20 75,0 75,20" transform="scale(0.4)"/>
            </svg>
            <svg id="multiplePrevButton" class="playerButton">
                <polygon points="100,0 100,80 75,60 75,80 25,40 75,0 75,20" transform="scale(0.4)"/>
            </svg>

            <svg id="prevButton" class="playerButton">
                <polygon points="90,20 90,60 50,60 50,80 10,40 50,0 50,20" transform="scale(0.4)"/>
            </svg>

            <svg id="playButton" class="playerButton">
                <polygon points="35,0 35,80 85,40" transform="scale(0.4)"/>
            </svg>

            <svg id="pauseButton" class="playerButton hidden">
                <rect x="25" y="0" width="20" height="80" transform="scale(0.4)" />
                <rect x="65" y="0" width="20" height="80" transform="scale(0.4)" />
            </svg>

            <svg id="nextButton" class="playerButton">
                <polygon points="10,20 10,60 50,60 50,80 90,40 50,0 50,20" transform="scale(0.4)"/>
            </svg>

            <svg id="multipleNextButton" class="playerButton">
                <polygon points="1,1 1,80 25,60 25,80 75,40 25,0 25,20" transform="scale(0.4)"/>
            </svg>

            <svg id="lastButton" class="playerButton">
                <polygon points="1,1 1,80 25,60 25,80 50,60 50,80 100,40 50,0 50,20 25,0 25,20" transform="scale(0.4)"/>
            </svg>
            <input type = "range" id = "playerProgress"/>
        </div>  <!-- END of PLAYER PANEL -->
        <div style="margin-top: 20px">
            <button id="menuButton" class="regular h1"> Open Menu </button>
            <label class="regular h1" style="margin-left: 50px"> Filter: </label>
            <input type="text" id="filterInputString" class="regular h2"/>
            <button id="resetFilterButton" class="regular h1"> Reset </button>
            <div style="float: right;">
                <label class="regular h1"> Frame </label>
                <input class="regular h2" style="width: 3.5em;" type="number" id="frameNumber">
            </div>
        </div>
    </div>  <!-- END of PLAYER -->

    <div id="helpWindow" class="modal hidden">
        <div id="helpWindowContent" class="modal-content">
            <div style="width: 100%; height: 90%; overflow-y: auto;">
                <div>
                    <label class="h1 semiBold"> Shortkeys: </label> <br>
                    <table class="regular" id="shortkeyHelpTable"> </table>
                    <label class="h1 semiBold"> <br> Hints: <br> </label>
                    <label class="regular"> - Hold SHIFT key when move the frame and boxes will be fixed. </label> <br>
                    <label class="regular"> - Hold CTRL key when track highlighted and fix it. </label> <br>
                    <label class="regular"> - Hold CTRL key when paste shape from buffer for multiple pasting. </label> <br>
                    <label class="h1 semiBold"> <br> Filter Help: <br> </label>
                    <label class="regular">
                        Filter Format: //label[property operator "value"] (USE LOWER CASE ONLY) <br>
                        Label is a type of bounding box (car, person, etc). Use "*" for any label. <br>
                        Property is a limited set of values: id, type, lock, occluded, attr. <br>
                        Operator is "=", "!=" for any properties and ">", "<", ">=", "<=" for numeric properties. <br>
                        For complex conditions please use 'or', 'and' (for properties) "|" (for labels) operators. <br> <br>
                        Examples: <br>
                        //*[type="annotation"] - only annotation tracks <br>
                        //car[occluded="true"] - only occluded cars <br>
                        //*[lock!="true"] - only unlocked tracks <br>
                        //person[attr/age>="25" and attr/age<="35"] - persons with age (number) beetween [25,40] years <br>
                        //car[attr/parked="true"] - only parked cars <br>
                        //person[attr/race="asian"] | //car[attr/model="bmw"] - asians and BMW cars <br>
                        //face[attr/glass="sunglass" or attr/glass="no"] - faces with sunglass or without glass <br>
                        //*[attr/*="__undefined__"] - any tracks with any unlabeled attributes <br>
                     </label>
                </div>
            </div>
            <center> <button id="closeHelpButton" class="regular h1" style="margin-top: 15px;"> Close </button> </center>


        </div>
    </div>

     <div id="settingsWindow" class="modal hidden">
        <div id="settingsWindowContent" class="modal-content">
            <div id="playerSettings" style="width: 48%; height: 90%; float: left;">
                <center> <label class="semiBold h1"> Player Settings </label> </center>
                <table style="border-collapse: separate; border-spacing: 10px; overflow-y: auto;">
                    <tr>
                        <td> <label class="regular h2"> Player Step </label> </td>
                        <td> <input type = "number" min="1" max="100" value="10" id="playerStep" class="regular h2"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Player Speed </label> </td>
                        <td>
                            <select id="speedSelect" class="regular h3">
                                <option value="1"> 1 FPS </option>
                                <option value="2"> 5 FPS </option>
                                <option value="3"> 12 FPS </option>
                                <option value="4" selected="selected"> 25 FPS </option>
                                <option value="5"> 50 FPS </option>
                                <option value="6"> 100 FPS </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Hide Boxes </label> </td>
                        <td> <input type = "checkbox" id="hideBoxesBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Hide Labels </label> </td>
                        <td> <input type = "checkbox"  id="hideLabelsBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Reset Zoom </label> </td>
                        <td> <input type = "checkbox"  id="resetZoomBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2" for="playerBrightnessRange"> Brightness: </label> </td>
                        <td> <input type="range" min="50" max="200" value="100" id="playerBrightnessRange"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2" for="playerContrastRange"> Contrast: </label> </td>
                        <td> <input type="range" min="50" max="200" value="100"   id="playerContrastRange"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2" for="playerSaturationRange"> Saturation: </label> </td>
                        <td> <input type="range" min="0" max="300" value="100"   id="playerSaturationRange"/> </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <center>
                                    <button id="resetPlayerFilterButton" class="regular h1"> Reset Color Settings </button>
                            </center>
                        </td>
                    </tr>
                </table>
            </div>

            <div id="otherSettigns" style="width: 48%; height: 90%; float: left;">
                <center> <label class="semiBold h1"> Other Settings </label> </center>
                <table style="border-collapse: separate; border-spacing: 10px; overflow-y: auto;">
                    <tr>
                        <td> <label class="regular h2"> Show All Interpolation Tracks </label> </td>
                        <td> <input type = "checkbox"  id="showAllInterBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Zoom boxes in Attribute Annotation Mode </label> </td>
                        <td> <input type = "checkbox"  id="zoomAAMBoxesBox" class="settingsBox"/> </td>
                    </tr>
                    <tr >
                        <td colspan="2">
                            <label class="regular h2"> Zoom Margin </label>
                            <input type="range" min="0" max="500" value="100" id="aamZoomMargin"/>
                        </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Hide Other in Attribute Annotation Mode </label> </td>
                        <td> <input type = "checkbox"  id="hideNonActiveBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Hide Filtered Tracks </label> </td>
                        <td> <input type = "checkbox"  id="hideFilteredBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td> <label class="regular h2"> Enable Auto Saving </label> </td>
                        <td> <input type = "checkbox"  id="autoSaveBox" class="settingsBox"/> </td>
                    </tr>
                    <tr>
                        <td>
                            <label class="regular h2"> Auto Saving Interval (Min) </label>
                        </td>
                        <td>
                            <input type = "number"  id="autoSaveTime" style="width: 3em" min="5" max="60" value="15" class="regular h2"/>
                        </td>
                    </tr>
                </table>
            </div>

            <center> <button id="closeSettignsButton" class="regular h1" style="margin-top: 15px;"> Close </button> </center>
        </div>
    </div>

    <div id="taskAnnotationMenu" class="hidden regular">
        <div style="float:left; width: 40%; height: 100%;" id="engineMenuButtons">
            <button id="downloadAnnotation" class="menuButton semiBold h2"> Dump Annotation </button>
            <button id="uploadAnnotation" class="menuButton semiBold h2"> Upload Annotation </button>
            <button id="removeAnnotationButton" class="menuButton semiBold h2"> Remove Annotation </button>
            <button id="settingsButton" class="menuButton semiBold h2"> Settings </button>
            <button id="helpButton" class="menuButton semiBold h2"> Help </button>
            <button id="saveButton" class="menuButton semiBold h2"> Save Work </button>
            <input type="file" id="annotationFileSelector" style="display: none"/>
        </div>
        <div style="float:left; width: 58%; height: 100%; text-align: left;" class="selectable">
            <center>
                <label id="statTaskName" class="semiBold h2"> </label>  <br>
                <label id="statTaskStatus" class="regular h2"> </label>
            </center>
            <label class="regular h2"> Start Frame: </label>
            <label id="statStartFrame" class="regular h2"> </label> <br>
            <label class="regular h2"> Stop Frame: </label>
            <label id="statStopFrame" class="regular h2"> </label>  <br>
            <center> <label class="semiBold h2"> Job Statistic </label> </center>
            <div id="statByLabels" style="text-align: center;"> </div>
        </div>
    </div>
</div>


<div id="taskAnnotationRightPanel">
    <div id="uiContent"> </div>
    <div id="trackManagement">
        <button id="createTrackButton" class="regular h2" style="width: 80%;"> Create Track </button>
        <button id="mergeTracksButton" class="regular h2" style="width: 80%; margin-top: 5px;"> Merge Tracks </button>
        <select id="labelSelect" class="regular h2"> </select>
        <select id="trackTypeSelect" class="regular h2">
            <option value="annotation" class="regular"> Annotation </option>
            <option value="interpolation" class="regular"> Interpolation </option>
        </select>
    </div>
    <div id="aamMenu" class="hidden">
        <label class="regular h1"> AAM Mode </label>
        <label id="aamCounter" class="regular h1"> </label> <br>
        <label id="aamTitle" class="regular h2"> </label>
        <div id="aamHelpContainer" class="regular">
        </div>
    </div>
</div>
{% endblock %}
