@extends('layouts.app')

@section('title', 'Permission Details')

@section('content')
<div class="container-fluid">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Permission: {{ $permission->name }}</h5>
      <div>
        @can('edit permissions')
          <a href="{{ route('permissions.edit', $permission) }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-pencil"></i> Edit</a>
        @endcan
        @can('delete permissions')
          <button class="btn btn-outline-danger btn-sm" onclick="confirmDelete('{{ route('permissions.destroy', $permission) }}')"><i class="bi bi-trash"></i> Delete</button>
        @endcan
      </div>
    </div>

    <div class="card-body">
      <dl class="row">
        <dt class="col-sm-3">ID</dt>
        <dd class="col-sm-9">{{ $permission->id }}</dd>

        <dt class="col-sm-3">Name</dt>
        <dd class="col-sm-9">{{ $permission->name }}</dd>

        <dt class="col-sm-3">Guard</dt>
        <dd class="col-sm-9">{{ $permission->guard_name }}</dd>

        <dt class="col-sm-3">Created</dt>
        <dd class="col-sm-9">{{ $permission->created_at }}</dd>
      </dl>
    </div>
  </div>

  @include('partials._delete_modal')
</div>
@endsection