@extends('layouts.app_widget')

@section('topbar_actions')
    <a class="btn" href="{{ route('pie-chart.create') }}">Create Pie Chart</a>
@endsection

@section('content')
    <div style="max-width: 1100px; margin: 0 auto;">
        <h1 style="margin: 0 0 16px 0;">Pie Chart Widgets</h1>

        @if($widgets->isEmpty())
            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px;">
                No pie chart widgets yet.
            </div>
        @else
            <div style="display:grid; gap:14px;">
                @foreach($widgets as $widget)
                    <div style="background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px;">
                        <h3 style="margin:0 0 8px 0;">{{ $widget->name }}</h3>
                        <div style="font-size:14px; color:#6b7280; margin-bottom:12px;">
                            Type: {{ $widget->chart_type }}
                        </div>
                        <div style="display:flex; gap:10px;">
                            <a class="btn" href="{{ route('pie-chart.show', $widget->id) }}">View</a>
                            <a class="btn btn-secondary" href="{{ route('pie-chart.edit', $widget->id) }}">Edit</a>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection