<div class="card shadow-sm mb-4 border-0">
    <div class="card-body">

        {{-- HEADER --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center gap-2">
                <h4 class="fw-bold mb-0">
                    Institution Details
                </h4>
            </div>

            @can('edit', $institution)
                <x-ui.button href="{{ route('institutions.edit', $institution) }}" class="btn-sm">
                    <i class="mdi mdi-pencil"></i>
                </x-ui.button>
            @endcan
        </div>

        {{-- DETAILS --}}
        <div class="d-flex flex-column gap-2">

            <div class="d-flex align-items-center gap-2">
                <i class="mdi mdi-pound text-muted"></i>
                <span>{{ $institution->displayId }}</span>
            </div>

            <div class="d-flex align-items-center gap-2">
                <i class="mdi mdi-account-search text-muted"></i>
                <span>
                    @if($institution->is_prioritised)
                        <span class="mdi mdi-earth text-warning me-1" title="Prioritised"></span>
                    @endif
                    {{ $institution->display_name }}
                </span>
            </div>

            <div class="d-flex align-items-center gap-2">
                <i class="mdi mdi-account-search text-muted"></i>
                <span>{{ $institution->dsarType?->display_name }}</span>
            </div>

            <div class="d-flex align-items-center gap-2">
                <i class="mdi mdi-email text-muted"></i>
                <span>{{ ucwords($institution->send_type ?: 'N/A') }}</span>
            </div>
        </div>


        <livewire:tag.tag-assigner :model="$institution"/>

    </div>
</div>
