{% extends "tweet/base.html" %}

{% block title %}Continu{% endblock %}   

{% block content %}
    <div class="page-header">
    <h1>Bewerk zoektermen voor continue tweets</h1>
    </div>
    <form action="{% url 'tweet:edit_stream_terms' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset class="fieldset">
            <legend>Zoektermen</legend>

            {% for term in terms %}
                <div class="clearfix term">
                    <input type="text" name="terms[{{ forloop.counter }}]" value="{{ term }}">
                    <a class="removeTerm btn btn-danger">Verwijder</a>
                </div>
            {% endfor %} 
            <div class="clearfix term_template">
                <input type="text" name="terms[x]" value="">
                <a class="removeTerm btn btn-danger">Verwijder</a>
            </div>

            <div class="clearfix">
                <div class="input">
                    <a class="addTerm btn btn-success">Zoekterm toevoegen</a>
                </div>
            </div>

            <br>

            <div class="actions">
                <input type="submit" value="Opslaan" class="btn btn-primary"> of 
                <a href="{% url 'tweet:list_stream' %}" class="btn">Annuleren</a> 
            </div>

    </form>
        
   <script type="text/javascript" charset="utf-8">
        $(document).on('click','.removeTerm', function(e) {
            window.console.log("Remove item");
            $(this).parents('.term').remove()
            renumber()
        });

        $(document).on('click', '.addTerm', function(e) {
            window.console.log("Add item");
            var template = $('.term_template')
            window.console.log("Template: " + template);
            template.before('<div class="clearfix term">' + template.html() + '</div>')
            renumber()
        });

        $('#form').submit(function() {
            $('.term_template').remove()
        });

        var renumber = function() {
            $('.term input').each(function(i) {
                $(this).attr('name', $(this).attr('name').replace(/terms\[.+\]/g, 'terms[' + i + ']'))
            })
        }
    </script>

{% endblock %}