@extends('layouts.user')

@section('content')

@php
    $user        = auth()->user();
    $activeSub   = $user->subscriptions->where('status', 'active')->sortByDesc('expires_at')->first();
    $totalSpent  = $user->subscriptions->sum('amount');
    $totalKeys   = $user->apiKeys->count();
    $activeKeys  = $user->apiKeys->where('status', 'active')->count();

    /* ── Subscription time helpers ── */
    $daysLeft     = null;
    $isExpired    = false;
    $expiringSoon = false;
    $progressPct  = 0;

    if ($activeSub) {
        $daysLeft     = (int) now()->diffInDays($activeSub->expires_at, false);
        $isExpired    = now()->isAfter($activeSub->expires_at);
        $expiringSoon = !$isExpired && $daysLeft <= 7;

        if ($activeSub->starts_at && $activeSub->expires_at) {
            $total       = max(1, $activeSub->starts_at->diffInDays($activeSub->expires_at));
            $elapsed     = $activeSub->starts_at->diffInDays(now());
            $progressPct = min(100, round(($elapsed / $total) * 100));
        }
    }

    /* ── Human-readable time helper ── */
    function humanTime(int $days): string {
        if ($days <= 0)  return 'Expired';
        if ($days === 1) return '1 day left';
        if ($days < 7)   return $days . ' days left';
        if ($days < 14)  return '1 week left';
        if ($days < 30)  return round($days / 7) . ' weeks left';
        if ($days < 60)  return '1 month left';
        if ($days < 365) return round($days / 30) . ' months left';
        return round($days / 365, 1) . ' years left';
    }
@endphp

{{-- PAGE HEADER --}}
<div class="mb-5">
    <p class="text-muted mb-1" style="font-size:13px;letter-spacing:.5px;">
        {{ now()->format('l, d F Y') }}
    </p>
    <div class="page-header-accent">
        <h2 class="fw-bold mb-0" style="letter-spacing:-0.5px;">
            Welcome back, {{ explode(' ', $user->name)[0] }}
        </h2>
        <p class="text-muted mb-0 mt-1" style="font-size:13px;">Here's an overview of your Tab Hider account.</p>
    </div>
</div>

{{-- ══════════════════════════════════
     STAT CARDS ROW
══════════════════════════════════ --}}
<div class="row g-3 mb-4">
    {{-- Plan Status --}}
    <div class="col-6 col-md-3">
        <div class="panel-canvas p-3 h-100">
            <p class="text-muted mb-1" style="font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;">Plan</p>
            @if($activeSub)
                <p class="fw-bold mb-0 text-capitalize" style="font-size:17px;">{{ $activeSub->plan_type }}</p>
                <p class="text-muted mb-0" style="font-size:12px;">Premium</p>
            @else
                <p class="fw-bold mb-0" style="font-size:17px;">Free</p>
                <p class="text-muted mb-0" style="font-size:12px;">No active plan</p>
            @endif
        </div>
    </div>
    {{-- Total Spent --}}
    <div class="col-6 col-md-3">
        <div class="panel-canvas p-3 h-100">
            <p class="text-muted mb-1" style="font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;">Total Spent</p>
            <p class="fw-bold mb-0" style="font-size:17px;">${{ number_format($totalSpent, 2) }}</p>
            <p class="text-muted mb-0" style="font-size:12px;">{{ $user->subscriptions->count() }} purchase{{ $user->subscriptions->count() == 1 ? '' : 's' }}</p>
        </div>
    </div>
    {{-- API Keys --}}
    <div class="col-6 col-md-3">
        <div class="panel-canvas p-3 h-100">
            <p class="text-muted mb-1" style="font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;">API Keys</p>
            <p class="fw-bold mb-0" style="font-size:17px;">{{ $totalKeys }}</p>
            <p class="text-muted mb-0" style="font-size:12px;">{{ $activeKeys }} active</p>
        </div>
    </div>
    {{-- Next Billing --}}
    <div class="col-6 col-md-3">
        <div class="panel-canvas p-3 h-100 {{ $isExpired ? 'border-danger' : ($expiringSoon ? 'border-warning' : '') }}" style="{{ ($isExpired || $expiringSoon) ? 'border-width:1.5px !important;' : '' }}">
            <p class="text-muted mb-1" style="font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;">Next Billing</p>
            @if($activeSub)
                <p class="fw-bold mb-0 {{ $isExpired ? 'text-danger' : ($expiringSoon ? 'text-warning' : 'text-dark') }}" style="font-size:17px;">
                    {{ $activeSub->expires_at->format('d M Y') }}
                </p>
                <p class="text-muted mb-0" style="font-size:12px;">
                    {{ $isExpired ? 'Expired' : humanTime($daysLeft) }}
                </p>
            @else
                <p class="fw-bold mb-0 text-muted" style="font-size:17px;">—</p>
                <p class="text-muted mb-0" style="font-size:12px;">No active plan</p>
            @endif
        </div>
    </div>
