From 80e0973b957f084b324395bb9f7ea5fb06307ff4 Mon Sep 17 00:00:00 2001
From: Sagar <sriramkanakam87@gmail.com>
Date: Mon, 3 Feb 2025 15:17:19 +0100
Subject: [PATCH] feat: cas is now displayed in the molecule details page

---
 .../views/livewire/molecule-details.blade.php | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/resources/views/livewire/molecule-details.blade.php b/resources/views/livewire/molecule-details.blade.php
index faaa863..be9de6a 100644
--- a/resources/views/livewire/molecule-details.blade.php
+++ b/resources/views/livewire/molecule-details.blade.php
@@ -398,6 +398,46 @@ class="text-base font-semibold leading-7 text-secondary-dark  text-sm">
                                                             </div>
                                                         </div>
                                                         @endif
+                                                        @if ($molecule->cas && count($molecule->cas) > 0)
+                                                        <div class="group -ml-4 rounded-xl p-4 hover:bg-slate-100">
+                                                            <dt
+                                                                class="text-sm font-medium text-gray-500 sm:flex sm:justify-between">
+                                                                CAS
+                                                            </dt>
+
+                                                            <div x-data="{ showAll: false }">
+                                                                <div class="no-scrollbar min-w-0">
+                                                                    <ul role="list" class="mt-2 leading-8">
+                                                                        @foreach ($molecule->cas as $index => $cas)
+                                                                        @if ($cas != '')
+                                                                        <li class="inline"
+                                                                            x-show="showAll || {{ $index }} < 10">
+                                                                            <span
+                                                                                class="border px-4 bg-white isolate inline-flex rounded-md shadow-sm mb-2">
+                                                                                {{ $cas }}
+                                                                            </span>
+                                                                        </li>
+                                                                        @endif
+                                                                        @endforeach
+                                                                    </ul>
+                                                                    @if (count($molecule->cas) > 10)
+                                                                    <div class="mt-4">
+                                                                        <button @click="showAll = true"
+                                                                            x-show="!showAll"
+                                                                            class="text-base font-semibold leading-7 text-secondary-dark text-sm">
+                                                                            View More ↓
+                                                                        </button>
+                                                                        <button @click="showAll = false"
+                                                                            x-show="showAll"
+                                                                            class="text-base font-semibold leading-7 text-secondary-dark  text-sm">
+                                                                            View Less ↑
+                                                                        </button>
+                                                                    </div>
+                                                                    @endif
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        @endif
                                                     </section>
                                                 </div>
                                             </article>