{% extends "base.html" %}
{% load static %}
{% load authorization_tags %}
{% block add_css %}
    {{ block.super }}

    <link rel="stylesheet" href="{% static "easymde/dist/easymde.min.css" %}">
{% endblock %}
{% block content %}
    {{ block.super }}
    <h3> {{ name }} {{ template }}</h3>

    <form id="add_template" class="" method="post">{% csrf_token %}
        {% include "dojo/form_fields.html" with form=form %}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-primary" type="submit" name="add_template">Save Template</button>
            </div>
        </div>
    </form>
    {% if template %}
        {% if "delete"|has_global_permission %}
            <form method="post" action="{% url 'delete_template' template.id %}"
                style="display: inline" class="">
                {% csrf_token %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="hidden" name="id" value="{{ template.id }}"/>
                        <button type="submit" class="btn btn-danger template-delete">Delete Template</button>
                    </div>
                </div>
            </form>
        {% endif %}
    {% endif %}
{% endblock %}
{% block postscript %}
    {{ block.super }}
    <script type="application/javascript" src="{% static "jquery.hotkeys/jquery.hotkeys.js" %}"></script>
    <script type="application/javascript" src="{% static "easymde/dist/easymde.min.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/jquery.init.js" %}"></script>
    <script type="application/javascript">
        $ = django.jQuery;
        $.hotkeys.options.filterInputAcceptingElements = false;
        $.hotkeys.options.filterTextInputs = false;

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

        $(function () {
            $("textarea").each(function (index, elem) {
                if (elem.hasAttribute("required")) {
                    elem.removeAttribute("required");
                    elem.id = "req"
                }

                if (elem.name != 'vulnerability_ids' && !$(elem).hasClass('select2-search__field')) {
                    var mde = new EasyMDE({
                        spellChecker: false,
                        inputStyle: "contenteditable",
                        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 req id to input field which enables input length check
            $("input").each(function (index, elem) {

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

            $('button.template-delete').on('click', function (e) {
                return confirm('Are you sure you want to delete this template?')
            });
        });

        $("form#add_template").submit(function () {

            var isFormValid = true;

            $("textarea#req").each(function () {
                if ($.trim($(this).val()).length == 0) {
                    $(this).addClass("highlight");
                    isFormValid = false;
                } else {
                    $(this).removeClass("highlight");
                }
            });
            // check the input field like title
            $("input#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 %}