{% extends "base.html" %}
{% load event_tags %}
{% load display_tags %}
{% load static from staticfiles %}
{% block add_css %}
    <link rel="stylesheet" href="{% static "chosen-bootstrap/chosen.bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "simplemde/dist/simplemde.min.css" %}">
{% endblock %}
{% block add_styles %}
    .chosen-container {
    width: 70% !important;
    }
    .editor-toolbar, .editor-statusbar, .editor-preview-side, .CodeMirror {
    width: 70% !important;
    }
{% endblock %}
{% block content %}
    <h3> Edit a Finding </h3>
    {% if temp %}

        <form id="add_finding" class="form-horizontal" action="{% url 'edit_finding' finding.id %}" method="post">
            {% csrf_token %}
            {% include "dojo/form_fields.html" with form=form %}
            {% if jform %}
                <h3> JIRA </h3>
                <hr>
                {% include "dojo/form_fields.html" with form=jform %}
            {% endif %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" value="Add Another Finding"/>
                    <input type="submit" value="Finished"/>
                </div>
            </div>
        </form>
    {% else %}
        <form id="add_finding" class="form-horizontal" action="{% url 'edit_finding' finding.id %}" method="post">
            {% csrf_token %}
            {% if request.GET.source == "test" %}
                <input type="hidden" name="source" value="test">
            {% elif request.GET.source == "product_findings" %}
                <input type="hidden" name="source" value="product_findings">
            {% elif request.GET.source == "all_product_findings" %}
                <input type="hidden" name="source" value="all_product_findings">
            {% endif %}
            {% if request.GET.page %}
              <input type="hidden" name="page" value="{{ request.GET.page|paginator_form }}">
            {% endif %}
            {% include "dojo/form_fields.html" with form=form %}
            {% if jform %}
                {% include "dojo/form_fields.html" with form=jform %}
            {% endif %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input class="btn btn-primary" name="_Finished" type="submit" value="Finished"/>
                </div>
            </div>
        </form>
    {% endif %}

{% endblock %}
{% block postscript %}
    <script type="application/javascript" src="{% static "jquery.hotkeys/jquery.hotkeys.js" %}"></script>
    <script type="application/javascript" src="{% static "chosen/chosen.jquery.min.js" %}"></script>
    <script type="application/javascript" src="{% static "simplemde/dist/simplemde.min.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/jquery.init.js" %}"></script>
    <script type="application/javascript" src="{% static "admin/js/admin/RelatedObjectLookups.js" %}"></script>

    <script type="application/javascript">
        $ = django.jQuery;
        $.hotkeys.options.filterInputAcceptingElements = false;
        $.hotkeys.options.filterTextInputs = false;

        $('#add_id_endpoints').attr('href', '/endpoints/{{ finding.test.engagement.product.id }}/add?_popup');
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
            $('#id_tags').chosen({
                'placeholder_text_multiple': 'Select or add some tags...',
                'no_results_text': "Tag not found, press TAB key to add.",
            });

            $(".search-field").find("input").on("keydown", function (evt) {
                var stroke;
                stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
                if (stroke == 9) { // 9 = tab key
                    var o = new Option($(this).val(), $(this).val(), true, true);
			        $("#id_tags").append(o);
                    $('#id_tags').trigger('chosen:updated');
                    $('#id_tags').focus();
                    return false;
                }
            });

            $(document).bind('keydown', 'ctrl+s', function (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    // internet explorer
                    event.returnValue = false;
                }
                $("form#add_finding").submit();
            });

            $("textarea").each(function (index, elem) {

                if (elem.hasAttribute("required")) {
                    elem.removeAttribute("required");
                    elem.id = "req"
                }

                var mde = new SimpleMDE({
                    spellChecker: true,
                    element: elem,
                    autofocus: false,
                    forceSync: true,
                    toolbar: ["bold", "italic", "heading", "|",
                        "quote", "unordered-list", "ordered-list", "|",
                        "link", "image", "|",
                        "table", "horizontal-rule", "code", "|",
                        "guide"
                    ]
                });
                mde.render();
            });
        });

        $("#add_finding").submit(function () {
            var isFormValid = true;

            $("textarea#req").each(function () {
                if ($.trim($(this).val()).length == 0) {
                    $(this).addClass("highlight");
                    isFormValid = false;
                }
                else {
                    $(this).removeClass("highlight");
                }
            });

            if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

            return isFormValid;
        });
    </script>

{% endblock %}