{% extends "@Translation/WebUI/base.html.twig" %}
{% import _self as macro %}

{% block body %}
    <nav class="navbar navbar-light bg-faded">
        <ul class="nav navbar-nav">
            <li class="nav-item"><span class="nav-text">Locales:</span></li>
            {% for locale in locales %}
                <li class="nav-item{% if currentLocale == locale %} active{% endif %}">
                    <a class="nav-link" href="{{ path('translation_show', {configName: configName, domain:currentDomain, locale:locale}) }}">
                        {{ locale }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </nav>
    <nav class="navbar navbar-light bg-faded">
        <ul class="nav navbar-nav">
            <li class="nav-item"><span class="nav-text">Domains:</span></li>
            {% for domain in domains %}
                <li class="nav-item{% if currentDomain == domain %} active{% endif %}">
                    <a class="nav-link" href="{{ path('translation_show', {configName: configName, domain:domain, locale:currentLocale}) }}">
                        {{ domain }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <br />
    </nav>


    <div class="container-fluid message-list">

        <h1>Translations
            {% if allow_create %}
            <a href="javascript:void(0);"
                class="btn btn-secondary"
                onclick='toggleElement("create-translation")'
                aria-controls="create-translation">Add new</a>
            {% endif %}
        </h1>

        {% if allow_create %}
        <div class="collapse" id="create-translation">
            <form class="form" onsubmit="return createTranslation(this, '{{ path('translation_create', {configName: configName, locale:currentLocale,domain:currentDomain}) }}')">
                <div class="form-group">
                    <label for="create-key">Key</label>
                    <input type="text" class="form-control" id="create-key" placeholder="foo.label">
                </div>
                <div class="form-group">
                    <label for="create-message">Translation</label>
                    <input type="text" class="form-control" id="create-message" placeholder="Lorem Ipsum">
                </div>
                <button type="submit" class="btn btn-primary">Create</button>
                <div class="ajax-result"></div>
            </form>
        </div>
        {% endif %}

        <div id="new-translations"></div>
        {% for idx, message in messages if message.new %}
            {{ macro.printMessage(idx + 1, message, allow_delete, file_base_path) }}
        {% endfor %}

        {% set idxStart = messages|length %}
        {% for idx, message in messages if not message.new %}
            {{ macro.printMessage(idx + idxStart, message, allow_delete, file_base_path) }}
        {% endfor %}
    </div>

    <script type="text/javascript">
        var editUrl="{{ path('translation_edit', {configName: configName, locale:currentLocale,domain:currentDomain}) }}";
    </script>
{% endblock %}

{% macro printMessage(idx, message, allow_delete, base_path) %}
    <div class="message row" id="{{ message.key }}">
        <div class="col-md-6 col-xs-12">
            {% if message.new %}
                <span class="text-primary" title="New">&#x25CF;</span>
            {% endif %}
            {% if message.obsolete %}
                <span class="text-warning" title="Obsolete">&#x26A0;</span>
            {% endif %}
            <a class="message-key" href="#{{ message.key }}">{{ message.key }}</a>
            {% if allow_delete %}
            <a class="message-delete" href="javascript:void(0)" data-key="{{ message.key }}" title="Delete translation" onclick='confirm("Are you sure?")?deleteTranslation(this):false;'>&#x274C;</a>
            {% endif %}
            <textarea
                class="message-textarea"
                data-key="{{ message.key }}"
                onchange="editTranslation(this)"
                tabindex="{{ idx }}"
            >{{ message.message }}</textarea>
            <div class="ajax-result"></div>

        </div>

        <div class="col-md-6 col-xs-12">
            {% for locale,trans in message.otherTranslations if not trans is empty%}
                <b>{{ locale }}</b>: {{ trans }}<br>
            {% endfor %}

        </div>

        <div class="col-xs-12">
            {% if message.sourceLocations|length > 0 %}
                <ul class="location-list">
                    {% for location in message.sourceLocations %}
                        <li><a href="{{ (base_path ~ location['path'])|file_link(location['line']) }}">{{ location['path'] }} at line {{ location['line'] }} </a></li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
{% endmacro %}