@extends('layouts.hosting')
@section('title', $title . ' — Ladill Hosting')
@section('content')
    <div class="mx-auto max-w-4xl">
        <div class="mb-6">
            <a href="{{ route('hosting.dashboard') }}" class="text-xs font-medium text-indigo-600 hover:underline">&larr; Overview</a>
            <h1 class="mt-2 text-xl font-semibold tracking-tight text-slate-900">{{ $title }}</h1>
            <p class="mt-0.5 text-sm text-slate-500">Select a hosting account to manage</p>
        </div>

            <div class="space-y-4">
                @foreach($accounts as $account)
                    <a href="{{ route('hosting.accounts.show', $account) }}" 
                       class="group block rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <div class="flex h-12 w-12 items-center justify-center rounded-xl 
                                    @if($account->product?->type === 'wordpress') bg-sky-100
                                    @elseif($account->product?->type === 'multi_domain') bg-emerald-100
                                    @else bg-indigo-100 @endif">
                                    @if($account->product?->type === 'wordpress')
                                        @include('partials.wordpress-icon', ['class' => 'h-6 w-6'])
                                    @else
                                        <svg class="h-6 w-6 
                                            @if($account->product?->type === 'multi_domain') text-emerald-600
                                            @else text-indigo-600 @endif" 
                                            fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/>
                                        </svg>
                                    @endif
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-900 group-hover:text-indigo-600 transition">
                                        {{ $account->linkedDomainLabel() ?? $account->username }}
                                    </h3>
                                    <div class="flex items-center gap-3 mt-1">
                                        <span class="text-sm text-slate-500">{{ $account->username }}</span>
                                        <span class="text-sm text-slate-400">·</span>
                                        <span class="text-sm text-slate-500">{{ $account->product?->name ?? 'Hosting' }}</span>
                                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
                                            @if($account->status === 'active') bg-emerald-100 text-emerald-700
                                            @elseif($account->status === 'suspended') bg-red-100 text-red-700
                                            @else bg-slate-100 text-slate-700 @endif">
                                            {{ ucfirst($account->status) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                <div class="text-right hidden sm:block">
                                    <p class="text-xs text-slate-500">{{ $account->sites->count() }} {{ Str::plural('domain', $account->sites->count()) }}</p>
                                    @if($account->expires_at)
                                        <p class="text-xs text-slate-400">Expires {{ $account->expires_at->format('M j, Y') }}</p>
                                    @endif
                                </div>
                                <svg class="h-5 w-5 text-slate-400 group-hover:text-indigo-600 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                                </svg>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-8 rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center">
                <h3 class="font-medium text-slate-900">Need another hosting account?</h3>
                <p class="mt-1 text-sm text-slate-600">Choose a plan that fits your needs</p>
                <div class="mt-4 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('hosting.single-domain') }}" class="inline-flex items-center rounded-lg bg-white border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                        Single Domain
                    </a>
                    <a href="{{ route('hosting.multi-domain') }}" class="inline-flex items-center rounded-lg bg-white border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                        Multi Domain
                    </a>
                    <a href="{{ route('hosting.wordpress') }}" class="inline-flex items-center rounded-lg bg-white border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                        @include('partials.wordpress-icon', ['class' => 'h-4 w-4 mr-1.5'])
                        WordPress
                    </a>
                </div>
            </div>
    </div>
@endsection