{{--
    Content card — docs/wireframes-v12/view-project.html (~line 418).

    Usage:
        <x-card title="Basic Information" icon="fa-solid fa-city" class="mb-4">
            <x-slot:toolbar>...buttons or hint text...</x-slot:toolbar>
            ...body...
        </x-card>

    The header is omitted entirely when neither a title nor a toolbar is given,
    so the component also serves as a plain body-only card.

    ---
    CR-2 (spec §12). Three changes, all so the wireframe's own CSS reaches this
    markup:

      * The heading is an <h5>. `.card-header h5` is the selector style.css
        sizes card titles with — nothing else does — so an <h3> was styled only
        by theme-a.css's Metronic bridge and would lose its size the day that
        file goes. It keeps the `card-title` class: that is the name the
        component tests and any caller's CSS address it by.
      * `fw-bold` is gone. The wireframe's card title is 600, and `fw-bold` is
        Bootstrap's 700-with-!important, which beat the stylesheet. Weight now
        comes from the wireframe rule alone.
      * `icon` is new and optional. v12 puts a primary-coloured FontAwesome
        glyph before most card titles; passing it here keeps that out of every
        caller's markup. Rendered aria-hidden — it repeats the title.
--}}
@props([
    'title' => null,
    'icon' => null,
])

<div {{ $attributes->merge(['class' => 'card']) }}>
    @if (filled($title) || isset($toolbar))
        <div class="card-header">
            <h5 class="card-title">
                @if (filled($icon))
                    <i class="{{ $icon }}" aria-hidden="true"></i>
                @endif
                {{ $title }}
            </h5>
            @isset($toolbar)
                <div class="card-toolbar">{{ $toolbar }}</div>
            @endisset
        </div>
    @endif
    <div class="card-body">
        {{ $slot }}
    </div>
</div>