Merge branch 'next' into env-var-autocomplete

resources/views/components/forms/datalist.blade.php

@@ -97,12 +97,14 @@
             }" @click.outside="open = false" class="relative">
 
             {{-- Unified Input Container with Tags Inside --}}
-            <div @click="$refs.searchInput.focus()"
-                class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5  px-2 w-full text-sm rounded-sm border-0 ring-2 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text px-1 focus-within:border-l-4 focus-within:border-l-coollabs dark:focus-within:border-l-warning text-black dark:text-white"
+            <div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
+                class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5  px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
+                :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
                 :class="{
                         'opacity-50': {{ $disabled ? 'true' : 'false' }}
                     }" wire:loading.class="opacity-50"
-                wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4">
+                wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
 
                 {{-- Selected Tags Inside Input --}}
                 <template x-for="value in selected" :key="value">
@@ -221,11 +223,13 @@
                 <input type="hidden" :value="selected" @required($required) />
 
                 {{-- Input Container --}}
-                <div @click="openDropdown()"
-                    class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 ring-2 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text focus-within:border-l-4 focus-within:border-l-coollabs dark:focus-within:border-l-warning text-black dark:text-white"
+                <div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
+                    class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
+                    :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                    x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
                     :class="{
                     'opacity-50': {{ $disabled ? 'true' : 'false' }}
-                }" wire:loading.class="opacity-50" wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4">
+                }" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
 
                     {{-- Display Selected Value or Search Input --}}
                     <div class="flex-1 flex items-center min-w-0 px-1">

resources/views/components/forms/input.blade.php

