From 589178f037711c2b6fc65a2b1e24d7ce6d7af58b Mon Sep 17 00:00:00 2001
From: Alexandr Chernyaev <bliz48rus@gmail.com>
Date: Sun, 26 Jan 2025 05:17:12 +0300
Subject: [PATCH] refs #2935 Improved tag ID generation for tabs

---
 resources/views/layouts/tabs.blade.php | 54 ++++++++++++--------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/resources/views/layouts/tabs.blade.php b/resources/views/layouts/tabs.blade.php
index 259d8a224..614cc9f0c 100644
--- a/resources/views/layouts/tabs.blade.php
+++ b/resources/views/layouts/tabs.blade.php
@@ -1,4 +1,5 @@
 <div
+    class="mb-3"
     data-controller="tabs"
     data-tabs-slug="{{$templateSlug}}"
     data-tabs-active-tab="{{$activeTab}}"
@@ -7,18 +8,17 @@
         <ul class="nav nav-tabs nav-tabs-scroll-bar" role="tablist">
             @foreach($manyForms as $name => $tab)
                 <li class="nav-item" role="presentation">
-                    <a class="nav-link
-                        @if ($activeTab === $name)
-                            active
-                        @elseif($loop->first && is_null($activeTab))
-                            active
-                        @endif"
-                       data-action="tabs#setActiveTab"
-                       data-bs-target="#tab-{{\Illuminate\Support\Str::slug($name)}}"
-                       id="button-tab-{{\Illuminate\Support\Str::slug($name)}}"
-                       aria-selected="false"
-                       role="tab"
-                       data-bs-toggle="tab">
+                    <a
+                        @class([
+                            'nav-link',
+                            'active' => $activeTab === $name || ($loop->first && is_null($activeTab))
+                        ])
+                        data-action="tabs#setActiveTab"
+                        data-bs-target="#tab-{{sha1($templateSlug.$name)}}"
+                        id="button-tab-{{sha1($templateSlug.$name)}}"
+                        aria-selected="false"
+                        role="tab"
+                        data-bs-toggle="tab">
                         {!! $name !!}
                     </a>
                 </li>
@@ -26,25 +26,19 @@
         </ul>
     </div>
 
-    <!-- main content -->
-    <section class="mb-3">
-        <div class="no-border-xs">
-            <div class="tab-content">
-                @foreach($manyForms as $name => $forms)
-                    <div role="tabpanel" class="tab-pane
-                        @if ($activeTab === $name)
-                            active
-                        @elseif($loop->first && is_null($activeTab))
-                            active
-                        @endif"
-                         id="tab-{{\Illuminate\Support\Str::slug($name)}}">
-                            @foreach($forms as $form)
-                                {!! $form !!}
-                            @endforeach
-                    </div>
+    <section class="tab-content">
+        @foreach($manyForms as $name => $forms)
+            <div role="tabpanel"
+                 id="tab-{{sha1($templateSlug.$name)}}"
+                 @class([
+                    'tab-pane',
+                    'active' => $activeTab === $name || ($loop->first && is_null($activeTab))
+                 ])
+            >
+                @foreach($forms as $form)
+                    {!! $form !!}
                 @endforeach
             </div>
-        </div>
+        @endforeach
     </section>
-    <!-- / main content -->
 </div>