@php
    $rowIndex = is_numeric($index) ? (int) $index : 0;
    $prefix = 'cdn_pool_servers['.$rowIndex.']';
    $collapseId = 'cdn-pool-collapse-'.$rowIndex;
    $headingId = 'cdn-pool-heading-'.$rowIndex;
    $isFirst = false;
    $serverName = trim((string) ($server->name ?? ''));
    $headerTitle = $serverName !== '' ? $serverName : __('translate.Cloudflare CDN server').' '.($rowIndex + 1);
    $headerUrl = $server->base_url ?? '';
@endphp
<div class="accordion-item cdn-pool-accordion-item" data-cdn-pool-row>
    <h2 class="accordion-header" id="{{ $headingId }}">
        <button
            class="accordion-button collapsed cdn-pool-accordion-item__toggle"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#{{ $collapseId }}"
            aria-expanded="false"
            aria-controls="{{ $collapseId }}"
        >
            <span class="cdn-pool-accordion-item__title-wrap">
                <span class="cdn-pool-accordion-item__title">{{ $headerTitle }}</span>
                <span class="cdn-pool-accordion-item__url" @if ($headerUrl === '') style="display:none" @endif>{{ $headerUrl }}</span>
            </span>
            @if (! empty($server))
                <span class="cdn-pool-accordion-item__badges">
                    @if ($server->isOperational())
                        <span class="badge bg-success">{{ __('translate.Active') }}</span>
                    @elseif ($server->is_auto_disabled)
                        <span class="badge bg-danger">{{ __('translate.CDN pool auto disabled') }}</span>
                    @elseif ($server->isOverMonthlyLimit())
                        <span class="badge bg-warning text-dark">{{ __('translate.CDN pool limit reached') }}</span>
                    @endif
                    @if (! $server->isUnlimitedBandwidth())
                        <span class="badge bg-light text-dark border">{{ number_format($server->monthly_bytes_used / 1024 / 1024, 1) }}/{{ $server->monthlyLimitLabel() }}</span>
                    @else
                        <span class="badge bg-light text-dark border">{{ number_format($server->monthly_bytes_used / 1024 / 1024, 1) }} MB · {{ __('translate.Unlimited') }}</span>
                    @endif
                </span>
            @endif
        </button>
    </h2>
    <div id="{{ $collapseId }}" class="accordion-collapse collapse" aria-labelledby="{{ $headingId }}" data-bs-parent="#cdnPoolAccordion">
        <div class="accordion-body">
            @if (! empty($server?->id))
                <input type="hidden" name="{{ $prefix }}[id]" value="{{ $server->id }}">
            @endif
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="crancy__item-label">{{ __('translate.CDN pool server name') }}</label>
                    <input class="crancy__item-input js-cdn-pool-name-input" type="text" name="{{ $prefix }}[name]" value="{{ old('cdn_pool_servers.'.$rowIndex.'.name', $server->name ?? '') }}" placeholder="Cloudflare #1">
                </div>
                <div class="col-md-5">
                    <label class="crancy__item-label">{{ __('translate.Cloudflare CDN URL') }} *</label>
                    <input class="crancy__item-input js-cdn-pool-url-input" type="url" name="{{ $prefix }}[base_url]" value="{{ old('cdn_pool_servers.'.$rowIndex.'.base_url', $server->base_url ?? '') }}" placeholder="https://cdn1.domeniu.ro">
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.CDN pool monthly limit mb') }}</label>
                    <input class="crancy__item-input" type="number" min="0" name="{{ $prefix }}[monthly_bandwidth_limit_mb]" value="{{ old('cdn_pool_servers.'.$rowIndex.'.monthly_bandwidth_limit_mb', $server->monthly_bandwidth_limit_mb ?? 0) }}">
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.CDN pool priority') }}</label>
                    <input class="crancy__item-input" type="number" min="1" max="9999" name="{{ $prefix }}[priority]" value="{{ old('cdn_pool_servers.'.$rowIndex.'.priority', $server->priority ?? (($rowIndex + 1) * 10)) }}">
                </div>
                <div class="col-md-3">
                    <label class="crancy__item-label">{{ __('translate.Status') }}</label>
                    <select class="form-select crancy__item-input" name="{{ $prefix }}[is_enabled]">
                        <option value="1" {{ ($server->is_enabled ?? true) ? 'selected' : '' }}>{{ __('translate.Enable') }}</option>
                        <option value="0" {{ isset($server) && ! $server->is_enabled ? 'selected' : '' }}>{{ __('translate.Disable') }}</option>
                    </select>
                </div>
                @if (! empty($server))
                    <div class="col-md-6">
                        <small class="text-muted">
                            {{ __('translate.CDN pool errors') }}: <strong>{{ $server->consecutive_errors }}/{{ $server->total_errors }}</strong>
                            · {{ __('translate.CDN pool monthly usage') }}:
                            <strong>{{ number_format($server->monthly_bytes_used / 1024 / 1024, 2) }} / {{ $server->monthlyLimitLabel() }}</strong>
                        </small>
                    </div>
                @endif
                @if (! empty($server?->is_auto_disabled))
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="{{ $prefix }}[clear_auto_disabled]" value="1" id="clear_auto_{{ $rowIndex }}">
                            <label class="form-check-label" for="clear_auto_{{ $rowIndex }}">{{ __('translate.CDN pool re enable') }}</label>
                        </div>
                    </div>
                @endif
                <div class="col-12 text-end">
                    <button type="button" class="btn btn-outline-danger btn-sm js-cdn-pool-remove-row">
                        <i class="fas fa-trash-alt"></i> {{ __('translate.Remove') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>