{% load i18n chimere_tags inline_formset staticfiles bootstrap startswith %}
{% if submited %}{% submited %}{% endif %}
{% if error_message %}<div class='edit errorlist'>
    <legend>{% trans "Error" %}</legend>
    <p>{{ error_message }}</p>
{% endif %}</div>
{% if is_modification and is_superuser %}<div class='warning'><p>{% trans "You are logged as an administrator. Your modifications will be taking into account immediately." %}</p></div>{% endif %}
<div class='edit'>
    {% block editactions %}
    {% for main_action, subactions in actions %}
        {% ifequal main_action.id 'contribute' %}
    <ul class="nav nav-pills">
        {% with "edit-"|add:geom_name as current_url %}{% for subaction in subactions %}
        <li{% ifequal subaction.id current_url %} class="active"{% endifequal %}><a class="subactions" data-link="{% url subaction.id|add:'-tab' area_name|add:'/' %}" href="#">{{ subaction.label }}</a></li>
        {% endfor %}{% endwith %}
    </ul>
        {% endifequal %}
    {% endfor %}
    {% endblock %}
    <form enctype="multipart/form-data" method='post'
          action='{% block edit_url %}{% url "editmarker" %}{% endblock %}' id='proposition_form'>
        {% csrf_token %}
        <p>* {% trans "indicates a mandatory field" %}</p>

        <div class="container" style="width: 100%;">
            <div class="row">
                <div class="col-xs-6">
                    <label for="id_name">{% trans "Name"%} *</label>
                    {% if form.name.errors %}<div class='errors'>{{ form.name.errors }}</div>{% endif %}
                    {{ form.name }}
                </div>
                <div class="col-xs-6">
                    <label for="id_subcategory">{% if form.categories.label %}{{ form.categories.label }}{% else %}{% trans "Categories" %} *{% endif %}</label>
                    {% if form.categories.errors %}<div class='errors'>{{ form.categories.errors }}</div>{% endif %}
                    {{ form.categories }}
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    {% block geometry %}
                    {% endblock %}
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 full">
                    <label for="id_description">{% trans "Description" %}</label>
                    {{ form.description.errors }}
                    {{ form.description }}
                    <p class="help">{{ form.description.help_text }}</p>
                </div>
            </div>
            {% if form.keywords %}
            <div class="row">
                <div class="col-xs-6">
                    <label for="id_keywords">{% trans "Keywords" %}</label>
                    {{ form.keywords.errors }}
                    {{ form.keywords }}
                    <p class="help">{{ form.keywords.help_text }}</p>
                </div>
            </div>{% endif %}
            {% if dated %}
            <div class="row">
                <div class="col-xs-6">
                    <label for="id_start_date">{% trans "Start date" %}</label>
                    {{ form.start_date.errors }}
                    {{ form.start_date }}
                    <p class="help">{{ form.start_date.help_text }}</p>
                </div>
                <div class="col-xs-6">
                    <label for="id_end_date">{% trans "End date" %}</label>
                    {{ form.end_date.errors }}
                    {{ form.end_date }}
                    <p class="help">{{ form.end_date.help_text }}</p>
                </div>
            </div>{% endif %}
            <div class="row">
            {% for field in form %}{% if field.name|startswith:'property_' %}
            {% for property in properties %}{% ifequal field.name property.getNamedId %}
                <div class="col-xs-12 col-md-6 col-xl-4">
                    <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} *{% endif %}</label>
                    {% if field.errors %}<div class='errors'>{{ field.errors }}</div>{% endif %}
                    {{ field }}
                </div>
            {% endifequal %}{% endfor %}{% endif %}{% endfor %}
            </div>
        </div>

        <div class='bottomform'>

            {% inline_formset "Multimedia files" formset_multi %}
            {% inline_formset "Picture files" formset_picture %}

            {% if filtered_properties %}
            <script type='text/javascript'>
                var cat_filters = new Array();
                var cat_to_hide = new Array();
                {% for property in filtered_properties %}
                cat_to_hide.push('#id_{{property.getNamedId}}');
                {% for subcat in property.subcategories.all %}
                if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
                cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
                {% endfor %}
                {% endfor %}
                $('.bsmSelect').change(function(){
                    for (idx in cat_to_hide){
                        $(cat_to_hide[idx]).parent().hide();
                    }
                    var vals = $('#id_categories').val();
                    for (val_id in vals){
                        var val = vals[val_id];
                        for (ids in cat_filters[val]){
                            $(cat_filters[val][ids]).parent().show();
                        }
                    }
                });
                $('.bsmSelect').change();
            </script>
            {% endif %}
        </div>
        <div class='personalform'>
            <h5>{% trans "Personal information"%}</h5>
            <div class="alert alert-info" role="alert">
                {% trans "This fields are not mandatory. If you provided them they not will be made public and they will only used to join you for this project."%}
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-6">
                        <label for="id_submiter_name">{% trans "Your name or nickname"%}</label>
                        {% if form.submiter_name.errors %}<div class='errors'>{{ form.submiter_name.errors }}</div>{% endif %}
                        {{ form.submiter_name }}
                    </div>
                    <div class="col-xs-6">
                        <label for="id_submiter_email">{% trans "Your email"%}</label>
                        {% if form.submiter_email.errors %}<div class='errors'>{{ form.submiter_email.errors }}</div>{% endif %}
                        {{ form.submiter_email }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 full">
                        <label for="id_submiter_comment">{% trans "Comments about your submission"%}</label>
                        {% if form.submiter_comment.errors %}<div class='errors'>{{ form.submiter_comment.errors }}</div>{% endif %}
                        {{ form.submiter_comment }}
                    </div>
                </div>
            </div>
        </div>
        {% bootstrap_modal "upload_in_progress" %}
        <script text='text/javascript'>
            var upload = '<p>{% trans "Upload in progress. Please wait..." %}</p>\n';
            upload += "<p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>";

            function displayProgress(){
                $('#upload_in_progress .modal-body').html(upload);
                $('#upload_in_progress').modal("show");
            }
            var success_msg = "<h3>Merci pour votre contribution au projet !</h3>";
            success_msg += "<p>Votre proposition va être examinée par un modérateur et être validée dans les jours à venir.</p>"
            $(function(){
                register_subactions();
                if (typeof tinyMCE !== 'undefined'){
                    tinyMCE.init({
                        mode : "textareas",
                        theme: 'modern',
                        editor_selector : "mceEditor",
                        relative_urls : false,
                        toolbar_items_size: 'small',
                        menubar: '',
                        toolbar1: 'bold italic,underline | bullist,numlist',
                        toolbar2: "",
                        toolbar3: ""
                    });
                }

                {% comment %}
                {% if route %}
                var edition_type = 'route';
                {% if itinerary_form %}
                $("#chimere_itinerary_form").appendTo($("#itinerary_field"));
                $('#main_map').chimere('updateRoutingInput');{% endif%}
                {% else %}
                var edition_type = 'marker';
                $('#main_map').chimere('updateMarkerInput');
                {% endif %}
                {% endcomment %}

                $('#modal-edit button.btn-primary').unbind("click");
                $('#modal-edit button.btn-primary').click(function(){
                    // JS tests because if a file is submited there is no way
                    // to refill the form with (browser security issue)
                    if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
                    validation = [
                        '{% if geom_name == 'marker' %}point{% else %}{{geom_name}}{% endif %}',
                        'name',
                        'categories',{% if event %}
                        'start_date',{% endif %}
                    ];
                    var validated = true;
                    for (var idx=0; idx<validation.length ;idx++){
                        var input_id = validation[idx];
                        var selec = '[name=' + input_id + ']';
                        var val = jQuery(selec).val();
                        if (!val || val == '0' || val == '' || val == 'None' ||
                                (input_id == 'id_submiter_email' &&
                                !isValidEmailAddress(val))){
                            jQuery(selec).parent().addClass('warning');
                            jQuery(selec).parent().addClass('error');
                            validated = false;
                        } else {
                            jQuery(selec).parent().removeClass('warning');
                            jQuery(selec).parent().removeClass('error');
                        }
                    }
                    if (!validated){
                        alert("{%trans "There are missing/erroneous fields."%}");
                        return false;
                    }
                    $("#proposition_form").ajaxForm();
                    displayProgress();
                    $("#proposition_form").ajaxSubmit({
                        success:function(msg){
                            $('#upload_in_progress').modal("hide");
                            $("#modal-edit").modal("hide");
                            $("#modal-default-message .modal-body").html(success_msg);
                            $('#modal-default-message').modal("show");
                        }
                    });
                    return false;
                });
            });
        </script>
    </form>
</div>