{% extends "JMSTranslationBundle::base.html.twig" %}

{% block javascripts %}
    {{ parent() }}
    
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            var updateMessagePath = {{ path("jms_translation_update_message", {"config": selectedConfig, "domain": selectedDomain, "locale": selectedLocale})|json_encode|raw }};
        
            $('#config select').change(function() {
                $(this).parent().submit();
            });
            
            {% if isWriteable is same as(true) %}
            $('textarea')
                .blur(function() {
                    var self = this;
                    $.ajax(updateMessagePath + '?id=' + encodeURIComponent($(this).data('id')), {
                        type: 'POST',
                        headers: {'X-HTTP-METHOD-OVERRIDE': 'PUT'},
                        data: {'_method': 'PUT', 'message': $(this).val()},
                        beforeSend: function() {
                            $(self).parent().closest('td').prev('td').children('.alert-message').remove();
                        },
                        error: function() {
                            $(self).parent().closest('td').prev('td').append('<span class="alert-message label error">Could not be saved.</span>');
                        },
                        success: function() {
                            $(self).parent().closest('td').prev('td').append('<span class="alert-message label success">Translation was saved.</span>');
                        },
                        complete: function() {
                            var parent = $(self).parent();
                            $(self).data('timeoutId', setTimeout(function() {
                                $(self).data('timeoutId', undefined);
                                parent.closest('td').prev('td').children('.alert-message').fadeOut(300, function() { $(this).remove(); });
                            }, 10000));
                        }
                    });
                })
                .focus(function() {
                    this.select();
                    
                    var timeoutId = $(this).data('timeoutId');
                    if (timeoutId) {
                        clearTimeout(timeoutId);
                        $(this).data('timeoutId', undefined);
                    }
                    
                    $(this).parent().children('.alert-message').remove();
                })
            ;
            {% endif %}
        });
    </script>
{% endblock %}

{% block body %}

    <form id="config" action="{{ path("jms_translation_index") }}" method="get">
        <select name="config" class="span3">
            {% for config in configs %}
            <option value="{{ config }}"{% if config == selectedConfig %} selected="selected"{% endif %}>{{ config }}</option>
            {% endfor %}
        </select>
    
        <select name="domain" class="span3">
            {% for domain in domains %}
            <option value="{{ domain }}"{% if domain == selectedDomain %} selected="selected"{% endif %}>{{ domain }}</option>
            {% endfor %}
        </select>
        
        <select name="locale" class="span2">
            {% for locale in locales %}
            <option value="{{ locale }}"{% if locale == selectedLocale %} selected="selected"{% endif %}>{{ locale }}</option>
            {% endfor %}
        </select>
    </form>
    
    {% if isWriteable is same as(false) %}
    <div class="alert-message error">
        The translation file "<strong>{{ file }}</strong>" is not writable.
    </div>
    {% endif %}
    
    {% if "xliff" != format %}
    <div class="alert-message warning">
        Due to limitations of the different loaders/dumpers, some features are unfortunately limited to the XLIFF format. 
        
        <br /><br />
        
        However, you can easily convert your existing translation files to the XLIFF format by running:<br />
        <code>php app/console translation:extract {{ selectedLocale }} --config={{ selectedConfig }} --output-format=xliff</code>
    </div>
    {% endif %}

    <h2>Available Messages</h2>
    
    {% if newMessages is not empty %}
    <h3>New Messages</h3>
    {% include "JMSTranslationBundle:Translate:messages.html.twig" with {"messages": newMessages} %}
    {% endif %}
    
    {% if existingMessages is not empty %}
    <h3>Existing Messages</h3>
    {% include "JMSTranslationBundle:Translate:messages.html.twig" with {"messages": existingMessages} %}
    {% endif %}

{% endblock %}