{% extends '@IGACoreBundle/layout.html.twig' %}

{% block title %}{{ pageTitleString }}{% endblock title %}

{% block head_description %}{{ descriptionString }}{% endblock head_description %}
{% block head_keyword %}{{ keyWordString }}{% endblock head_keyword %}

{% block og_title %}{{ pageTitleString }}{% endblock og_title %}
{% block og_description %}{{ descriptionString }}{% endblock og_description %}

{% block head_style %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/igacontent/css/content-frontend.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/igacore/js/select2/css/select2.min.css') }}" type="text/css" media="all" />
{% endblock head_style %}

{% block content %}

    <div class="row-fluid">

        <div class="space"></div>

        {% if errorMessage != '' %}
            <div class="alert alert-danger">{{ errorMessage }}</div>
        {% endif %}

        {% if messageRespondant is not null or true %}

            <h4>
                {{ form.title }}
            </h4>

            {% if form.description != '' %}
                <p>
                    {{ form.description }}
                </p>
            {% endif %}

            <form method="POST"
                  action="{{ path('content_form_complete', { 'formId': formId, 'contentId': contentId, 'noc': date().format('YmdHis') } ) }}" id="customform">

                <input type="hidden" name="contentId" value="{{ contentId }}" />

                {% for formItem in formItems.formItems %}
                    {% if formItem.widget_name == 'paragraph' or formItem.widget_name == 'heading' %}
                        {% if formItem.widget_name == 'heading' %}
                            <h5>{{ formItem.prompt|urldecode }}</h5>
                        {% else %}
                            <p>{{ formItem.description|urldecode|nl2br }}</p>
                        {% endif %}
                    {% else %}
                        <div class="form-group row" {% if formItem.description != '' %} data-toggle="popover" data-content="{{ formItem.description|urldecode }}" title="{{ formItem.prompt|urldecode }}"{% endif %}>
                            <div class="col-sm-12 col-lg-3 formLabel">
                                <label for="some_form_element_{{ formItem.id }}">{{ formItem.prompt|urldecode }}</label>
                            </div>
                            <div class="col-sm-12 col-lg-9 formPrompt">
                                {% if formItem.widget_id is defined %}
                                    {{ form_widget(attribute(formCompletedForm, formItem.widget_id)) }}
                                    <span class="formError">{{ form_errors(attribute(formCompletedForm, formItem.widget_id)) }}</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}

                <div class="form-group row">
                    <div class="col-sm-12 col-lg-3 formLabel">
                        {{ form_label(formCompletedForm.captcha) }}
                    </div>
                    <div class="col-sm-12 col-lg-9 formPrompt">
                        {{ form_widget(formCompletedForm.captcha) }}
                        <span class="formError">{{ form_errors(formCompletedForm.captcha) }}</span>
                    </div>
                </div>

                <div class="row text-center">
                    <button type="submit" class="btn btn-black">{{ 'Save'|phrase }}</button>
                </div>

                {{ form_rest(formCompletedForm) }}

            </form>

        {% else %}
            <div class="failingAlert failureMessage">
                {{ 'So sorry, but you were not invited to complete this form.' }}
            </div>
        {% endif %}

    </div>

    <script language="Javascript">
        $(document).ready(function () {

            $('[data-toggle="popover"]').popover({placement: 'top', trigger: 'hover'});
            $('select').select2();

            $(".datepicker").datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true
            });
            $(".datetimepicker").datetimepicker({
                format: 'Y-m-d H:i',
                dateFormat: 'Y-m-d',
                timeFormat: 'HH:mm',
                changeMonth: true,
                changeYear: true,
                changeTime: true
            });
            $('.timepicker').timepicker();

        });
    </script>

{% endblock content %}

{% block foot_script %}
    {{ parent() }}
    <script language="Javascript" src="{{ asset('bundles/igacore/js/select2/js/select2.min.js') }}"></script>
{% endblock foot_script %}