@extends('layouts.app')

@push('css_lib')
    <!-- Use a minimalistic CSS framework like Tailwind CSS for modern, clean designs -->
    <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_create') }}</li>
        </ol>
    </nav>

    <div class="mt-6 bg-white shadow-md rounded-lg">
        {!! Form::open(['route' => 'specialities.store', 'class' => 'p-4']) !!}
            <div class="grid grid-cols-1 gap-4">
                @include('specialities.fields')
            </div>
            <div class="mt-4 flex justify-end">
                <button type="submit" class="btn 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')
    <!-- Optionally include a minimal set of JavaScript utilities like Alpine.js for interactivity -->
    <script src="{{ asset('vendor/alpinejs/alpine.min.js') }}"></script>
@endpush