@php
    $look = \App\Services\Appearance::all();
    $fontHref = \App\Services\Appearance::fontHref($look);
    $logo = \App\Services\Appearance::logoUrl($look);
    $accentHex = \App\Services\Appearance::accentHex($look);
@endphp

<link rel="icon" href="{{ $logo ?? 'data:image/svg+xml,'.rawurlencode("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='{$accentHex}'/><text x='16' y='23' font-family='Arial,Helvetica,sans-serif' font-size='18' font-weight='700' fill='white' text-anchor='middle'>".e(\Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr(\App\Services\Appearance::appName($look), 0, 1)))."</text></svg>") }}">

@if ($fontHref)
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="{{ $fontHref }}" rel="stylesheet" />
@endif

{{-- Applied before first paint so there is no flash of the wrong mode or colour. --}}
<script>
    (function () {
        var root = document.documentElement;
        var adminMode = @json($look['theme_mode']);
        var personal = null;
        try { personal = @json($look['allow_user_theme']) ? localStorage.getItem('erp-theme') : null; } catch (e) {}
        var mode = personal || adminMode;
        var dark = mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        root.classList.toggle('dark', dark);
        root.setAttribute('data-sidebar', @json($look['sidebar_style']));
        root.setAttribute('data-buttons', @json($look['button_style']));
        root.setAttribute('style', @json(\App\Services\Appearance::htmlStyle($look)));
    })();
</script>