{% extends 'bridge/base.html' %}
{% comment "License" %}
% Copyright (c) 2019 ISP RAS (http://www.ispras.ru)
% Ivannikov Institute for System Programming of the Russian Academy of Sciences
%
% Licensed under the Apache License, Version 2.0 (the "License");
% you may not use this file except in compliance with the License.
% You may obtain a copy of the License at
%
%    http://www.apache.org/licenses/LICENSE-2.0
%
% Unless required by applicable law or agreed to in writing, software
% distributed under the License is distributed on an "AS IS" BASIS,
% WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
% See the License for the specific language governing permissions and
% limitations under the License.
{% endcomment %}

{% load i18n %}
{% load static %}
{% load compress %}

{% block title %}{{ data.title }}{% endblock %}

{% block head_block %}
    {% compress css file mark %}
        <link href="{% static 'marks/css/mark.css' %}" rel="stylesheet">
        <link href="{% static 'marks/css/tagsmap.css' %}" rel="stylesheet">
    {% endcompress %}
    {% compress js file markform %}
        <script type="text/javascript" src="{% static 'marks/js/tags.js' %}"></script>
        <script type="text/javascript" src="{% static 'marks/js/markForm.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block body_block %}
    <div class="ui grid">
        <div class="eight wide column">
            {# Versions selector #}
            {% if versions %}
                <label for="mark_version_selector" class="purple-title">{% trans 'You can choose one of the previous versions' %}</label>
                <select id="mark_version_selector" class="ui dropdown fluid">
                    {% for mv in versions %}
                        <option value="{{ mv.version }}"{% if data.version == mv.version %} selected{% endif %}>{{ mv.title }}</option>
                    {% endfor %}
                </select>
            {% endif %}

            {% if data.type == 'unknown' %}
                {# Unknown pattern, function and problem link #}
                <div class="ui purple segment">
                    <div class="ui checkbox">
                        <input type="checkbox" id="is_regexp"{% if data.is_regexp %} checked{% endif %}>
                        <label for="is_regexp">{% trans 'Regular expression' %}</label>
                    </div>
                    <br><br>
                    <label for="unknown_function" class="purple-title">{% trans 'Pattern' %}</label>
                    <div class="ui form">
                        <textarea id="unknown_function" rows="5" style="resize:none" placeholder="{% trans 'Pattern' %}">{{ data.function }}</textarea>
                    </div>
                    <br>
                    <label for="unknown_problem_pattern" class="purple-title">{% trans 'Problem' %}</label>
                    <div class="ui input fluid">
                        <input id="unknown_problem_pattern" type="text" value="{{ data.problem_pattern }}" maxlength="20">
                    </div>
                    <br>
                    <label for="unknown_link" class="purple-title">{% trans 'Link to detailed description' %}</label>
                    <div class="ui input fluid">
                        <input id="unknown_link" type="url" value="{{ data.link }}">
                    </div>
                    {% if data.action == 'create' %}
                        <div class="ui divider"></div>
                        <button id="test_unknown_mark" class="ui mini teal button" data-url="{% url 'marks:api-check-problem' object.id %}" style="float: right">{% trans 'Test pattern' %}</button>
                        <br>
                        <div id="test_mark_result_div" style="display:none">
                            <h5>{% trans 'Problem' %}: <span id="test_mark_problem" style="color: #a2443f"></span></h5>
                            <h5>{% trans 'Matched text' %}:</h5>
                            <div id="test_mark_result" class="filecontent code-text"></div>
                        </div>
                        <div id="test_mark_nomatch_div" style="display: none">
                            <h4 class="ui red header">{% trans 'No matches found' %}</h4>
                            <div id="regexp_err_result" class="filecontent error-text" style="display: none"></div>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                <div class="ui pink segment">
                    <div class="ui grid">

                        {# Verdict #}
                        <div id="verdict_column" class="eight wide column">
                            <h4 class="ui pink header">{% trans 'Verdict' %}</h4>
                            <div style="margin-left: 25px">
                                {% for v in data.verdicts %}
                                    <div class="ui radio checkbox">
                                        <input id="selected_verdict__{{ v.id }}" type="radio" name="selected_verdict" value="{{ v.id }}"{% if v.id == data.verdict %} checked{% endif %}>
                                        <label for="selected_verdict__{{ v.id }}"{% if v.color %} style="color: {{ v.color }};"{% endif %}>{{ v.text }}</label>
                                    </div>
                                    <br>
                                {% endfor %}
                            </div>
                        </div>


                        {% if data.type == 'unsafe' %}
                            {# Status #}
                            <div id="status_column" class="eight wide column"{% if not data.status %} style="display: none"{% endif %}>
                                <h4 class="ui pink header">{% trans 'Status' %}</h4>
                                <div style="margin-left: 25px">
                                    {% for s in data.statuses %}
                                        <div class="ui radio checkbox">
                                            <input id="selected_status__{{ s.id }}" type="radio" name="selected_status" value="{{ s.id }}" {% if data.status == s.id %} checked{% endif %}>
                                            <label for="selected_status__{{ s.id }}"{% if s.color %} style="color: {{ s.color }};"{% endif %}>{{ s.text }}</label>
                                        </div>
                                        <br>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# Tags #}
                <div class="ui pink segment">
                    <h4 class="header ui pink">{% trans 'Tags' %}</h4>
                    <div id="mark_tags_container">
                        {% include 'marks/MarkTagsForm.html' with tags=data.tags %}
                    </div>
                </div>
            {% endif %}

            {# Description #}
            <div class="ui blue segment">
                <h4 class="header ui blue">{% trans 'Description' %}</h4>
                <div class="ui form">
                    <label for="mark_description"></label>
                    <textarea id="mark_description" rows="5" style="resize:none">{{ data.description|safe }}</textarea>
                </div>
            </div>
            <br>
            <div class="ui grid">
                {% if access.can_freeze %}
                    <div class="seven wide column">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="is_modifiable" {% if data.is_modifiable %}checked{% endif %}>
                            <label for="is_modifiable">{% trans 'Editable' %}</label>
                        </div>
                    </div>
                {% endif %}
            </div>
            <br>
            <label for="mark_comment"></label>
            <div class="ui action input fluid">
                <input id="mark_comment" type="text" placeholder="{% trans 'Comment' %}">
                <a href="{{ cancel_url }}" class="ui blue button" style="float:right">{% trans 'Cancel' %}</a>
                <button id="save_mark_btn" class="ui green button" data-url="{{ save_url }}" data-method="{{ save_method }}" data-action="{{ data.action }}" data-type="{{ data.type }}">{% trans 'Save' %}</button>
            </div>
        </div>
        <div class="eight wide column">
            {% if data.type == 'unsafe' %}
                {# Association threshold #}
                <div class="ui orange segment">
                    <h4 class="ui orange header">{% trans 'Association threshold' %}: <span id="threshold_range_preview"></span>%</h4>
                    <div class="ui orange range" data-input="threshold" data-preview="threshold_range_preview" data-min="0" data-max="100" data-step="5"></div>
                    <input id="threshold" type="hidden" value="{% if data.threshold is not None %}{{ data.threshold }}{% else %}{{ user.default_threshold_percentage }}{% endif %}">
                </div>

                {% if data.action == 'edit' %}
                    {# Comparison function and error trace #}
                    <div class="ui teal segment">
                        <h4 class="header ui teal">{% trans 'Error traces comparison function' %}</h4>
                        <div class="ui teal raised segment">
                            <span class="ui teal ribbon label">{{ data.function }}</span>
                            <p class="func-description">{{ data.compare_func.desc }}</p>
                            <h5>{{ data.convert_func.name }}</h5>
                            <p class="func-description">{{ data.convert_func.desc }}</p>
                        </div>

                        {% if not data.compare_func.is_regexp %}
                            <h4 class="header ui blue">{% trans 'Converted error trace' %}</h4>
                            <div class="ui form">
                                <label for="mark_error_trace"></label>
                                <textarea id="mark_error_trace" rows="15" style="resize:none">{{ data.error_trace }}</textarea>
                            </div>
                        {% endif %}
                    </div>
                {% else %}
                    {# Comparison function #}
                    <div class="ui teal segment">
                        <h4 class="header ui teal">{% trans 'Error traces comparison function' %}</h4>
                        <label for="compare_name" class="purple-title"></label>
                        <select id="compare_name" class="ui dropdown fluid top attached">
                            {% for f in data.functions %}
                                <option value="{{ f.name }}"{% if f.name == data.function %} selected{% endif %}>{{ f.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="ui teal segment">
                            <p id="compare_desc" class="func-description">{{ data.compare_func.desc }}</p>
                            <h5 id="convert_name">{{ data.convert_func.name }}</h5>
                            <p id="convert_desc" class="func-description">{{ data.convert_func.desc }}</p>
                        </div>
                        <div id="unsafe_functions" hidden>
                            {% for f in data.functions %}
                                <div class="compare-func" data-name="{{ f.name }}">
                                    <div class="compare-desc">{{ f.desc }}</div>
                                    <div class="convert-desc" data-name="{{ f.convert.name }}">{{ f.convert.desc }}</div>
                                    <input class="compare-regexp" type="hidden" value="{% if f.is_regexp %}1{% else %}0{% endif %}">
                                </div>
                            {% endfor %}
                        </div>
                        <br>
                    </div>
                {% endif %}

                <div id="unsafe_regexp_segment" class="ui blue segment"{% if not data.compare_func.is_regexp %} style="display: none;"{% endif %}>
                    <h4 class="header ui blue">{% trans 'Regular expression' %}</h4>
                    <div class="ui form">
                        <label for="mark_regexp"></label>
                        <textarea id="mark_regexp" rows="5" style="resize:none">{{ data.unsafe_regexp }}</textarea>
                        <br>
                        <span class="comment-text">{% trans 'Enclose regular expression in double quotes if it should be treated as a string' %}</span>
                        <br>
                        <span class="comment-text">{% trans 'Probably you should deselect attribute "Program fragment" in the list below' %}</span>
                    </div>
                </div>

            {% elif data.type == 'unknown' and problem_description %}
                <div class="ui red segment filecontent" style="min-height:50vh;max-height:70vh;">{{ problem_description }}</div>
            {% endif %}

            {# Attributes #}
            {% if attrs|length %}
                <div class="ui styled accordion fluid">
                    <div class="title">
                        <i class="grid layout icon"></i>{% trans 'Attributes' %}
                    </div>
                    <div class="content">
                        <div style="overflow-x:auto;">
                            <table class="ui celled compact purple table">
                                <tbody>
                                    {% for attr in attrs %}
                                        <tr>
                                            <th class="collapsing">{{ attr.name }}</th>
                                            <td class="collapsing">
                                                <div class="ui small checkbox">
                                                    <label for="attr_checkbox__{{ attr.id }}">{{ attr.value }}</label>
                                                    <input id="attr_checkbox__{{ attr.id }}" type="checkbox" data-name="{{ attr.name }}" data-value="{{ attr.value }}"{% if attr.is_compare or attr.associate %} checked{% endif %}>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% if data.action == 'create' %}
        <input id="report_id" type="hidden" value="{{ object.id }}">
    {% endif %}
{% endblock %}