@@ -27,7 +27,7 @@
             @endif
             <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
                 {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
-                @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
+                @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                 wire:loading.attr="disabled"
                 type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                 name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
@@ -38,7 +38,7 @@
     @else
         <input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
             {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
-            @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
+            @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
             wire:loading.attr="disabled"
             type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
             max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"

resources/views/components/forms/select.blade.php

@@ -12,7 +12,7 @@
     @endif
     <select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
         wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}"
-        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @else wire:model={{ $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif>
+        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif>
         {{ $slot }}
     </select>
     @error($modelBinding)

resources/views/components/forms/textarea.blade.php

@@ -45,16 +45,16 @@
                 @endif
                 <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                     {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
-                    @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
+                    @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                     wire:loading.attr="disabled"
                     type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                     name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                     aria-placeholder="{{ $attributes->get('placeholder') }}">
                 <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
                     placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
-                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
+                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
                 @else
-            wire:model={{ $value ?? $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
+            wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                     @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
                     name="{{ $name }}" name={{ $modelBinding }}
                     @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
@@ -64,9 +64,9 @@
             <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
                 {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
                 {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
-                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
+                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
         @else
-    wire:model={{ $value ?? $modelBinding }} wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
+    wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                 @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
                 name="{{ $name }}" name={{ $modelBinding }}
                 @if ($autofocus) x-ref="autofocusInput" @endif></textarea>

resources/views/components/status/degraded.blade.php

@@ -1,15 +1,33 @@
 @props([
     'status' => 'Degraded',
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // degraded:unhealthy → Degraded (unhealthy)
+    // degraded (unhealthy) → degraded (unhealthy) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center" >
     <x-loading wire:loading.delay.longer />
     <span wire:loading.remove.delay.longer class="flex items-center">
         <div class="badge badge-warning"></div>
-        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning">
-            {{ str($status)->before(':')->headline() }}
-        </div>
-        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-            <div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
+        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning">{{ $displayStatus }}</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
         @endif
     </span>
 </div>

resources/views/components/status/index.blade.php

@@ -5,9 +5,9 @@
 ])
 @if (str($resource->status)->startsWith('running'))
     <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('restarting') ||
-        str($resource->status)->startsWith('starting') ||
-        str($resource->status)->startsWith('degraded'))
+@elseif(str($resource->status)->startsWith('degraded'))
+    <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+@elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
     <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
 @else
     <x-status.stopped :status="$resource->status" />

resources/views/components/status/restarting.blade.php

@@ -4,6 +4,26 @@
     'lastDeploymentLink' => null,
     'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // starting:unknown → Starting (unknown)
+    // starting (unknown) → starting (unknown) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
     @if (!$noLoading)
         <x-loading wire:loading.delay.longer />
@@ -13,14 +33,14 @@
         <div class="pl-2 pr-1 text-xs font-bold dark:text-warning" @if($title) title="{{$title}}" @endif>
            @if ($lastDeploymentLink)
               <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                  {{ str($status)->before(':')->headline() }}
+                  {{ $displayStatus }}
               </a>
           @else
-              {{ str($status)->before(':')->headline() }}
+              {{ $displayStatus }}
           @endif
         </div>
-        @if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
-            <div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
         @endif
     </span>
 </div>

resources/views/components/status/running.blade.php

@@ -4,6 +4,26 @@
     'lastDeploymentLink' => null,
     'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // running:healthy → Running (healthy)
+    // running (healthy) → running (healthy) (already formatted, display as-is)
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
     <div class="flex items-center">
         <div wire:loading.delay.longer wire:target="checkProxy(true)" class="badge badge-warning"></div>
@@ -12,21 +32,27 @@
             @if ($title) title="{{ $title }}" @endif>
             @if ($lastDeploymentLink)
                 <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                    {{ str($status)->before(':')->headline() }}
+                    {{ $displayStatus }}
                 </a>
             @else
-                {{ str($status)->before(':')->headline() }}
+                {{ $displayStatus }}
             @endif
         </div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs text-success">({{ $healthStatus }})</div>
+        @endif
         @php
+            $showUnknownHelper =
+                !str($status)->startsWith('Proxy') &&
+                (str($status)->contains('unknown') || str($healthStatus)->contains('unknown'));
             $showUnhealthyHelper =
                 !str($status)->startsWith('Proxy') &&
-                !str($status)->contains('(') &&
-                str($status)->contains('unhealthy');
+                (str($status)->contains('unhealthy') || str($healthStatus)->contains('unhealthy'));
         @endphp
-        @if ($showUnhealthyHelper)
+        @if ($showUnknownHelper)
+        <div class="px-2">
             <x-helper
-                helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>This doesn't mean that the resource is malfunctioning.</span><br><br>- If the resource is accessible, it indicates that no health check is configured - it is not mandatory.<br>- If the resource is not accessible (returning 404 or 503), it may indicate that a health check is needed and has not passed. <span class='dark:text-warning text-coollabs'>Your action is required.</span><br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
+                helper="No health check configured. <span class='dark:text-warning text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
                 <x-slot:icon>
                     <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
                         xmlns="http://www.w3.org/2000/svg">
@@ -36,6 +62,22 @@
                     </svg>
                 </x-slot:icon>
             </x-helper>
+        </div>
+        @endif
+        @if ($showUnhealthyHelper)
+         <div class="px-2">
+            <x-helper
+                helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>The health check is failing.</span><br><br>This resource will <span class='dark:text-warning text-coollabs'>NOT work with Traefik</span> as it expects a healthy state. Your action is required to fix the health check or the underlying issue causing it to fail.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
+                <x-slot:icon>
+                    <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
+                        </path>
+                    </svg>
+                </x-slot:icon>
+            </x-helper>
+        </div>
         @endif
     </div>
 

resources/views/components/status/services.blade.php

@@ -1,13 +1,16 @@
-@if (str($complexStatus)->contains('running'))
-    <x-status.running :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('starting'))
-    <x-status.restarting :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('restarting'))
-    <x-status.restarting :status="$complexStatus" />
-@elseif(str($complexStatus)->contains('degraded'))
-    <x-status.degraded :status="$complexStatus" />
+@php
+    $displayStatus = formatContainerStatus($complexStatus);
+@endphp
+@if (str($displayStatus)->lower()->contains('running'))
+    <x-status.running :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('starting'))
+    <x-status.restarting :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('restarting'))
+    <x-status.restarting :status="$displayStatus" />
+@elseif(str($displayStatus)->lower()->contains('degraded'))
+    <x-status.degraded :status="$displayStatus" />
 @else
-    <x-status.stopped :status="$complexStatus" />
+    <x-status.stopped :status="$displayStatus" />
 @endif
 @if (!str($complexStatus)->contains('exited') && $showRefreshButton)
     <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'

resources/views/components/status/stopped.blade.php

@@ -2,12 +2,47 @@
     'status' => 'Stopped',
     'noLoading' => false,
 ])
+@php
+    // Handle both colon format (backend) and parentheses format (from services.blade.php)
+    // For exited containers, health status is hidden (health checks don't run on stopped containers)
+    // exited:unhealthy → Exited
+    // exited (unhealthy) → Exited
+
+    if (str($status)->contains('(')) {
+        // Already in parentheses format from services.blade.php - use as-is
+        $displayStatus = $status;
+        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
+
+        // Don't show health status for exited containers (health checks don't run on stopped containers)
+        if (str($displayStatus)->lower()->contains('exited')) {
+            $displayStatus = str($status)->before('(')->trim()->headline();
+            $healthStatus = null;
+        }
+    } elseif (str($status)->contains(':')) {
+        // Colon format from backend - transform it
+        $parts = explode(':', $status);
+        $displayStatus = str($parts[0])->headline();
+        $healthStatus = $parts[1] ?? null;
+
+        // Don't show health status for exited containers (health checks don't run on stopped containers)
+        if (str($displayStatus)->lower()->contains('exited')) {
+            $healthStatus = null;
+        }
+    } else {
+        // Simple status without health
+        $displayStatus = str($status)->headline();
+        $healthStatus = null;
+    }
+@endphp
 <div class="flex items-center">
     @if (!$noLoading)
         <x-loading wire:loading.delay.longer />
     @endif
     <span wire:loading.remove.delay.longer class="flex items-center">
         <div class="badge badge-error "></div>
-        <div class="pl-2 pr-1 text-xs font-bold text-error">{{ str($status)->before(':')->headline() }}</div>
+        <div class="pl-2 pr-1 text-xs font-bold text-error">{{ $displayStatus }}</div>
+        @if ($healthStatus && !str($displayStatus)->contains('('))
+            <div class="text-xs text-error">({{ $healthStatus }})</div>
+        @endif
     </span>
 </div>