<div id="{{ $anchor }}" {{ $attributes->class(["mb-10", "mary-header-anchor" => $withAnchor]) }}>
    <div class="flex flex-wrap gap-5 justify-between items-center">
        <div>
            {!! "<{$titleTag}" !!} @class(["flex", "items-center", "$size $weight", is_string($title) ? '' : $title?->attributes->get('class') ]) >
                @if($withAnchor)
                    <a href="#{{ $anchor }}">
                @endif

                @if($icon)
                    <x-mary-icon name="{{ $icon }}" class="{{ $iconClasses }}" />
                @endif

                <span @class(["ml-2" => $icon])>{{ $title }}</span>

                @if($withAnchor)
                    </a>
                @endif
            {!! "</{$titleTag}>" !!}

            @if($subtitle)
                <div @class(["text-base-content/50 text-sm mt-1", is_string($subtitle) ? '' : $subtitle?->attributes->get('class') ]) >
                    {{ $subtitle }}
                </div>
            @endif
        </div>

        @if($middle)
            <div @class(["flex items-center justify-center gap-3 grow order-last sm:order-none", is_string($middle) ? '' : $middle?->attributes->get('class')])>
                <div class="w-full lg:w-auto">
                    {{ $middle }}
                </div>
            </div>
        @endif

        @if($actions)
            <div @class(["flex items-center gap-3", is_string($actions) ? '' : $actions?->attributes->get('class') ]) >
                {{ $actions }}
            </div>
        @endif
    </div>

    @if($separator)
        <hr class="border-t-[length:var(--border)] border-base-content/10 mt-3" />

        @if($progressIndicator)
            <div class="h-0.5 -mt-4 mb-4">
                <progress
                    class="progress {{ $progressIndicatorClass }} w-full h-[var(--border)]"
                    wire:loading

                    @if($progressTarget())
                        wire:target="{{ $progressTarget() }}"
                     @endif></progress>
            </div>
        @endif
    @endif
</div>