{{--
  Dashboard shell (design: Dashboard). 248px sidebar + 64px top bar; below
  1024px the sidebar becomes the bottom tab bar.
--}}
@extends('layouts.base')
@section('noindex', true)

@php
  $u = $shell['user'];
  $c = $shell['counts'];
  $is = fn (string ...$patterns) => request()->routeIs(...$patterns) ? 'is-active' : '';
@endphp

@section('body')
<div class="app-shell">
  <aside class="iq-sidebar app-sidebar" aria-label="Dashboard">
    <div style="padding:4px 10px 16px"><a href="{{ route('dashboard') }}" aria-label="Overview"><x-iq.logo /></a></div>
    <a class="iq-side-item {{ $is('dashboard') }}" href="{{ route('dashboard') }}"><x-iq.icon name="home" /> Overview</a>
    <a class="iq-side-item {{ $is('builder.*', 'profile.*') }}" href="{{ route('builder.show') }}"><x-iq.icon name="user" /> My Profile</a>
    <div class="iq-side-label">Content</div>
    <a class="iq-side-item {{ $is('companies.*') }}" href="{{ route('companies.index') }}"><x-iq.icon name="building" /> Companies<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['companies'] }}</span></a>
    <a class="iq-side-item {{ $is('products.*') }}" href="{{ route('products.index') }}"><x-iq.icon name="box" /> Products<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['products'] }}</span></a>
    <a class="iq-side-item {{ $is('projects.*') }}" href="{{ route('projects.index') }}"><x-iq.icon name="folder" /> Projects<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['projects'] }}</span></a>
    <a class="iq-side-item {{ $is('metrics.*') }}" href="{{ route('metrics.index') }}"><x-iq.icon name="gauge" /> Metrics<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['metrics'] }}</span></a>
    <a class="iq-side-item {{ $is('milestones.*') }}" href="{{ route('milestones.index') }}"><x-iq.icon name="flag" /> Milestones</a>
    <a class="iq-side-item {{ $is('testimonials.*') }}" href="{{ route('testimonials.index') }}"><x-iq.icon name="quote" /> Testimonials<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['testimonials'] }}</span></a>
    <a class="iq-side-item {{ $is('links.*') }}" href="{{ route('links.index') }}"><x-iq.icon name="link" /> Links<span class="tag iq-num iq-muted" style="font-size:12px">{{ $c['links'] }}</span></a>
    <div class="iq-side-label">Grow</div>
    <a class="iq-side-item {{ $is('analytics.*') }}" href="{{ route('analytics.index') }}"><x-iq.icon name="chart" /> Analytics</a>
    <a class="iq-side-item {{ $is('verification.*') }}" href="{{ route('verification.index') }}"><x-iq.icon name="shield" /> Verification</a>
    <div class="iq-side-label">Account</div>
    <a class="iq-side-item {{ $is('billing.*', 'checkout.*') }}" href="{{ route('billing.index') }}"><x-iq.icon name="card" /> Billing</a>
    <a class="iq-side-item {{ $is('settings.*') }}" href="{{ route('settings.show') }}"><x-iq.icon name="settings" /> Settings</a>
    @can('access-admin')
    <a class="iq-side-item" href="{{ route('admin.dashboard') }}"><x-iq.icon name="lock" /> Admin</a>
    @endcan
    <div style="height:24px"></div>
    @if ($shell['tier'] === 'free')
    <div style="margin-top:auto;padding:16px;border-radius:14px;background:var(--accent-50);color:var(--accent-ink);display:flex;flex-direction:column;gap:8px">
      <span class="iq-badge iq-badge-pro" style="align-self:flex-start;background:var(--surface-1)">Pro</span>
      <div style="font-size:13px;line-height:20px;font-weight:500">Custom domain, verification and 12-month analytics.</div>
      <a class="iq-btn iq-btn-ink iq-btn-sm" href="{{ route('checkout.show', 'pro-yearly') }}">Upgrade{{ $shell['pro_monthly'] ? ' · '.$shell['pro_monthly'].'/mo' : '' }}</a>
    </div>
    @endif
  </aside>

  <div class="app-main">
    <header class="iq-topbar app-topbar">
      <h1 style="margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em">@yield('heading')</h1>
      <span class="grow"></span>
      @yield('topbar')
      <span class="iq-urlpill app-hide-sm">@if($shell['published'])<span class="live"></span>@endif{{ $shell['url_display'] }}<button type="button" class="iq-btn iq-btn-quiet iq-btn-sm" style="height:24px;padding:0 8px" data-copy="{{ $shell['url'] }}" aria-label="Copy link"><x-iq.icon name="copy" size="sm" /></button></span>
      <a class="iq-btn iq-btn-secondary iq-btn-sm app-hide-sm" href="{{ $shell['published'] ? $shell['url'] : route('builder.show') }}" @if($shell['published']) target="_blank" rel="noopener" @endif><x-iq.icon name="eye" /> {{ $shell['published'] ? 'View profile' : 'Preview' }}</a>
      <a class="iq-btn iq-btn-quiet iq-btn-icon {{ $shell['unread'] ? 'iq-bell' : '' }}" href="{{ route('notifications.index') }}" aria-label="Notifications{{ $shell['unread'] ? ' ('.$shell['unread'].' unread)' : '' }}"><x-iq.icon name="bell" /></a>
      <div class="app-menu-wrap">
        <button type="button" class="app-avatar-btn" data-menu-toggle aria-haspopup="menu" aria-expanded="false" aria-label="Account menu"><x-iq.avatar :name="$u->name" :src="$u->avatar_url" size="sm" /></button>
        <div class="iq-menu app-menu" role="menu" hidden>
          <div class="iq-menu-head"><div style="font-weight:600;font-size:14px">{{ $u->name }}</div><div class="iq-muted" style="font-size:13px">{{ $u->email }}</div></div>
          <div class="iq-menu-sep"></div>
          <a class="iq-menu-item" role="menuitem" href="{{ $shell['url'] }}" target="_blank" rel="noopener"><x-iq.icon name="user" /> View public profile</a>
          <a class="iq-menu-item" role="menuitem" href="{{ route('profile.edit') }}"><x-iq.icon name="edit" /> Edit profile</a>
          <a class="iq-menu-item" role="menuitem" href="{{ route('billing.index') }}"><x-iq.icon name="card" /> Billing</a>
          <a class="iq-menu-item" role="menuitem" href="{{ route('settings.show') }}"><x-iq.icon name="settings" /> Settings</a>
          <div class="iq-menu-sep"></div>
          <form method="POST" action="{{ route('logout') }}">@csrf<button type="submit" class="iq-menu-item danger" role="menuitem" style="width:100%;border:0;background:none"><x-iq.icon name="logout" /> Log out</button></form>
        </div>
      </div>
    </header>

    <div class="app-banners">
      @unless ($u->hasVerifiedEmail())
        <div class="iq-banner warning"><x-iq.icon name="mail" /><div><b>Confirm your email.</b> We sent a link to {{ $u->email }}. You can build now; publishing needs a confirmed address.
          <form method="POST" action="{{ route('verification.send') }}" style="display:inline">@csrf<button class="iq-link" style="border:0;background:none;padding:0;cursor:pointer;font:inherit">Resend link</button></form></div></div>
      @endunless
      @include('partials.billing-banner')
      @if ($shell['profile']?->isAdminLocked())
        <div class="iq-banner danger"><x-iq.icon name="alert" /><div><b>Your profile was unpublished after a review.</b> {{ $shell['profile']->admin_lock_reason }} Your content is kept. Contact support to request a re-review.</div></div>
      @endif
    </div>

    <main class="app-content">@yield('content')</main>
  </div>
</div>

<nav class="iq-tabbar app-tabbar" aria-label="Dashboard">
  <a href="{{ route('dashboard') }}" class="{{ $is('dashboard') }}"><x-iq.icon name="home" size="lg" />Home</a>
  <a href="{{ route('builder.show') }}" class="{{ $is('builder.*', 'profile.*', 'companies.*', 'products.*', 'projects.*', 'metrics.*', 'milestones.*', 'testimonials.*', 'links.*') }}"><x-iq.icon name="edit" size="lg" />Build</a>
  <a href="{{ route('analytics.index') }}" class="{{ $is('analytics.*', 'verification.*') }}"><x-iq.icon name="chart" size="lg" />Insights</a>
  <a href="{{ route('settings.show') }}" class="{{ $is('settings.*', 'billing.*', 'notifications.*') }}"><x-iq.icon name="user" size="lg" />Account</a>
</nav>

<x-iq.toasts />
@endsection