Legacy admin tabbed translations form theme

src/Sylius/Bundle/WebBundle/Resources/public/css/backend.css

@@ -422,6 +422,23 @@ form.form-signin .btn-success:hover {
     border: 0;
 }
 
+/* Tabs */
+.tab-container {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 20px;
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.nav-tabs > li > span {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+    font-weight: bold;
+}
+
 /* Hide button text on small devices, as well remove some other margin/padding */
 @media (max-width: 992px) {
     .row {

src/Sylius/Bundle/WebBundle/Resources/translations/messages.en.yml

@@ -693,6 +693,7 @@ sylius:
         total_registrations: 'Total registrations'
         tracking_code: 'Tracking Code'
         tracking_number: 'Tracking number'
+        translations: Translations
         type: Type
         unavailable: Unavailable
         unit_price: 'Unit price'

src/Sylius/Bundle/WebBundle/Resources/views/Common/forms.html.twig

@@ -164,13 +164,36 @@
     {% endspaceless %}
 {% endblock %}
 
+{% block sylius_translations_row %}
+    {{ form_widget(form) }}
+{% endblock %}
+
 {% block sylius_translations_widget %}
-    {% for translation in form %}
-        <div class="form-group">
-            {{ form_label(translation, translation.vars.name) }}
-            <div class="col-lg-10">
-                {{ form_widget(translation) }}
-            </div>
+    {{ form_errors(form) }}
+    <div class="tab-container">
+        <ul class="nav nav-tabs">
+            <li><span>{{ 'sylius.ui.translations'|trans }}</span></li>
+            {% for translationsFields in form %}
+                {% set locale = translationsFields.vars.name %}
+
+                <li {% if app.request.locale == locale %}class="active"{% endif %}>
+                    <a href="#" data-toggle="tab" data-target=".{{ translationsFields.vars.id }}_translation_fields-{{ locale }}">
+                        {{ locale|capitalize }}
+                        {% if translationsFields.vars.required %}*{% endif %}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+
+        <div class="tab-content">
+            {% for translationsFields in form %}
+                {% set locale = translationsFields.vars.name %}
+
+                <div class="{{ translationsFields.vars.id }}_translation_fields-{{ locale }} tab-pane {% if app.request.locale == locale %}active{% endif %} {% if not form.vars.valid %}error{% endif %}">
+                    {{ form_errors(translationsFields) }}
+                    {{ form_widget(translationsFields) }}
+                </div>
+            {% endfor %}
         </div>
-    {% endfor %}
-{%  endblock %}
+    </div>
+{% endblock %}