@extends('layouts.app')

@section('title', $designation->title)
@section('header', $designation->title)
@section('subheader', 'Designation details')

@section('header-actions')
    @can('update', $designation)
        <a href="{{ route('designations.edit', $designation) }}" class="btn btn-outline-secondary">
            <i class="bi bi-pencil me-1"></i>Edit
        </a>
    @endcan
@endsection

@section('content')
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card table-wrapper">
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-3">Title</dt>
                        <dd class="col-sm-9">{{ $designation->title }}</dd>

                        <dt class="col-sm-3">Department</dt>
                        <dd class="col-sm-9">{{ $designation->department?->name ?? '—' }}</dd>

                        <dt class="col-sm-3">Status</dt>
                        <dd class="col-sm-9"><x-status-badge :status="$designation->is_active ? 'active' : 'inactive'" /></dd>

                        <dt class="col-sm-3">Employees</dt>
                        <dd class="col-sm-9">{{ $designation->employees_count ?? $designation->employees()->count() }}</dd>

                        <dt class="col-sm-3">Description</dt>
                        <dd class="col-sm-9">{{ $designation->description ?: '—' }}</dd>

                        <dt class="col-sm-3">Created</dt>
                        <dd class="col-sm-9">{{ $designation->created_at->format('M d, Y') }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
@endsection