@use(App\Models\SupplierHostServer)

<!-- o=Service\Host::class -->
<div class="row">
	<div class="col-12 col-sm-9 col-md-12 col-xl-7">
		<x-form.domain name="hosting" label="Domain Name" :name_value="$o->domain_name" :tld_value="$o->tld_id"/>
	</div>

	<div class="col-12 col-sm-9 col-md-6 col-xl-5">
		<x-leenooks::form.date id="expire_at" name="hosting[expire_at]" icon="fa-calendar" label="Expiry" old="hosting.expire_at" :value="($o->expire_at ?: $o->connect_at?->addMonths($o->contract_term))?->format('Y-m-d')"/>
	</div>
</div>

<hr>
<p class="h6">Hosting Details</p>

<div class="row">
	<div class="col-12 col-sm-9 col-md-6 col-xl-5">
		<x-leenooks::form.select id="supplier_host_server_id" name="hosting[supplier_host_server_id]" icon="fa-handshake" label="Registrar" :value="$o->supplier_host_server_id" :options="SupplierHostServer::active()->orderBy('name')->get()->transform(fn($item)=>['id'=>$item->id,'value'=>$item->name])"/>
	</div>
</div>

<div class="row">
	<div class="col-12 col-sm-9 col-md-12 col-xl-7">
		<x-leenooks::form.text id="host_username" name="hosting[host_username]" icon="fa-user" label="Admin Username" :value="$o->host_username"/>
	</div>

	<div class="col-12 col-sm-9 col-md-5 col-xl-5">
		<x-leenooks::form.text id="host_password" name="hosting[host_password]" icon="fa-lock" label="Admin Password" :value="$o->host_password"/>
	</div>
</div>

@pa(select2,autofocus)

@section('page-scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			$('#tld_id').select2({
				dropdownAutoWidth: true,
				width: 'style',
			});
		});
	</script>
@append