</div>

{{-- ══════════════════════════════════
     EXPIRING SOON URGENT WARNING BANNER
══════════════════════════════════ --}}
@if($activeSub && $expiringSoon)
    <div class="alert alert-warning border-warning border-opacity-50 bg-warning bg-opacity-10 d-flex align-items-center gap-3 p-3 mb-4 rounded-3" role="alert" style="box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08);">
        <span class="d-flex align-items-center justify-content-center bg-warning text-dark rounded-circle" style="width: 32px; height: 32px; font-size: 16px; animation: pulse-warning 1.8s infinite;">⚠️</span>
        <div>
            <h6 class="alert-heading fw-bold mb-1" style="color: #9a3412; font-size: 14px;">Your Tab Hider Premium Key is Expiring Soon!</h6>
            <p class="mb-0 text-dark-emphasis small">
                Your key will expire in <strong>{{ humanTime($daysLeft) }}</strong> on <strong>{{ $activeSub->expires_at->format('d M Y') }}</strong>. Please renew to ensure uninterrupted panic-defense protection.
            </p>
        </div>
        <a href="{{ url('/#pricing') }}" class="btn btn-warning btn-sm ms-auto fw-bold text-dark px-3 py-2" style="border-radius:6px; font-size:12px;">Renew Key Now</a>
    </div>
    <style>
        @keyframes pulse-warning {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
            70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
        }
    </style>
@endif

