{# This is an extension of Twig Form Theme #}
{# We redefine form elements, so they are binded with Angular model #}

{% extends "MopaBootstrapBundle:Form:fields.html.twig" %}

{# Make data available to current scope as $scope.data - will not work with hidden fields #}
{% block widget_attributes %}
    {% spaceless %}
        {% if attr['ng-model'] is not defined %}
            {% if attr['checklist-model'] is not defined %}
                {% set attr = attr | merge({ 'ng-model': full_name | ngmodel }) %}
            {% endif %}
        {% elseif attr['ng-model'] is same as(true) %}
            {% set attr = attr | merge({ 'ng-model': full_name | ngmodel ~ '.id' }) %}
        {% endif %}

        id="{{ id }}" name="{{ full_name }}"{% if read_only %} readonly="readonly"{% endif %}{% if disabled %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
        {% for attrname, attrvalue in attr %}{% if attrname in ['placeholder', 'title'] %}{{ attrname }}="{{ attrvalue|trans({}, translation_domain) }}" {% else %}{{ attrname }}="{{ attrvalue }}" {% endif %}{% endfor %}
        {# {% if attr['ng-init'] is not defined %}ng-init="{{ 'if (' ~ attr['ng-model'] ~ ' === undefined)' ~ attr['ng-model'] ~ '="' ~ value ~ '"' }}"{% endif %} #}{# Angular ng-init #}
    {% endspaceless %}
{% endblock widget_attributes %}

{# Current controller submit() will called, instead of submitting the form #}
{#}
{% block form_start %}
    {% spaceless %}
        {% set method = method|upper %}
        {% if method in ["GET", "POST"] %}
            {% set form_method = method %}
        {% else %}
            {% set form_method = "POST" %}
        {% endif %}
        <form name="{{ form.vars.name }}" ng-submit="submit()" method="{{ form_method|lower }}" action="{{ action }}"{% for attrname, attrvalue in attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %}>
        {% if form_method != method %}
            <input type="hidden" name="_method" value="{{ method }}" />
        {% endif %}
    {% endspaceless %}
{% endblock form_start %}
#}

{# Mostrar errores de validación mediante angular #}
{% block form_message %}
{% spaceless %}
    {{ form_errors(form) }}
    <ul class="list-unstyled text-danger" ng-if="validation.children.{{ name }}.errors">
        <li ng-repeat="error in validation.children.{{ name }}.errors">{% verbatim %}{{ error }}{% endverbatim %}</li>
    </ul>
    {{ block('form_help') }}
{% endspaceless %}
{% endblock form_message %}

{% block widget_form_group_start %}
    {% if widget_form_group|default(false) or form.parent == null %}
        {% set widget_form_group_attr = widget_form_group_attr|merge({'ng-class': "{ 'has-error': (form['" ~ full_name ~ "'].$dirty && (form['" ~ full_name ~ "'].$invalid || validation.children." ~ name ~ ".errors)), 'has-success': (form['" ~ full_name ~ "'].$dirty && form['" ~ full_name ~ "'].$valid && !validation.children." ~ name ~ ".errors && !isUnchanged(item)) }" }) %}
    {% endif %}
    {{ parent() }}
{% endblock widget_form_group_start %}

{# Formateo moneda #}
{% block money_widget %}
{% spaceless %}
    {% set widget_addon_append = (widget_addon_append != false or widget_addon_append == null) and money_pattern != '{{ widget }}' ? {'text': money_pattern|replace({ '{{ widget }}': ''})} : widget_addon_append|default(null) %}
    {{ block('form_widget_simple') }}
{% endspaceless %}
{% endblock money_widget %}

{# choice expanded #}
{% block choice_widget_expanded %}
{% spaceless %}
    {% set label_attr = label_attr|merge({'class': (label_attr.class|default(''))}) %}
    {% set label_attr = label_attr|merge({'class': (label_attr.class ~ ' ' ~ (widget_type != '' ? (multiple ? 'checkbox' : 'radio') ~ '-' ~ widget_type : ''))}) %}
    {% if expanded %}
        {% set attr = attr|merge({'class': attr.class|default(horizontal_input_wrapper_class)}) %}
        <div {{ block('widget_container_attributes') }}>
    {% endif %}
    {% for key, child in form %}
        {% if widget_type != 'inline' %}
        <div class="{{ multiple ? 'checkbox' : 'radio' }}">
        {% endif %}
            <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
                {% set attr = {'class': attr.widget_class|default('') } %}
                {% if multiple %}
                    {% set attr = attr | merge({
                        'checklist-model': full_name|ngmodel,
                        'checklist-value': "'" ~ child.vars.value ~ "'"
                    }) %}
                {% endif %}
                {{ form_widget(child, {'horizontal_label_class': horizontal_label_class, 'horizontal_input_wrapper_class': horizontal_input_wrapper_class, 'attr': attr }) }}
                {{ child.vars.label|trans({}, translation_domain) }}
            </label>
        {% if widget_type != 'inline' %}
        </div>
        {% endif %}
    {% endfor %}
    {{ block('form_message') }}
    {% if expanded %}
        </div>
    {% endif %}
{% endspaceless %}
{% endblock choice_widget_expanded %}

{# DATE #}
{% block date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {% if attr['ng-model'] is not defined %}
            {% set attr = attr | merge({ 'ng-model': full_name | ngmodel }) %}
        {% endif %}
        <div class="col-lg-9">
            <div class="dropdown">
                <button type="button" class="dropdown-toggle btn btn-default" id="{{ id }}" role="button" data-toggle="dropdown" data-target="#" href="#">
                    {{ "{{ " ~ attr['ng-model'] ~ " ? (" ~ attr['ng-model'] ~ " | date: 'dd/MM/yyyy') : '--/--/----' }}" }}
                    <span class="glyphicon glyphicon-calendar fa fa-calendar"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <datetimepicker ng-model="{{ attr['ng-model'] }}"
                                    datetimepicker-config="{ dropdownSelector: '#{{ id }}', weekStart: 1, startView: 'year', minView: 'day' }"
                                    {% if required %} ng-required="true"{% endif %}
                                    name="{{full_name}}"/>
                </ul>
            </div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endspaceless %}
{% endblock date_widget %}

{# DATETIME #}
{% block datetime_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {% if attr['ng-model'] is not defined %}
            {% set attr = attr | merge({ 'ng-model': full_name | ngmodel }) %}
        {% endif %}
        <div class="col-lg-9">
            <div class="dropdown">
            <button type="button" class="dropdown-toggle btn btn-default" id="{{ id }}" role="button" data-toggle="dropdown" ng->
                {{ "{{ " ~ attr['ng-model'] ~ " ? (" ~ attr['ng-model'] ~ " | date: 'dd/MM/yyyy HH:mm') : '--/--/---- --:--' }}" }}
                <span class="glyphicon glyphicon-calendar fa fa-calendar"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <datetimepicker ng-model="{{ attr['ng-model'] }}"
                                datetimepicker-config="{ dropdownSelector: '#{{ id }}', weekStart: 1, startView: 'year', minView: 'hour' }"
                                {% if required %} ng-required="true"{% endif %}
                                name="{{full_name}}"/>
            </ul>
            </div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endspaceless %}
{% endblock datetime_widget %}