1  @extends('livewire.jsons.view-layout')
 2  @section('json-view')
 3      <div class="flex flex-row items-start justify-between space-x-8">
 4          <div class="flex flex-col w-2/6 space-y-8">
 5              @include('json-bodies.partials.information', ['information' => $data['information']])
 6          </div>
 7          <div class="flex flex-col w-4/6 space-y-8">
 8              @include('json-bodies.partials.functional-tests', ['functionalTests' => $this->functionalTests])
 9          </div>
10      </div>
11  
12  
13      <div class="mt-8 mb-5">
14          <div x-data="{ tab: 1 }">
15              <x-card>
16                  <ul class="flex text-center border-b border-gray-200">
17                      <li class="flex-1 cursor-pointer">
18                          <a x-on:click.prevent="tab=1" :class="tab == 1 ?
19                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
20                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
21                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 1 }"></span>
22                              {{ __('jsons.panel.form.changelogs.list') }}
23                          </a>
24                      </li>
25                      <li class="flex-1 pl-px cursor-pointer">
26                          <a x-on:click.prevent="tab=2" :class="tab == 2 ?
27                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
28                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
29                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 2 }"></span>
30                              {{ __('jsons.panel.form.acronyms.list') }}
31                          </a>
32                      </li>
33                      <li class="flex-1 pl-px cursor-pointer">
34                          <a x-on:click.prevent="tab=3" :class="tab == 3 ?
35                                  'relative block p-4 text-sm font-medium bg-white border-t border-l border-r border-gray-200 rounded-tl ' :
36                                  'block p-4 text-sm font-medium text-gray-500 bg-gray-100 ring-1 ring-inset ring-white'">
37                              <span :class="{ 'absolute inset-x-0 w-full h-px bg-white -bottom-px': tab == 3 }"></span>
38                              {{ __('jsons.panel.form.document-references.list') }}
39                          </a>
40                      </li>
41                  </ul>
42  
43                  <div x-show="tab === 1" x-cloak class="flex flex-col mt-8 space-y-4">
44                      <div class="flex flex-col space-y-4">
45                          @include('json-bodies.partials.changelogs', ['changelogs' => $this->changelogs])
46                      </div>
47                  </div>
48  
49                  <div x-show="tab === 2" x-cloak class="flex flex-col mt-8 space-y-4">
50                      <div class="flex flex-col space-y-4">
51                          @include('json-bodies.partials.acronyms', ['acronyms' => $this->acronyms])
52                      </div>
53                  </div>
54  
55                  <div x-show="tab === 3" x-cloak class="flex flex-col mt-8 space-y-4">
56                      <div class="flex flex-col space-y-4">
57                          @include('json-bodies.partials.documentReferences', ['documentReferences'=> $this->documentReferences])
58                      </div>
59                  </div>
60              </x-card>
61          </div>
62      </div>
63  @endsection