{{-- ══════════════════════════════════
     MAIN GRID
══════════════════════════════════ --}}
<div class="row g-4">

    {{-- ── LEFT COLUMN ── --}}
    <div class="col-md-4">

        {{-- Profile Card --}}
        <div class="panel-canvas p-4 text-center mb-4">
            @if($user->profile_picture && !str_starts_with($user->profile_picture, 'avt') && file_exists(public_path('assets/img/avatars/' . $user->profile_picture)))
                <img src="{{ asset('assets/img/avatars/' . $user->profile_picture) }}"
                     alt="Profile" class="rounded-circle mb-3"
                     width="100" height="100" style="object-fit:cover;border:3px solid #e4e4e7;">
            @else
                <div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-3 fw-bold"
                     style="width:100px;height:100px;font-size:2.5rem;color:#fff;background:linear-gradient(135deg,#18181b,#52525b);border:3px solid #e4e4e7;text-transform:uppercase;">
                    {{ strtoupper(substr($user->name ?: $user->email ?: 'U', 0, 1)) }}
                </div>
            @endif
            <h5 class="fw-bold mb-1">{{ $user->name }}</h5>
            <p class="text-muted mb-2" style="font-size:13px;">{{ $user->email }}</p>
            <span class="badge" style="background:#f4f4f5;color:#52525b;font-weight:500;font-size:11px;">
                Member since {{ $user->created_at->format('M Y') }}
            </span>

            <div class="d-grid gap-2 mt-3">
                @can('update_user_management')
                    <a href="{{ route('profile.edit') }}" class="btn-steel-secondary text-center" style="font-size:13px;padding:8px 16px;">
                        Edit Profile
                    </a>
                @endcan
                <a href="{{ route('user.keys') }}" class="btn-steel-secondary text-center" style="font-size:13px;padding:8px 16px;">
                    Manage API Keys
                </a>
            </div>
        </div>

        {{-- Subscription Progress Card --}}
        @if($activeSub)
        <div class="panel-canvas p-4 mb-4">
            <p class="fw-semibold mb-3 text-uppercase" style="font-size:10px;letter-spacing:1.8px;color:#888;">
                Active Subscription
            </p>

            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="fw-bold text-capitalize" style="font-size:15px;">
                    {{ $activeSub->plan_type }} Premium
                </span>
                @if($isExpired)
                    <span class="badge bg-danger">Expired</span>
                @elseif($expiringSoon)
                    <span class="badge bg-warning text-dark">Expiring Soon</span>
                @else
                    <span class="badge bg-success">Active</span>
                @endif
            </div>

            <div class="progress mb-2" style="height:5px;border-radius:99px;background:#f4f4f5;">
                <div class="progress-bar {{ $isExpired ? 'bg-danger' : ($expiringSoon ? 'bg-warning' : 'bg-success') }}"
                     role="progressbar" style="width:{{ $progressPct }}%;border-radius:99px;">
                </div>
            </div>

            <div class="d-flex justify-content-between mb-3" style="font-size:11px;color:#aaa;">
                <span>{{ $activeSub->starts_at->format('d M Y') }}</span>
                <span>{{ $activeSub->expires_at->format('d M Y') }}</span>
            </div>

            {{-- Human readable countdown --}}
            @if(!$isExpired)
            <div class="text-center py-2 rounded-3" style="background:#f9f9f9;border:1px solid #efefef;">
                <span class="fw-bold" style="font-size:22px;letter-spacing:-0.5px;color:{{ $expiringSoon ? '#d97706' : '#16a34a' }};">
                    {{ humanTime($daysLeft) }}
                </span>
            </div>
            @else
            <div class="alert alert-danger py-2 px-3 mb-0 text-center small">
                Subscription expired · <a href="{{ url('/#pricing') }}" class="alert-link">Renew now →</a>
            </div>
            @endif

            <div class="mt-3 pt-3" style="font-size:12px;color:#888;">
                <div class="d-flex justify-content-between mb-1">
                    <span>Amount paid</span>
                    <span class="fw-semibold text-dark">${{ number_format($activeSub->amount, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Order ID</span>
                    <span class="fw-semibold text-dark" style="font-family:monospace;font-size:11px;">{{ Str::limit($activeSub->paypal_order_id, 16, '…') }}</span>
                </div>
            </div>
        </div>
        @else
        {{-- No Subscription CTA --}}
        <div class="panel-canvas p-4 text-center mb-4" style="background:linear-gradient(135deg,#fafafa,#f4f4f5);">
            <div class="mb-3" style="font-size:2.5rem;">🚀</div>
            <h6 class="fw-bold mb-2">Unlock Premium Access</h6>
            <p class="text-muted small mb-3">Get your personal API key and enable full Tab Hider capabilities.</p>
            <a href="{{ url('/#pricing') }}" class="btn-steel-primary" style="font-size:13px;padding:10px 24px;">
                View Plans
            </a>
        </div>
        @endif

        {{-- Quick Tips Card --}}
        <div class="panel-canvas p-4">
            <p class="fw-semibold mb-3 text-uppercase" style="font-size:10px;letter-spacing:1.8px;color:#888;">
                Quick Tips
            </p>
            <div class="d-flex flex-column gap-3" style="font-size:13px;">
                <div class="d-flex gap-3 align-items-start">
                    <span class="d-flex align-items-center justify-content-center rounded-circle fw-bold flex-shrink-0"
                          style="width:22px;height:22px;font-size:10px;background:#f4f4f5;color:#52525b;">1</span>
                    <p class="text-muted mb-0">Paste your API key into the Tab Hider extension settings to activate premium features.</p>
                </div>
                <div style="height:1px;background:#f4f4f5;"></div>
                <div class="d-flex gap-3 align-items-start">
                    <span class="d-flex align-items-center justify-content-center rounded-circle fw-bold flex-shrink-0"
                          style="width:22px;height:22px;font-size:10px;background:#f4f4f5;color:#52525b;">2</span>
                    <p class="text-muted mb-0">Rotate your key anytime if you suspect it has been compromised.</p>
                </div>
                <div style="height:1px;background:#f4f4f5;"></div>
                <div class="d-flex gap-3 align-items-start">
                    <span class="d-flex align-items-center justify-content-center rounded-circle fw-bold flex-shrink-0"
                          style="width:22px;height:22px;font-size:10px;background:#f4f4f5;color:#52525b;">3</span>
                    <p class="text-muted mb-0">Renew before expiry to avoid any interruption to your service.</p>
                </div>
            </div>
            <a href="{{ url('/#faq') }}" class="d-block text-center mt-4" style="font-size:12px;color:#52525b;text-decoration:none;border:1px solid #e4e4e7;border-radius:8px;padding:8px 0;transition:all 0.2s;" onmouseover="this.style.background='#f9f9f9'" onmouseout="this.style.background='transparent'">View Full FAQ</a>
        </div>
    </div>

    {{-- ── RIGHT COLUMN ── --}}
    <div class="col-md-8">

        {{-- Flash Messages --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- API Keys Summary --}}
        @if($user->apiKeys->isNotEmpty())
        <div class="panel-canvas p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-0">My API Keys</h5>
                    <p class="text-muted mb-0 mt-1" style="font-size:12px;">{{ $activeKeys }} of {{ $totalKeys }} active</p>
                </div>
                <a href="{{ route('user.keys') }}" class="btn-steel-secondary" style="font-size:12px;padding:7px 16px;">
                    Manage All →
                </a>
            </div>

            @foreach($user->apiKeys as $key)
            @php
                $keySub      = $key->subscription;
                $keyExpiry   = $keySub ? $keySub->expires_at : null;
                $keyDaysLeft = $keyExpiry ? (int) now()->diffInDays($keyExpiry, false) : null;
                $keyExpired  = $keyExpiry && now()->isAfter($keyExpiry);
                $keySoon     = !$keyExpired && $keyDaysLeft !== null && $keyDaysLeft <= 7;
            @endphp
            <div class="rounded-3 p-3 mb-3" style="background:#fafafa;border:1px solid #efefef;">
                <div class="d-flex align-items-start justify-content-between gap-3">
                    <div class="flex-grow-1 min-width-0">
                        {{-- Key badge --}}
                        <div class="mb-2">
                            <code class="px-2 py-1 rounded" style="background:#f0f0f0;font-size:12px;color:#18181b;word-break:break-all;">{{ $key->key }}</code>
                        </div>
                        {{-- Meta row --}}
                        <div class="d-flex flex-wrap gap-3" style="font-size:12px;color:#888;">
                            @if($keySub)
                            <span class="text-capitalize">{{ $keySub->plan_type }} Premium</span>
                            @endif
                            @if($keyExpiry)
                            <span class="{{ $keyExpired ? 'text-danger fw-semibold' : ($keySoon ? 'text-warning fw-semibold' : '') }}">
                                Expires {{ $keyExpiry->format('d M Y') }}
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="text-end flex-shrink-0">
                        @if($keyExpired)
                            <span class="badge bg-danger mb-1">Expired</span>
                        @elseif($key->status == 'active')
                            <span class="badge bg-success mb-1">Active</span>
                        @else
                            <span class="badge bg-secondary mb-1">Disabled</span>
                        @endif
                        @if($keyDaysLeft !== null && !$keyExpired)
                        <div class="mt-1">
                            <span class="badge {{ $keySoon ? 'bg-warning text-dark' : 'bg-success bg-opacity-10 text-success' }}" style="font-size:10px;">
                                {{ humanTime($keyDaysLeft) }}
                            </span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Purchase History --}}
        <div class="panel-canvas p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-0">Purchase History</h5>
                    <p class="text-muted mb-0" style="font-size:12px;">All your subscription transactions</p>
                </div>
                @if($user->subscriptions->isEmpty())
                <a href="{{ url('/#pricing') }}" class="btn-steel-primary" style="font-size:12px;padding:7px 16px;">
                    Get a Plan
                </a>
                @endif
            </div>

            @if($user->subscriptions->isEmpty())
                {{-- Empty state --}}
                <div class="text-center py-5">
                    <div style="font-size:3rem;margin-bottom:12px;">🛒</div>
                    <h6 class="fw-bold mb-2">No purchases yet</h6>
                    <p class="text-muted small mb-4">Choose a plan to generate your first API key and unlock premium features.</p>
                    <a href="{{ url('/#pricing') }}" class="btn-steel-primary" style="font-size:13px;">Browse Plans</a>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table align-middle" style="font-size:13px;">
                        <thead>
                            <tr style="border-bottom:2px solid #f4f4f5;">
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Plan</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Status</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Start</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Expires</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Time Left</th>
                                <th class="text-muted fw-semibold pb-3 text-end" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Paid</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($user->subscriptions->sortByDesc('created_at') as $sub)
                            @php
                                $subDays      = (int) now()->diffInDays($sub->expires_at, false);
                                $subExpired   = $sub->expires_at && now()->isAfter($sub->expires_at);
                                $subSoon      = !$subExpired && $sub->expires_at && $subDays <= 7;
                            @endphp
                            <tr>
                                <td class="py-3">
                                    <div class="fw-semibold text-capitalize">{{ $sub->plan_type }} Premium</div>
                                    <div style="font-size:11px;color:#aaa;font-family:monospace;">{{ Str::limit($sub->paypal_order_id, 18, '…') }}</div>
                                </td>
                                <td>
                                    @if($subExpired)
                                        <span class="badge bg-danger">Expired</span>
                                    @else
                                        <span class="badge bg-{{ $sub->status == 'active' ? 'success' : ($sub->status == 'cancelled' ? 'warning' : 'danger') }}">
                                            {{ ucfirst($sub->status) }}
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $sub->starts_at ? $sub->starts_at->format('d M Y') : '—' }}</td>
                                <td>
                                    @if($sub->expires_at)
                                        <span class="{{ $subExpired ? 'text-danger fw-semibold' : ($subSoon ? 'text-warning fw-semibold' : '') }}">
                                            {{ $sub->expires_at->format('d M Y') }}
                                        </span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>
                                    @if($sub->expires_at)
                                        @if($subExpired)
                                            <span class="badge" style="background:#fef2f2;color:#b91c1c;font-size:11px;">Expired</span>
                                        @elseif($subSoon)
                                            <span class="badge" style="background:#fffbeb;color:#d97706;font-size:11px;">{{ humanTime($subDays) }}</span>
                                        @else
                                            <span class="badge" style="background:#f0fdf4;color:#15803d;font-size:11px;">{{ humanTime($subDays) }}</span>
                                        @endif
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="text-end fw-bold">${{ number_format($sub->amount, 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        @if($user->subscriptions->count() > 1)
                        <tfoot>
                            <tr style="border-top:2px solid #f4f4f5;">
                                <td colspan="5" class="pt-3 text-muted" style="font-size:12px;">
                                    {{ $user->subscriptions->count() }} transactions total
                                </td>
                                <td class="pt-3 text-end fw-bold">${{ number_format($totalSpent, 2) }}</td>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>

{{-- RESOURCES STRIP --}}
<div class="row g-3 mt-2">
    <div class="col-md-4">
        <a href="{{ url('/#features') }}" class="panel-canvas p-3 d-flex align-items-center gap-3 text-decoration-none" style="transition:all 0.25s;">
            <div class="d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width:38px;height:38px;background:#f4f4f5;">
                <svg width="16" height="16" fill="none" stroke="#52525b" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
            </div>
            <div>
                <p class="fw-semibold mb-0" style="font-size:13px;color:#09090b;">Extension Features</p>
                <p class="text-muted mb-0" style="font-size:12px;">See what Tab Hider can do</p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ url('/#pricing') }}" class="panel-canvas p-3 d-flex align-items-center gap-3 text-decoration-none" style="transition:all 0.25s;">
            <div class="d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width:38px;height:38px;background:#f4f4f5;">
                <svg width="16" height="16" fill="none" stroke="#52525b" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/></svg>
            </div>
            <div>
                <p class="fw-semibold mb-0" style="font-size:13px;color:#09090b;">Upgrade Plan</p>
                <p class="text-muted mb-0" style="font-size:12px;">View available subscriptions</p>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ route('user.keys') }}" class="panel-canvas p-3 d-flex align-items-center gap-3 text-decoration-none" style="transition:all 0.25s;">
            <div class="d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width:38px;height:38px;background:#f4f4f5;">
                <svg width="16" height="16" fill="none" stroke="#52525b" stroke-width="2" viewBox="0 0 24 24"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
            </div>
            <div>
                <p class="fw-semibold mb-0" style="font-size:13px;color:#09090b;">Manage API Keys</p>
                <p class="text-muted mb-0" style="font-size:12px;">View, rotate or disable your keys</p>
            </div>
        </a>
    </div>
</div>

@endsection