Use tab field name instead of loop.index for navigation.

When tabs are hidden using the security@ feature, loop.index doesn't
match between tabs-nav and tabs-content
Fixes getgrav#524

templates/forms/fields/tabs/tabs.html.twig

@@ -44,7 +44,7 @@
         <div class="tabs-nav">
             {% for tab in tabs %}
                 {% if tab.type == 'tab' and (tab.condition is null or tab.condition == true) %}
-                <a class="tab__link {{ (storedTab == scope ~ tab.name) or active == loop.index ? 'active' : '' }}" data-tabid="tab-{{ tabsKey ~ loop.index }}" data-tabkey="tab-{{ tabsKey }}" data-scope="{{ scope ~ tab.name }}">
+                <a class="tab__link {{ (storedTab == scope ~ tab.name) or active == loop.index ? 'active' : '' }}" data-tabid="tab-{{ tabsKey ~ '-' ~ tab.name }}" data-tabkey="tab-{{ tabsKey }}" data-scope="{{ scope ~ tab.name }}">
                 <span>{{ tab.title|t }}</span>
                 {% endif %}
             </a>
@@ -53,7 +53,7 @@
         <div class="tabs-content">
             {% embed 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
                 {% block inner_markup_field_open %}
-                    <div id="tab-{{ tabsKey ~ loop.index }}" class="tab__content {{ (storedTab == scope ~ field.name) or active == loop.index ? 'active' : '' }}">
+                    <div id="tab-{{ tabsKey ~ '-' ~ field.name }}" class="tab__content {{ (storedTab == scope ~ field.name) or active == loop.index ? 'active' : '' }}">
                 {% endblock %}
                 {% block inner_markup_field_close %}
                     </div>