@extends('layouts.master')
@section('content')
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
    <div class="p-8 bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <form action="{{route($route.'.store')}}" method="POST" class="">
            {{csrf_field()}}
            <input type="hidden" name="secure_id" value="{{@$keyId}}">
            
            <div class="flex flex-col p-3 gap-3 border-b">
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Role</label>
                    <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="p-2 bg-white rounded border w-full @error('name') is-invalid @enderror" placeholder="Masukan Nama Role" required>
                    @error('name')
                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Alias</label>
                    <div class="flex flex-col w-full justify-center items-start gap-2">
                        <input type="text" value="{{@$item->alias ? @$item->alias :  old('alias')}}" name="alias" class="p-2 bg-white rounded border w-full @error('alias') is-invalid @enderror" placeholder="Masukan Alias Role" required>
                        <small><i>Pastikan mengandung huruf kecil semua dan tidak ada "spasi" atau tanda baca "-"</i></small>
                    </div>
                    @error('alias')
                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
            </div>
            
            <div class="flex justify-center items-center gap-2 mt-3">
                <a href="{{route($route.'.index')}}" class="bg-red-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Batal</span></a>
                <button type="submit" class="bg-emerald-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="save" class="w-4 h-4 mr-2"></i><span> <span>Simpan</span></button>
            </div>
        </form>
    </div>
</div>
@endsection