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

    <link rel="stylesheet" href="{% static "easymde/dist/easymde.min.css" %}">
{% endblock %}

{% block content %}
    {{ block.super }}
    <form class="" action="{% url 'new_product' %}" method="post">{% csrf_token %}
        {% include "dojo/form_fields.html" with form=form %}
        {%  if jform %}
                <h4> JIRA </h4>
                <hr>
                {% include "dojo/form_fields.html" with form=jform %}
            {% endif %}
        {%  if gform %}
            <h4> Github </h4>
            <hr>
            {% include "dojo/form_fields.html" with form=gform %}
        {% endif %}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input class="btn btn-primary" type="submit" value="Submit"/>
            </div>
        </div>
    </form>
{% endblock %}
{% block postscript %}
    {{ block.super }}
    <script type="application/javascript" src="{% static "easymde/dist/easymde.min.js" %}"></script>
    <script type="application/javascript">
        $(function () {
            $('#id_regulations').select2({
                placeholder: 'Select applicable regulations',
                width: '100%'
            });
            $("textarea").each(function (index, elem) {
                if (elem.hasAttribute("required")) {
                    elem.removeAttribute("required");
                    elem.id = "req"
                }

                if(!$(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();
                }
            });
        });
    </script>
{% endblock %}