@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Theme Manager</h2>
            @if($website)
                <span class="badge bg-primary">Managing: {{ $website->name }}</span>
            @endif
        </div>
    </div>
    <div class="row">
        @foreach($themes as $theme)
            <div class="col-md-4 mb-4">
                <div class="card h-100 {{ $website && $website->theme === $theme->slug ? 'border-primary' : '' }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ $theme->name }}</h5>
                        <p class="card-text">{{ $theme->description ?? 'No description.' }}</p>
                        <div class="mb-3">
                            <span class="badge bg-{{ $website && $website->theme === $theme->slug ? 'primary' : 'secondary' }}">
                                {{ $website && $website->theme === $theme->slug ? 'Active' : 'Available' }}
                            </span>
                        </div>
                        <div class="d-flex gap-2">
                            @if($website && $website->theme !== $theme->slug)
                                <form method="POST" action="{{ route('websites.settings.update', $website) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="theme" value="{{ $theme->slug }}">
                                    <button type="submit" class="btn btn-outline-primary btn-sm">Activate</button>
                                </form>
                            @endif
                            @if($website && $website->theme === $theme->slug)
                                <a href="{{ route('websites.settings', $website) }}" class="btn btn-success btn-sm">Customize</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection