From 70cd51379a24d6d4882c77611ad236f7eb8d036a Mon Sep 17 00:00:00 2001
From: guillaume91 <guillaume@sobit.nl>
Date: Mon, 27 May 2024 11:59:09 +0200
Subject: [PATCH] [fix] Responsive menu

---
 .../app/Console/Commands/BuildReports.php     |   2 +-
 .../views/components/label.blade.php          |   4 +-
 .../views/livewire/projects/menu.blade.php    |  12 +-
 .../livewire/projects/tabs/download.blade.php |  12 +-
 .../livewire/projects/tabs/settings.blade.php | 333 +++++++++---------
 .../resources/views/projects/show.blade.php   |   5 +-
 6 files changed, 193 insertions(+), 175 deletions(-)

diff --git a/laravel_app/app/Console/Commands/BuildReports.php b/laravel_app/app/Console/Commands/BuildReports.php
index f3fed64..c7ed7af 100644
--- a/laravel_app/app/Console/Commands/BuildReports.php
+++ b/laravel_app/app/Console/Commands/BuildReports.php
@@ -27,7 +27,7 @@ class BuildReports extends Command
     public function handle()
     {
 
-
+        // TODO schedule all the project if mail
         Project::find(1)->schedule();
     }
 }
diff --git a/laravel_app/resources/views/components/label.blade.php b/laravel_app/resources/views/components/label.blade.php
index 1cc65e2..133c5f8 100644
--- a/laravel_app/resources/views/components/label.blade.php
+++ b/laravel_app/resources/views/components/label.blade.php
@@ -1,5 +1,5 @@
-@props(['value'])
+@props(['value','disabled' => false])
 
-<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}>
+<label {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 disabled:bg-red-100']) }}>
     {{ $value ?? $slot }}
 </label>
diff --git a/laravel_app/resources/views/livewire/projects/menu.blade.php b/laravel_app/resources/views/livewire/projects/menu.blade.php
index 994b7c7..fdcf2a4 100644
--- a/laravel_app/resources/views/livewire/projects/menu.blade.php
+++ b/laravel_app/resources/views/livewire/projects/menu.blade.php
@@ -1,8 +1,8 @@
-<div class="flex flex-col w-fit bg-white p-6 rounded-lg shadow divide-y divide-solid">
-    <a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4  {{!($activeTab == 'downloads') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}">Downloads</a>
-    <a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4  {{!($activeTab == 'mosaics')   ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}">Mosaics</a>
-    <a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4  {{!($activeTab == 'reports')   ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}">Reports</a>
-    <a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4  {{!($activeTab == 'mailings')  ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}">Mailings</a>
-    <a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4  {{!($activeTab == 'settings')  ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}">Settings</a>
+<div class="flex flex-col bg-white p-6 gap-2 md:w-1/4">
+    <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'downloads') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-calendar-check"></i> Downloads</a>
+    <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mosaics')   ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-object-ungroup"></i>Mosaics</a>
+    <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'reports')   ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-flag"></i>Reports</a>
+    <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mailings')  ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-envelope"></i>Mailings</a>
+    <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'settings')  ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-compass"></i>Settings</a>
 </div>
 {{--TODO change to responsive menu--}}
diff --git a/laravel_app/resources/views/livewire/projects/tabs/download.blade.php b/laravel_app/resources/views/livewire/projects/tabs/download.blade.php
index ae3dd49..e57d680 100644
--- a/laravel_app/resources/views/livewire/projects/tabs/download.blade.php
+++ b/laravel_app/resources/views/livewire/projects/tabs/download.blade.php
@@ -5,8 +5,8 @@
 {{--   TODO Put Back the poll but to the list of downloads only--}}
 >
     <div class="px-4 sm:px-6 lg:px-8">
-        <div class="sm:flex sm:flex-col sm:items-center">
-            <div class="flex justify-between w-full my-4">
+        <div class="sm:flex sm:flex-col">
+            <div class="flex flex-col md:flex-row md:justify-between items-center w-full my-4">
                 <h1 class="text-base font-semibold leading-6 text-gray-900">Downloads</h1>
                 @if ($project->hasPendingDownload())
                     <p class="text-base text-gray-700 animate-pulse">
@@ -14,10 +14,10 @@
                     </p>
                 @endif
             </div>
-            <div class="mt-4 sm:mt-0 sm:flex sm:justify-between w-full">
-                <x-search></x-search>
+            <div class="mt-4 sm:mt-0 flex flex-col sm:flex-row sm:justify-between gap-2">
+                <x-search class="flex-1 w-full"></x-search>
                 <x-button wire:click="openDownloadModal"
-                          class="rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                          class="rounded-md bg-indigo-600 px-3 py-2 justify-center text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                     {{ __('Create Download') }}
                 </x-button>
             </div>
@@ -43,7 +43,7 @@ class="px-3 py-3.5 text-right pr-4 sm:pr-8 lg:pr-8 text-sm font-semibold text-gr
 
                             </tr>
                             </thead>
-                            <tbody  class="divide-y divide-gray-200 bg-white">
+                            <tbody class="divide-y divide-gray-200 bg-white">
                             @foreach($downloads as $download)
                                 <tr>
                                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ $download->name }}</td>
diff --git a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
index 27d81a4..c934fd5 100644
--- a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
+++ b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
@@ -1,170 +1,187 @@
-<div class="flex flex-col divide-y space-y-4">
-    <div id="edit">
-        <div class="flex flex-col my-2 py-2">
+<div class="flex flex-col divide-y space-y-4 m-2">
+    <div id="edit" class="flex flex-col md:flex-row gap-2">
+        <div class="flex flex-col md:w-1/3">
             <div class="text-xl font-bold ">
-                {{ __('Reports') }}
+                {{ __('General') }}
             </div>
             <div class="text-gray-500 text-md">
-                {{__('Report generator for generating reports')}}
+                {{__('Manage the general settings of this project and the reports.')}}
             </div>
         </div>
-        <form>
-            <!-- Token Name -->
-            <div class="mb-2">
-                <x-label for="name" value="{{ __('Name') }}"/>
-                <x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
-                <x-input-error for="name" class="mt-2"/>
-            </div>
-            <div class="flex flex-col mb-2 gap-2">
-                <p>{{__('Pivot GeoJSON file.')}}</p>
-                <div id="pivot_file">
-                    <livewire:dropzone
-                        wire:model="pivotFiles"
-                        :rules="['extensions:json,geojson','mimes:json,geojson']"
-                        :key="'pivotFiles'"
-                    />
+        <div class="md:w-2/3">
+            <form>
+                <!-- Token Name -->
+                <div class="mb-2">
+                    <x-label for="name" value="{{ __('Name') }}"/>
+                    <x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
+                    <x-input-error for="name" class="mt-2"/>
                 </div>
-                @error('pivotFiles')
-                <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
-                @enderror
-            </div>
-            <div class="flex flex-col mb-2 gap-2">
-                <p>{{__('Span GeoJSON file.')}}</p>
-                <div id="span_file">
-                    <livewire:dropzone
-                        wire:model="spanFiles"
-                        :rules="['extensions:json,geojson','mimes:json,geojson']"
-                        :key="'spanFiles'"
-                    />
-                </div>
-                @error('spanFiles')
-                <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
-                @enderror
-            </div>
-            <div class="flex flex-col mb-2 gap-2">
-                <p>{{__('Harvested Data file.')}}</p>
-                <div id="harvest_file">
-                    <livewire:dropzone
-                        wire:model="harvestDataFiles"
-                        :rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
-                        :key="'harvest_file'"
-                    />
-                </div>
-                @error('harvest_file')
-                <span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
-                @enderror
-            </div>
-        </form>
-    </div>
-    <div id-="mail"
-         x-data="{showMail: null}"
-         x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
-         class="flex flex-col">
-        <div class="flex justify-between my-4">
-            <div>
-                <span class="text-xl font-bold dark:text-gray-300">{{__('Mail')}}</span>
-                <div class="text-gray-500 text-md">
-                    {{ __('Schedule a mail for this Project') }}
-                </div>
-            </div>
-            <label class="inline-flex items-center cursor-pointer gap-4">
-                <input x-ref="subject" type="checkbox" class="sr-only peer" @click="showMail = $el.checked" x-init="$el.checked = showMail">
-                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
-            </label>
-        </div>
-        <form submit="saveMailSettings" >
-            <div class="col-span-6 sm:col-span-4">
-                <x-label for="email_subject" value="{{ __('Subject') }}"/>
-                <x-input id="email_subject" type="text"
-                         class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
-                         wire:model="formData.mail_subject"
-                         x-bind:disabled="!showMail"
-                         autofocus/>
-                <x-input-error for="mail_subject" class="mt-2"/>
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <x-label for="email_template" value="{{ __('Template') }}"/>
-                <textarea id="email_template" type="text"
-                          class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
-                          wire:model="formData.mail_template"
-                          x-bind:disabled="!showMail"
-                >
-                </textarea>
-                <x-input-error for="mail_template" class="mt-2"/>
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
-                <select id="email_frequency" class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
-                        wire:model="formData.mail_frequency"
-                        x-bind:disabled="!showMail"
-                >
-                    @foreach(App\Helper::getMailFrequencies() as $frequency)
-                        <option value="{{ $frequency }}">{{ $frequency }}</option>
-                    @endforeach
-                </select>
-                <x-input-error for="mail_frequency" class="mt-2"/>
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <x-label for="mail_day" value="{{ __('Day') }}"/>
-                <select id="mail_day"
-                        wire:model="formData.mail_day"
-                        x-bind:disabled="!showMail"
-                        class="mt-1 block w-full  rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
-                    @foreach(App\Helper::getDays() as $day)
-                        <option value="{{ $day }}">{{ $day }}</option>
-                    @endforeach
-                </select>
-                <x-input-error for="mail_day" class="mt-2"/>
-            </div>
-            <div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
-                {{ __('Recipients') }}
-            </div>
-            <div class="divide-y divide-indigo-200 divide-dashed">
-                @foreach($formData['mail_recipients'] as $key => $email_recipient)
-                    <div class="col-span-6 sm:colspan-4 grid-cols-6 gap-1 my-1 py-2 flex justify-between">
-                        <div class="">
-                            <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
-                            <x-input id="mail_recipient_{{ $key }}_name" type="text"
-                                     class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
-                                     x-bind:disabled="!showMail"
-                                     wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
-                            <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
-                        </div>
-
-                        <div class="flex-1">
-                            <x-label for="bounding_box_{{ $key }}_top_left_latitude"
-                                     value="{{ __('Email') }}"/>
-                            <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
-                                     class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
-                                     x-bind:disabled="!showMail"
-                                     wire:model="formData.mail_recipients.{{ $key }}.email"
-                                     autofocus/>
-                            <x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
-                        </div>
-                        <div class="flex">
-                            @if( count($formData['mail_recipients']) > 1)
-                                <button
-                                    class="cursor-pointer text-sm text-red-500 py-3 mx-2 self-end"
-                                    type="button"
-                                    wire:click="deleteEmailRecipient({{ $key }})"
-                                    wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
-                                >
-                                    Delete
-                                </button>
-                            @endif
-                        </div>
+                <div class="flex flex-col mb-2 gap-2">
+                    <p>{{__('Pivot GeoJSON file.')}}</p>
+                    <div id="pivot_file">
+                        <livewire:dropzone
+                            wire:model="pivotFiles"
+                            :rules="['extensions:json,geojson','mimes:json,geojson']"
+                            :key="'pivotFiles'"
+                        />
                     </div>
-                @endforeach
+                    @error('pivotFiles')
+                    <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
+                    @enderror
+                </div>
+                <div class="flex flex-col mb-2 gap-2">
+                    <p>{{__('Span GeoJSON file.')}}</p>
+                    <div id="span_file">
+                        <livewire:dropzone
+                            wire:model="spanFiles"
+                            :rules="['extensions:json,geojson','mimes:json,geojson']"
+                            :key="'spanFiles'"
+                        />
+                    </div>
+                    @error('spanFiles')
+                    <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
+                    @enderror
+                </div>
+                <div class="flex flex-col mb-2 gap-2">
+                    <p>{{__('Harvested Data file.')}}</p>
+                    <div id="harvest_file">
+                        <livewire:dropzone
+                            wire:model="harvestDataFiles"
+                            :rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
+                            :key="'harvest_file'"
+                        />
+                    </div>
+                    @error('harvest_file')
+                    <span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
+                    @enderror
+                </div>
+            </form>
+        </div>
+    </div>
+{{--    TODO change mail to something else and check schedule--}}
+    <div id="scheduling"
+         class="flex flex-col md:flex-row">
+        <div class="flex flex-col my-4 md:w-1/3">
+            <span class="text-xl font-bold dark:text-gray-300">{{__('Schedule')}}</span>
+            <div class="text-gray-500 text-md">
+                {{ __('Schedule an action for this project') }}
             </div>
-            <div x-show="showMail" class="flex">
-                <x-secondary-button class="mr-3"
-                                    type="button"
-                                    wire:click="addEmailRecipient"
-                >
-                    {{ __('Add recipient') }}
-                </x-secondary-button>
+        </div>
+        <div id="mail"
+            class="flex flex-col md:w-2/3"
+             x-data="{showMail: null}"
+             x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
+        > {{-- flex col--}}
+            <div class="flex justify-between my-4">
+                <div class="inline-flex items-center gap-2">
+{{--                    <span class="text-lg font-semibold dark:text-gray-300">{{__('Mail')}}</span>---}}
+                    <div class=" text-md font-bold">
+                        {{ __('Send a mail to recipients periodically') }}
+                    </div>
+                </div>
+                <label class="inline-flex items-center cursor-pointer gap-4">
+                    <input x-ref="subject" type="checkbox" class="sr-only peer" @click="showMail = $el.checked" x-init="$el.checked = showMail">
+                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
+                </label>
             </div>
-        </form>
+            <div class="flex w-full ">
+                <form submit="saveMailSettings">
+                    <div class="col-span-6 sm:col-span-4">
+                        <x-label for="email_subject" value="{{ __('Subject') }}"/>
+                        <x-input id="email_subject" type="text"
+                                 class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                                 wire:model="formData.mail_subject"
+                                 x-bind:disabled="!showMail"
+                                 autofocus/>
+                        <x-input-error for="mail_subject" class="mt-2"/>
+                    </div>
+                    <div class="col-span-6 sm:col-span-4">
+                        <x-label for="email_template" value="{{ __('Template') }}"/>
+                        <textarea id="email_template" type="text"
+                                  class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
+                                  wire:model="formData.mail_template"
+                                  x-bind:disabled="!showMail"
+                        >
+                </textarea>
+                        <x-input-error for="mail_template" class="mt-2"/>
+                    </div>
+                    <div class="col-span-6 sm:col-span-4">
+                        <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
+                        <select id="email_frequency"
+                                class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
+                                wire:model="formData.mail_frequency"
+                                x-bind:disabled="!showMail"
+                        >
+                            @foreach(App\Helper::getMailFrequencies() as $frequency)
+                                <option value="{{ $frequency }}">{{ $frequency }}</option>
+                            @endforeach
+                        </select>
+                        <x-input-error for="mail_frequency" class="mt-2"/>
+                    </div>
+                    <div class="col-span-6 sm:col-span-4">
+                        <x-label for="mail_day" value="{{ __('Day') }}"/>
+                        <select id="mail_day"
+                                wire:model="formData.mail_day"
+                                x-bind:disabled="!showMail"
+                                class="mt-1 block w-full  rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
+                            @foreach(App\Helper::getDays() as $day)
+                                <option value="{{ $day }}">{{ $day }}</option>
+                            @endforeach
+                        </select>
+                        <x-input-error for="mail_day" class="mt-2"/>
+                    </div>
+                    <div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
+                        {{ __('Recipients') }}
+                    </div>
+                    <div class="divide-y divide-indigo-200 divide-dashed">
+                        @foreach($formData['mail_recipients'] as $key => $email_recipient)
+                            <div class="gap-1 my-1 py-2 flex flex-col md:flex-row justify-between">
+                                <div class="">
+                                    <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
+                                    <x-input id="mail_recipient_{{ $key }}_name" type="text"
+                                             class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                                             x-bind:disabled="!showMail"
+                                             wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
+                                    <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
+                                </div>
+
+                                <div class="">
+                                    <x-label for="bounding_box_{{ $key }}_top_left_latitude"
+                                             value="{{ __('Email') }}"/>
+                                    <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
+                                             class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                                             x-bind:disabled="!showMail"
+                                             wire:model="formData.mail_recipients.{{ $key }}.email"
+                                             autofocus/>
+                                    <x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
+                                </div>
+                                <div class="flex">
+                                    @if( count($formData['mail_recipients']) > 1)
+                                        <button
+                                            class="cursor-pointer text-sm text-red-500 disabled:cursor-default disabled:opacity-0 py-3 mx-2 self-end"
+                                            type="button"
+                                            x-bind:disabled="!showMail"
+                                            wire:click="deleteEmailRecipient({{ $key }})"
+                                            wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
+                                        >
+                                            Delete
+                                        </button>
+                                    @endif
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                    <div x-show="showMail" class="flex">
+                        <x-secondary-button class="mr-3"
+                                            type="button"
+                                            wire:click="addEmailRecipient"
+                        >
+                            {{ __('Add recipient') }}
+                        </x-secondary-button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
     <div class="flex justify-end items-center py-4">
         <span>
diff --git a/laravel_app/resources/views/projects/show.blade.php b/laravel_app/resources/views/projects/show.blade.php
index f69dc85..ad225ff 100644
--- a/laravel_app/resources/views/projects/show.blade.php
+++ b/laravel_app/resources/views/projects/show.blade.php
@@ -4,9 +4,10 @@
             {{ __('Project') }} {{ $project->name}}
         </h2>
     </x-slot>
-    <div id="main" class="flex">
+{{--  TODO search bar blinking --}}
+    <div id="main" class="flex flex-col md:flex-row w-full min-h-screen shadow rounded-lg overflow-hidden">
         <livewire:projects.menu :project-name="$project->name" :project-id="$project->id"  :active-tab="$currentTab"></livewire:projects.menu>
-        <div class="flex-1 p-4 ml-2 rounded-lg bg-white shadow">
+        <div class="flex-1 p-4 bg-white md:w-3/4">
             @switch($currentTab)
                 @case('downloads')
                         <livewire:projects.tabs.download :project="$project"></livewire:projects.tabs.download>