@extends('layouts.app')

@section('title', $department->name)
@section('header', $department->name)
@section('subheader', 'Department details')

@section('header-actions')
    @can('update', $department)
        <a href="{{ route('departments.edit', $department) }}" 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">Name</dt>
                        <dd class="col-sm-9">{{ $department->name }}</dd>

                        <dt class="col-sm-3">Code</dt>
                        <dd class="col-sm-9"><span class="badge text-bg-light">{{ $department->code }}</span></dd>

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

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

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

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