@extends('layouts.app')

@push('css_lib')
    <!-- Use Tailwind CSS for a modern and minimal design -->
    <link rel="stylesheet" href="{{ asset('vendor/tailwindcss/tailwind.min.css') }}">
@endpush

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="mb-4">
        <h1 class="text-2xl font-bold text-gray-900">{{ trans('lang.speciality_plural') }}</h1>
        <p class="text-sm text-gray-600">{{ trans('lang.speciality_desc') }}</p>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb list-reset flex text-grey-dark">
            <li><a href="{{ url('/dashboard') }}" class="text-blue-600 hover:text-blue-700">{{ trans('lang.dashboard') }}</a></li>
            <li><span class="mx-2">/</span></li>
            <li><a href="{{ route('specialities.index') }}" class="text-blue-600 hover:text-blue-700">{{ trans('lang.speciality_plural') }}</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-500">{{ trans('lang.speciality_edit') }}</li>
        </ol>
    </nav>


    <div class="bg-white shadow-md rounded-lg p-4 mt-6">
        {!! Form::model($speciality, ['route' => ['specialities.update', $speciality->id], 'method' => 'patch']) !!}
            <div class="grid grid-cols-1 gap-4">
                @include('specialities.fields')
            </div>
            <div class="mt-4 flex justify-end">
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    {{ trans('lang.save') }}
                </button>
            </div>
        {!! Form::close() !!}
    </div>
</div>
@endsection

@push('scripts_lib')
    <!-- Keep scripts minimal; use Alpine.js for interactivity if needed -->
    <script src="{{ asset('vendor/alpinejs/alpine.min.js') }}"></script>
@endpush