@extends('layouts.dashboard')
@section('title', __('messages.dashboard_my_roles'))

@section('dashboard_content')
<h1 class="mb-6 font-display text-2xl font-bold">{{ __('messages.dashboard_my_roles') }}</h1>

<div class="mb-8 flex flex-wrap gap-2">
    @forelse ($myRoles as $role)
        <span class="status-pill
            @if ($role->pivot->status === 'approved') bg-green-100 text-green-800
            @elseif ($role->pivot->status === 'rejected') bg-red-100 text-red-800
            @else bg-gold/20 text-gold-dark @endif">
            {{ $role->name_ka }} — {{ __('messages.status_'.$role->pivot->status) }}
            @if ($role->pivot->status === 'rejected' && $role->pivot->rejection_reason)
                <span class="ml-1 opacity-70">({{ $role->pivot->rejection_reason }})</span>
            @endif
        </span>
    @empty
        <p class="text-ink/40">—</p>
    @endforelse
</div>

@if ($availableRoles->isNotEmpty())
    <h2 class="mb-3 font-display text-lg font-semibold">{{ __('messages.action_add') }}</h2>
    <div class="grid gap-2 sm:grid-cols-2">
        @foreach ($availableRoles as $role)
            <div class="flex items-center justify-between rounded-md border border-ink/15 px-3 py-2 text-sm">
                <span>
                    {{ $role->name_ka }}
                    @if ($role->plan && ! $role->plan->isCurrentlyFree())
                        <span class="ml-1 font-mono text-xs text-gold-dark">— {{ number_format($role->plan->price, 0) }} {{ $role->plan->currency }}</span>
                    @elseif ($role->plan && $role->plan->price > 0)
                        <span class="ml-1 font-mono text-xs text-green-700">— დროებით უფასო</span>
                    @endif
                </span>

                @if ($role->needsPayment)
                    <a href="{{ route('pricing.index', ['locale' => app()->getLocale()]) }}" class="text-xs font-semibold text-gold-dark hover:underline">შეძენა →</a>
                @else
                    <form action="{{ route('dashboard.roles.store', ['locale' => app()->getLocale()]) }}" method="POST">
                        @csrf
                        <input type="hidden" name="role" value="{{ $role->slug }}">
                        <button type="submit" class="text-xs font-semibold text-forest hover:underline">{{ __('messages.action_add') }}</button>
                    </form>
                @endif
            </div>
        @endforeach
    </div>
@endif
@endsection