@php
    $nextApplicationCode = str_pad((\App\Models\Application::query()->withTrashed()->max('id') ?? 0) + 1, 5, '0', STR_PAD_LEFT);
@endphp

<style>
    .top-navigation-layout {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .top-navigation-action {
        align-self: flex-start;
    }

    .top-navigation-search {
        width: 100%;
    }

    @media (max-width: 767px) {
        .top-navigation-action {
            color: #ffffff !important;
        }

        .top-navigation-action svg {
            color: #ffffff;
        }

        .top-navigation-search [data-flux-input] input {
            color: #18181b;
        }

        .top-navigation-search [data-flux-input] input::placeholder {
            color: #52525b;
        }
    }

    @media (min-width: 768px) {
        .top-navigation-layout {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .top-navigation-search {
            width: auto;
        }
    }
</style>

<div class="top-navigation-layout bg-gray-50 p-2 border border-gray-100 rounded-xl">
    <flux:button variant="primary" class="top-navigation-action bg-blue-800" x-on:click="$openModal('create-new-application')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
        </svg>
        {{ __('messages.applications.create') }}
    </flux:button>

    <x-modal name="create-new-application" blur="sm">
        <x-card class="z-50">
            <livewire:applications.applications-create />
        </x-card>
    </x-modal>

    <div class="top-navigation-search">
        <livewire:components.nav-search />
    </div>
</div>